JavaScript 原型链解析,宏任务和微任务

 

目录

什么是原型链?

原型与构造函数

原型链的工作原理

实例:理解原型链

宏任务(Macro Task)

微任务(Micro Task)


什么是原型链?

JavaScript 是一门基于原型的语言,而原型链是 JavaScript 中实现继承的一种机制。它允许对象通过从其他对象继承属性和方法,形成一个链式结构。当访问一个对象的属性或方法时,如果当前对象没有找到,JavaScript 就会在原型链中继续查找。

原型与构造函数

在 JavaScript 中,每个对象都有一个称为原型的隐藏属性。原型可以是一个普通对象或 null。每个构造函数都有一个 prototype 属性,它是一个指向原型对象的引用。当我们使用构造函数创建一个新对象时,新对象的原型会指向构造函数的 prototype。

function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name}.`);
};const john = new Person('lisi');

在上面的例子中,我们创建了一个构造函数 Person,并给它的 prototype 添加了一个 sayHello 方法。当我们使用 new Person('lisi') 创建 lisi 对象时,lisi对象的原型就会指Person.prototype

原型链的工作原理

当我们访问一个对象的属性或方法时,JavaScript 引擎首先会在对象本身中查找。如果找不到,它会继续在原型链中向上查找,直到找到该属性或方法或者到达原型链的末尾(即原型为 null)。

让我们看一个示例:

function Animal(species) {this.species = species;
}Animal.prototype.getSpecies = function() {return this.species;
};function Dog(name, breed) {this.name = name;this.breed = breed;
}Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;const fluffy = new Dog('Fluffy', 'Golden Retriever');
console.log(fluffy.getSpecies()); // Output: "Golden Retriever"

在上面的例子中,我们创建了两个构造函数 AnimalDog。我们让 Dog 的原型指向 Animal 的实例,从而形成了一个原型链。当我们通过 fluffy 对象调用 getSpecies 方法时,由于 fluffy 对象本身没有 getSpecies 方法,JavaScript 引擎会沿着原型链向上查找,找到了 Animal.prototype 上的 getSpecies 方法并调用它。

实例:理解原型链

// 构造函数 Person
function Person(name, age) {this.name = name;this.age = age;
}// 在 Person 的原型上添加一个 sayHello 方法
Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};// 创建一个 Person 对象
const john = new Person('John', 30);// 调用 sayHello 方法
john.sayHello(); // Output: "Hello, my name is John and I'm 30 years old."

在这个简单的实例中,我们定义了一个构造函数 Person,它有两个属性 nameage。然后,我们通过给 Person.prototype 添加 sayHello 方法,使得所有通过 Person 构造函数创建的对象都可以调用 sayHello 方法。

当我们通过 new Person('John', 30) 创建了 john 对象后,john 对象的原型链上就可以找到 sayHello 方法。因此,当我们调用 john.sayHello() 时,JavaScript 引擎会在 john 对象中查找是否有 sayHello 方法,由于没有找到,它会继续向上查找,最终在 Person.prototype 上找到了 sayHello 方法并调用它。

结论:

原型链是 JavaScript 中实现继承的关键机制。它允许对象在运行时从其他对象继承属性和方法,并形成一个链式结构。通过深入理解原型链,我们可以更好地理解 JavaScript 中对象和继承的工作原理。

宏任务(Macro Task)

宏任务代表一组相互独立的、按顺序执行的任务。它们通常代表一些较为耗时的操作,例如 I/O 操作、定时器回调、DOM 事件等。宏任务的执行顺序是先进先出的。

在浏览器中,宏任务队列包含了一些异步任务,当主线程执行完同步代码后,会从宏任务队列中选择一个任务执行,执行完成后再次回到主线程执行同步代码,如此循环。

微任务(Micro Task)

微任务是宏任务中的一种更小的任务单元。它们具有高优先级,并且在当前宏任务执行完成后立即执行。常见的微任务包括 Promise 的回调、MutationObserver 的回调以及 process.nextTick 等。

在浏览器中,当一个宏任务执行完毕后,会检查当前宏任务是否产生了微任务,如果有,则会依次将微任务队列中的任务全部执行完毕,然后再执行下一个宏任务。这保证了微任务在宏任务之间执行,优先级比宏任务高。

实例:

console.log('Start'); // 同步任务,属于宏任务setTimeout(() => {console.log('Timeout'); // 异步任务,属于宏任务
}, 0);Promise.resolve().then(() => {console.log('Promise'); // 异步任务,属于微任务
});console.log('End'); // 同步任务,属于宏任务

执行上述代码,输出结果: 

Start
End
Promise
Timeout
 

执行过程:

  1. 同步任务 console.log('Start')console.log('End') 首先进入宏任务队列,并立即执行。
  2. setTimeout 定时器会被放入宏任务队列,但由于时间设置为 0,它的回调函数会稍后执行。
  3. Promise.resolve().then 的回调函数进入微任务队列,并立即执行。
  4. 主线程执行完当前宏任务后,会检查微任务队列并执行其中的任务,执行结果为 Promise
  5. 微任务执行完毕后,再从宏任务队列中选择一个任务执行,输出 Timeout

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/28101.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 有效的字母异位词

242 有效的字母异位词 给定两个字符串 和 ,编写一个函数来判断 是否是 的字母异位词。stts 注意:若 和 中每个字符出现的次数都相同,则称 和 互为字母异位词。stst 示例 1: 输入: s “anagram”, t “nagaram” 输出: true 示例 2: 输…

11. Redis基础知识

文章目录 一、概述二、数据类型STRINGLISTSETHASHZSET 三、数据结构字典跳跃表 四、使用场景计数器缓存查找表消息队列会话缓存分布式锁实现其它 五、Redis 与 Memcached数据类型数据持久化分布式内存管理机制 六、键的过期时间七、数据淘汰策略八、持久化RDB 持久化AOF 持久化…

Netty:ByteBuf的最大快速可以写入字节数

说明 通过io.netty.buffer.ByteBuf的maxFastWritableBytes()函数可以得到最大快速可写入字节数。最大快速可写入字节数表示没有内部再分配内存的情况下肯定可以写入的最大字节数。maxFastWritableBytes() capacity(容量) - writerIndexwritableBytes()…

【C++从0到王者】第十八站:手把手教你写一个简单的优先级队列

文章目录 一、优先级队列简介二、优先级队列的接口说明1.基本介绍及其使用2.构造函数3.求数组中第k个最大的元素 三、手撕优先级队列四、仿函数1.仿函数介绍2.优先级队列添加仿函数3.需要自己写仿函数的情形 五、优先级队列完整代码 一、优先级队列简介 优先级队列是一种容器适…

Java经典面试题总结(一)

Java经典面试题总结(一) 题一:Java编译运行原理题二:JDK,JVM,JRE三者之间的关系题三:谈一下对冯诺依曼体系的了解题四:重载与重写的区别题五:拆箱装箱是指什么&#xff1…

Diffusion-GAN: Training GANs with Diffusion

目录 Abstract 1. Introduction 2. Preliminaries: GANs and diffusion-based generative models 3. Diffusion-GAN: Method and Theoretical Analysis 3.1 Instance noise injection via diffusion 3.2 Adversarial Training 3.3 Adaptive diffffusion 3.4 Theoretica…

微服务技术栈

微服务技术栈是指在开发和构建微服务架构时使用的一组技术和工具。微服务架构是一种软件开发模式,将一个大型应用程序拆分为一组小型、自治的服务,每个服务独立部署、可独立扩展,并通过轻量级的通信机制进行互相协作。 微服务技术栈通常包括…

Netty 入门指南

文章目录 前言Netty介绍Netty发展历程Netty核心组件实现HTTP服务器总结 前言 上文《BIO、NIO、IO多路复用模型详细介绍&Java NIO 网络编程》介绍了几种IO模型以及Java NIO,了解了在网络编程时使用哪种模型可以提高系统性能及效率。即使Java NIO可以帮助开发人员…

44.实现爱尔兰B公式计算并输出表格(matlab程序)

1.简述 1.话务量定义 话务量指在一特定时间内呼叫次数与每次呼叫平均占用时间的乘积。 话务量反映了电话负荷的大小,与呼叫强度和呼叫保持时间有关。呼叫强度是单位时间内发生的呼叫次数,呼叫保持时间也就是占用时间。 话务量计算方法 话务量公式为…

[CKA]考试之集群故障排查 – kubelet故障

由于最新的CKA考试改版,不允许存储书签,本博客致力怎么一步步从官网把答案找到,如何修改把题做对,下面开始我们的 CKA之旅 题目为: Task 一个名为wk8s-node-0的节点状态为NotReady,让其他恢复至正常状态…

c++调用ffmpeg api录屏 并进行udp组播推流

代码及工程见https://download.csdn.net/download/daqinzl/88155241 开发工具&#xff1a;visual studio 2019 播放&#xff0c;采用ffmpeg工具集里的ffplay.exe, 执行命令 ffplay udp://224.1.1.1:5001 主要代码如下: #include "pch.h" #include <iostream>…

RANSAC算法在Python中的实现与应用探索:线性拟合与平面拟合示例

第一部分:RANSAC算法与其应用 在我们的日常生活和多个领域中,如机器学习,计算机视觉,模式识别等,处理数据是一个非常重要的任务。尤其是当我们需要从嘈杂的数据中获取信息或拟合模型时。有时候,数据可能包含异常值或噪声,这可能会对我们的结果产生重大影响。为了解决这…

【搜索】DFS剪枝与优化

算法提高课笔记 目录 小猫爬山题意思路代码 数独题意思路代码 木棒题意思路代码 生日蛋糕题意思路代码 剪枝是什么意思呢&#xff1f; 我们知道&#xff0c;不管是内部搜索还是外部搜索&#xff0c;都可以形成一棵搜索树&#xff0c;如果将搜索树全部遍历一遍&#xff0c;效率…

【深度学习_TensorFlow】误差函数

写在前面 搭建完网络层后&#xff0c;在每层网络中都要进行前向计算&#xff0c;下一步就是选择合适的误差函数来计算误差。其中均方差函数和交叉熵函数在深度学习中比较常见&#xff0c;均方差函数主要用于回归问题&#xff0c;交叉熵函数主要用于分类问题。 写在中间 均方差…

低功耗LoRaWAN国产低功耗LoRa+RF射频前端芯片XD6500S

目录 典型应用XD6500S简介芯片特性 LoRa系列选型参考 LoRa是为低数据速率、远距离距离和超低功耗而优化的扩频协议&#xff0c;用于LPWAN应用程序的通信。 典型应用 一、智慧农业   智慧农业大田解决方案利用传感设备、自动化控制设备、气象站实时监测采集田间土壤墒情、气象…

【Java面试】Nacos自动注册原理实现以及服务注册更新并如何保存到注册表

文章目录 Nacos自动注册原理实现服务注册更新并如何保存到注册表 Nacos自动注册原理实现 完整流程 我们知道SpringBoot提供了挂载点的方式来帮助我们的类完成自动注入。 Nacos再META-INF的spring.factories这个文件中添加了自己需要自动注入的Bean对象。 叫做NacosServiceRegi…

HTTP协议——应用层

HTTP协议 只要保证, 一端发送时构造的数据, 在另一端能够正确的进行解析, 就是ok的. 这种约定, 就是 应用层协议 HTTP简介 HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;协议又叫做超文本传输协议&#xff0c;是一个简单的请求-响应协议&#xff0c;HTTP通常运行…

MyBatis简介及环境配置

文章目录 一、什么是MyBatis二、MyBatis开发环境配置1.创建数据库表2.添加MyBatis框架支持3.配置连接字符串和MyBatis4.添加业务代码流程 一、什么是MyBatis MyBatis是一种持久层框架&#xff0c;也是一种ORM框架&#xff08;Object Relational Mapping即对象关系映射&#xf…

6.5 池化层

是什么&#xff1a;池化层跟卷积层类似有个滑动窗口&#xff0c;用来取一个区域内的最大值或者平均值。 作用&#xff1a;卷积神经网络的最后的部分应该要看到整个图像的全局&#xff0c;通过池化(汇聚)操作&#xff0c;逐渐汇聚要取的像素&#xff0c;最终实现学习全局表示的…

【AutoLayout案例1-按钮居中显示 Objective-C语言】

一、按钮居中显示 1.接下来,我们就用这个autoLayout,自动布局,给大家写一个,实现几个案例,给大家看一下 那么,首先,第一个,大家注意, 当我们使用autoLayout,自动布局的时候,我们新建一个项目, 这个新建的项目,里面有一个控制器,这个控制器,是不是默认,是四四…