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"

在上面的例子中，我们创建了两个构造函数 Animal 和 Dog。我们让 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，它有两个属性 name 和 age。然后，我们通过给 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。