江の 发布的文章


/**
 * 定义类的思路
 *   分析功能
 */
class MyPromise {
  // 创建一个变量存储Promise结果
  _result;
  //   创建一个变量记录promise状态
  _state = 0; //pending0 fufilled1 rejected2
  // 创建一个变量存储回调函数
  _callbacks = [];

  constructor(executor) {
    // 接受一个执行器作为参数
    executor(this._resolve.bind(this), this._reject.bind(this));
  }

  //   私有的resolve() es6中使用#    不使用箭头函数 在类中因严格模式 this=undefined 所以可以使用.bind()重新指定this 且这种情况下函
  //   数在实例对象的原型下更省内存
  _resolve(value) {
    this._result = value;
    // 禁止值被重复修改
    if (this._state !== 0) return;
    this._state = 1;
    // 当resolve执行时说明数据进来了 调用 then的回调函数
    queueMicrotask(() => {
      // 调用callbacks中所有函数
      this._callbacks.forEach((cb) => {
        cb();
      });
    });
  }
  // 箭头函数形式
  //   _resolve=(value)=>{
  //     console.log(this);
  //   }

  //   私有reject()
  _reject(reason) {}

  then(onFufilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this._state == 0) {
        // 说明数据还没进入promise
        // 将回调函数设置为callback
        this._callbacks.push(() => {
          resolve(onFufilled(this._result));
        });
      } else if (this._state == 1) {
        // then的回调函数应放到微任务队列而不是直接调用
        queueMicrotask(() => {
          resolve(onFufilled(this._result));
        });
      }
    });
  }
}

const mp = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve("11");
  }, 1000);
});

mp.then((result) => {
  console.log(23, result);
  return 11;
})
  .then((result) => {
    console.log(result);
    return 33;
  })
  .then((result) => {
    console.log(result);
  });

js是单线程的 它的运行基于eventloop事件循环机制。

  1. 调用栈

  栈是一种数据结构 后进先出 
  栈中放的是要执行的代码
 

  1. 任务队列

  队列是一种数据结构,先进先出
  任务队列中是将要执行的代码
  当调用栈的代码执行完毕后 队列中的代码才会按照顺序进入栈中依次执行
  在js中任务队列有两种

  -宏任务队列 (大部分代码)
  -微任务队列 (Promise的回调函数:then,catch,finally.....)
  1. 整个流程

    1.调用栈
    2.微任务队列
    3.宏任务队列
    js中 queueMicrotask()用来向微任务添加任务


 //练习
 console.log(1);

setTimeout(() => console.log(2));

Promise.resolve().then(() => console.log(3));

Promise.resolve().then(() => setTimeout(() => console.log(4)));

Promise.resolve().then(() => console.log(5));

setTimeout(() => console.log(6));

console.log(7);



无论是中国顶级作曲家阿鲲的配乐
继承球1的顶级视效
还是充满脑洞的科幻想法
都让我为之震撼
球2的家国情怀也不偏不倚正中中国人心中
也许当下流量时代使得中国影视劣币驱逐良币
但优质的作品仍在涌现
我选择希望
流浪地球。
⭐⭐⭐⭐