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

这篇具有很好参考价值的文章主要介绍了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
 

执行过程:文章来源地址https://www.toymoban.com/news/detail-624796.html

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

到了这里,关于JavaScript 原型链解析,宏任务和微任务的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javascript中的prototype;javascript中的原型链

    在JavaScript中,每个对象都有一个原型(prototype),并且原型可以有自己的原型,形成了一个链式结构,被称为原型链。这个机制是JavaScript中实现继承和对象属性查找的基础。 原型链是由对象之间的连接构成的。每个对象都有一个指向它原型的链接,这个链接可以追溯到顶层

    2024年02月20日
    浏览(43)
  • JavaScript原型链污染

    在浏览某个论坛的时候,第一次看到了JavaScript原型链污染漏洞。当时非常的好奇,当时我一直以为js作为一种前端语言,就算存在漏洞也是针对前端,不会危害到后端,因此我以为这种漏洞危害应该不大。可当我看到他的漏洞危害还有可以执行任意命令的时候,发现可能我想

    2024年02月10日
    浏览(42)
  • 【JavaScript】原型

    在 JavaScript 中,每个对象都有一个原型(prototype),它是一个对象本身,而不是一个函数。原型机制是 JavaScript 的核心特性之一,它允许对象继承另一个对象的属性和方法。 以下是关于 JavaScript 原型的基本概念和用法: 原型链: 每个对象都有一个原型,而原型本身也是一个

    2024年02月11日
    浏览(36)
  • JavaScript原型链污染学习记录

    0 原型及其搜索机制 NodeJS原型机制,比较官方的定义: 我们创建的每个函数都有一个 prototype(原型)属性,这个属性是一个指针,指向一个对象, 而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法 设计原型的初衷无非是对于每个实例对象,其拥有的共同

    2024年02月02日
    浏览(47)
  • JavaScript原型链污染漏洞复现与防范

    目录 什么是原型链污染漏洞? 复现原型链污染漏洞 防范原型链污染漏洞 原型链污染是JavaScript中的一种安全漏洞,利用该漏洞可以修改对象的原型,从而影响对象及其属性的行为。攻击者可以通过修改原型链来添加或覆盖属性,甚至在全局范围内添加恶意代码,导致应用程

    2024年02月13日
    浏览(42)
  • 第3集丨JavaScript 使用原型(prototype)实现继承——最佳实战1

    在 JavaScript 中, 继承机制的基础是 原型 ,(包括内部原型 __proto__ 和 prototype )。当访问一个对象的属性时, JavaScript 引擎是这么搜索的:如果在本对象中找不到一个属性时,就会去其原型对象中找,如果原型对象中还没找到的话,就去到原型对象中的原型中去找,直到顶级

    2024年02月15日
    浏览(71)
  • JavaScript设计模式(一)——构造器模式、原型模式、类模式

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月11日
    浏览(45)
  • 第6集丨JavaScript 使用原型(prototype)实现继承——最佳实战3

    对于继承应用来说,主要目标是将一些现有的功能归为己有。也就是说,我们在新建一个对象时,通常首先应该继承于现有对象,然后在为其添加额外的方法和属性。对此,我们可以通过一个函数调用来完成,并且在其中混合使用我们刚才所讨论的两种方式: 使用原型继承的

    2024年02月16日
    浏览(49)
  • 第4集丨JavaScript 使用原型(prototype)实现继承——最佳实战2

    书接上集,在上集中我们给出了一个需求说明,要求利用现学的知识实现原型( prototype )继承,并且我们给出了三种实现方式。但是这三种方式各自有优缺点,都不能很好的满足要求,那是否还有其他更好的实现方式呢? 在看本文之前,诸位可以自己思考下?带着问题去学

    2024年02月12日
    浏览(47)
  • 【前端知识】JavaScript——设计模式(工厂模式、构造函数模式、原型模式)

    工厂模式是一种众所周知的设计模式,广泛应用于软件工程领域,用于抽象创建特定对象的过程。 优点:可以解决创建多个类似对象的问题 缺点:没有解决对象标识问题(即新创建的对象是什么类型) 示例: 构造函数模式与工厂模式相比,没有显式地创建对象,其属性和方

    2024年02月15日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包