在JavaScript的异步编程中，Promise是核心概念之一。它允许我们以链式的方式处理异步操作的结果。在上节课中，我们学习了如何控制Promise的状态。本节课，我们将深入探讨如何实现then函数，并理解微任务队列的工作原理。

微任务队列的理解

在JavaScript中，微任务（microtask）是指在当前执行栈执行完毕后，事件循环开始之前执行的任务。这些任务通常包括Promise的回调、MutationObserver的回调等。微任务的执行优先级高于宏任务（如setTimeout、setInterval等）。

实现then函数

then函数是Promise对象的核心，它允许我们为Promise的成功（fulfilled）和失败（rejected）状态分别指定回调函数。在实现then函数时，我们需要考虑以下几点：

链式调用：then函数需要返回一个新的Promise对象，以便可以链式调用。状态传递：then函数需要正确处理上一个Promise的状态，并传递给下一个Promise。微任务调度：then函数内部的回调需要被放入微任务队列中执行。先搭出then函数的架子

class MyPromise {
 
    // 其它代码
    then(onFulfilled, onRejected) {
      // 这里有几个注意点，第一个点是这里的resolve，reject是注册函数，并不是马上去做的，放到微队列
      // 写一个辅助函数
      return new MyPromise((resolve, reject)=>{
​
      })
    }
    // 其它代码
}
​

辅助函数：runMicroTask

为了模拟微任务队列，我们可以创建一个辅助函数runMicroTask。这个函数会根据当前的执行环境（Node.js或浏览器），将回调函数放入微任务队列中。

function runMicroTask(callback) {
  if (process && process.nextTick) {
    process.nextTick(callback);
  } else if(MutationObserver) {
    const p = document.createElement('p');
    const observer = new MutationObserver(function () {
      callback();
      p.removeChild(p.firstChild);
    });
    observer.observe(p, { childList: true });
    p.appendChild(document.createTextNode(''));
  } else {
    setTimeout(callback, 0);
  }
}

浏览器中的微任务示例

在浏览器中，我们可以使用MutationObserver来创建微任务。以下是一个示例：

const p = document.createElement('p');
const observer = new MutationObserver(function () {
  console.log('变化了');
});
observer.observe(p, { childList: true });
p.innerHTML = '1'; // 触发微任务
console.log(2); // 先打印2

总结

通过本节课的学习，我们不仅理解了then函数的实现原理，还深入探讨了微任务队列的工作原理。这对于我们更好地掌握JavaScript的异步编程模式至关重要。记住，微任务总是优先于宏任务执行，这是JavaScript异步编程中的一个重要特性。