从 TS 造 Promise 的过程创建前端安全感

你还在用 npm 的 star 数来选择依赖吗？在 npm 安全性问题随时爆发 的今天，做为前端开发者的咱们应该具有源码阅读的能力，最好知道本身在用什么，这样在使用外部 npm 依赖时才有安全感不是么?

最近遇到一个细思极恐的问题，笔者最近总是收到防脱广告推送亦或是一些与笔者最近说出来的话相关的广告，之前只知道网上的信息流会被窃据，现在难不成语音也会监听窃取了？？？吓得我赶忙关掉了全部麦的权限。虽然咱们不能本身造个手机，但也不能活得没有安全感。

拿 axios 这个咱们经常使用的依赖来讲，若是哪天被篡改了，那后果然不敢想象。即使这基本是不可能的，但切图仔中的精英不能就此中止追求进步的脚步。好在笔者前些天写了篇 axios 重构经验分享，多少能够证实本身努力过。 😂

这还不够，翻了下最经常使用的依赖，其中 es6-promise 特别惹眼 (源码比较晦涩难懂，说白了就是有点乱)，原本早就想深刻了解 Promise ，因而绝不犹豫决定造它。因为笔者在过渡到 TypeScript ，因此本次开发依旧会采用 TypeScript 来敲。

这应该是笔者最后一次用 TypeScript 冠名分享文章，再见 🤞，我已经能够安全上路了。( 喊了那么屡次，快上车，都没有多少人上车，那我就先走了。)

本文适合从零了解或者想从新深刻研究 Promise 的读者，而且能够获得以下知识：

• Promise 重要知识点
• Promise API 实现方法
• 前端何来安全感

笔者但愿读者能够仅经过看仅此一篇文章就能够对 Promise 有个深入的认知，而且能够本身实现一个 Promise 类。因此会从方方面面讲 Promise，内容可能会比较多，建议读者选读。

为何要实现 Promise

Promise 出如今 Es6 ，若是 Es5 须要使用 Promise，一般须要用到 Promise-polyfill 。也就是说，咱们要实现的是一个 polyfill。实现它不只有助于咱们深刻了解 Promise 并且能减小使用中犯错的几率，以致于得到 Promise 最佳实践。

从另一个角度来讲从新实现某个依赖也是一种源码解读的方式，坚持这么作，意味着解读源码能力的提高。

Promise

Promise 表示一个异步操做的最终结果，与之进行交互的方式主要是 then 方法，该方法注册了两个回调函数，用于接收 promise 的终值或本 promise 不能执行的缘由。

来看笔者用心画的一张 API 结构图 ( 看不清楚的能够进个人 GitHub 看，有大图和 xmind 源文件 )：

上图只是一个 Promise 的 API 蓝图，其实 Promises/A+ 规范并不设计如何建立、解决和拒绝 promise，而是专一于提供一个通用的 then 方法。因此，Promise/A+ 规范的实现能够与那些不太规范但可用的实现能良好共存。若是你们都按规范来，那么就没有那么多兼容问题。(PS：包括 web 标准 ) 接着聊下 Promises/A+，看过的能够跳过。

Promises/A+

全部 Promise 的实现都离不开 Promises/A+ 规范，内容很少，建议你们能够过一遍。这边讲一些规范中重要的点

术语

• Promise 一个拥有 then 方法的对象或函数，其行为符合 Promises/A+ 规范；
• thenable 一个定义了 then 方法的对象或函数，也可视做 “拥有 then 方法”
• 值（value） 指任何 JavaScript 的合法值（包括 undefined , thenable 和 promise）
• 异常（exception） 使用 throw 语句抛出的一个值
• 据因（reason） 表示一个 promise 的拒绝缘由。

Promise 的状态

一个 Promise 的当前状态 必须为如下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。

• 等待态（Pending）

  处于等待态时，promise 需知足：能够迁移至执行态或拒绝态

• 执行态（Fulfilled）

  处于执行态时，promise 需知足：不能迁移至其余任何状态，必须拥有一个不可变的终值

• 拒绝态（Rejected）

  处于拒绝态时，promise 需知足：不能迁移至其余任何状态，必须拥有一个不可变的据因

这里的不可变指的是恒等（便可用 === 判断相等），而不是意味着更深层次的不可变（ 指当 value 或 reason 不是 基本值时，只要求其引用地址相等，但属性值可被更改）。

Then 方法

一个 promise 必须提供一个 then 方法以访问其当前值、终值和据因。

promise 的 then 方法接受两个参数：

promise.then(onFulfilled, onRejected);

• onFulfilled 和 onRejected 都是可选参数。
• 若是 onFulfilled 是函数，当 promise 执行结束后其必须被调用，其第一个参数为 promise 的终值，在 promise 执行结束前其不可被调用，其调用次数不可超过一次
• 若是 onRejected 是函数，当 promise 被拒绝执行后其必须被调用，其第一个参数为 promise 的据因，在 promise 被拒绝执行前其不可被调用，其调用次数不可超过一次
• onFulfilled 和 onRejected 只有在执行环境堆栈仅包含平台代码 ( 指的是引擎、环境以及 promise 的实施代码 )时才可被调用
• 实践中要确保 onFulfilled 和 onRejected 方法异步执行，且应该在 then 方法被调用的那一轮事件循环以后的新执行栈中执行。
• onFulfilled 和 onRejected 必须被做为函数调用即没有 this 值 ( 也就是说在 严格模式（strict） 中，函数 this 的值为 undefined ；在非严格模式中其为全局对象。)
• then 方法能够被同一个 promise 调用屡次
• then 方法必须返回一个 promise 对象

Then 参数 (函数) 返回值

但愿读者能够认真看这部分的内容，对于理解 promise 的 then 方法有很大的帮助。

先来看下 promise 执行过程：

大体的过程是，promise 会从 pending 转为 fulfilled 或 rejected ，而后对应调用 then 方法参数的 onFulfilled 或 onRejected ，最终返回 promise 对象。

进一步理解，假定 有以下两个 promise：

promise2 = promise1.then(onFulfilled, onRejected);

会有如下几种状况：

1. 若是 onFulfilled 或者 onRejected 抛出异常 e ，则 promise2 必须拒绝执行，并返回 拒因 e
2. 若是 onFulfilled 不是函数 且 promise1 成功执行， promise2 必须成功执行并返回 相同的值
3. 若是 onRejected 不是函数 且 promise1 拒绝执行， promise2 必须拒绝执行并返回 相同的据因

但愿进一步搞懂的，能够将下面代码拷贝到 chrome 控制台或其余可执行环境感觉一下：

// 经过改变 isResolve 来切换 promise1 的状态
const isResolve = true;

const promise1 = new Promise((resolve, reject) => {
  if (isResolve) {
    resolve('promise1 执行态');
  } else {
    reject('promise1 拒绝态');
  }
});

// 1、promise1 处于 resolve 以及 onFulfilled 抛出异常 的状况
// promise2 必须拒绝执行，并返回拒因
promise1
  .then(() => {
    throw '抛出异常!';
  })
  .then(
    value => {
      console.log(value);
    },
    reason => {
      console.log(reason);
    }
  );

// 2、promise1 处于 resolve 以及 onFulfilled 不是函数的状况
// promise2 必须成功执行并返回相同的值
promise1.then().then(value => {
  console.log(value);
});

// 3、promise1 处于 reject 以及 onRejected 不是函数的状况
// promise2 必须拒绝执行并返回拒因
promise1.then().then(
  () => {},
  reason => {
    console.log(reason);
  }
);

// 4、promise1 处于 resolve 以及 onFulfilled 有返回值时
promise1
  .then(value => {
    return value;
  })
  .then(value => {
    console.log(value);
  });

下面还有一个比较重要的状况，它关系到业务场景中传值问题：

1. onFulfilled 或者 onRejected 返回 一个 JavaScript 合法值 的状况

咱们先来假定 then 方法内部有一个叫作 [[Resolve]] 的方法用于处理这种特殊状况，下面来具体了解下这个方法。

[[Resolve]] 方法

通常像 [[...]] 这样的认为是内部实现，如 [[Resolve]]，该方法接受两个参数：

[[Resolve]](promise, x);

对于 x 值，有如下几种状况：

• x 有 then 方法 且看上去像一个 Promise
• x 为对象或函数
• x 为 Promise

另外 promise 不能与 x 相等即 promise !== x,不然：

下面来看张图，大体了解下各状况的应对方式：

Promise/A+ 小结

至此，Promise/A+ 须要 了解的就讲完了。主要包括了，术语以及 Then 方法的用法和相关注意事项。须要特别注意的是，then 方法中参数返回值的处理。接下来，咱们在规范的基础上，用 TypeScript 来 实现 Promise。

接下来，文中出现的规范特指 Promise/A+ 规范

Promise 实现

Promise 自己是一个构造函数，便可以实现为类。接下来，主要围绕实现一个 Promise 类来说。

先来看下一个标准 promise 对象具有的属性和 方法，作到心中有数。

Promise 提供的 API：

Promise 内部属性包括：

下面开始正式的实现部分

声明文件

在开始前，先来了解下，用 TypeScript 写 Promise 涉及的一些类型声明。能够看这个声明文件。

主要包括：

TypeScript 中声明文件用于外部模块，是 TypeScript 的核心部分。另外，从一个声明文件就能够大体了解所用模块暴露的 API 状况 (接受什么类型，或者会返回什么类型的数据)。这种事先设计好 API 是一个好的开发习惯，但实际开发中会比较难。

接着来看，Promise 类核心实现的开始部分，构造函数。

构造函数

规范提到 Promise 构造函数接受一个 Resolver 类型的函数做为第一个参数，该函数接受两个参数 resolve 和 reject，用于处理 promise 状态。

实现以下：

class Promise {
  // 内部属性
  private ['[[PromiseStatus]]']: PromiseStatus = 'pending';
  private ['[[PromiseValue]]']: any = undefined;

  subscribes: any[] = [];

  constructor(resolver: Resolver<R>) {
    this[PROMISE_ID] = id++;
    // resolver 必须为函数
    typeof resolver !== 'function' && resolverError();
    // 使用 Promise 构造函数，须要用 new 操做符
    this instanceof Promise ? this.init(resolver) : constructorError();
  }

  private init(resolver: Resolver<R>) {
    try {
      // 传入两个参数并获取用户传入的终值或拒因。
      resolver(
        value => {
          this.mockResolve(value);
        },
        reason => {
          this.mockReject(reason);
        }
      );
    } catch (e) {
      this.mockReject(e);
    }
    return null;
  }

  private mockResolve() {
    // TODO
  }
  private mockReject() {
    // TODO
  }
}

[[Resolve]] 实现

经过前面规范部分，咱们了解到 [[Resolve]] 属于内部实现，用于处理 then 参数的返回值。也就是这里即将要实现的名为 mockResolve 的方法。

根据规范内容能够得知，mockResolve 方法接受的 value 可能为 Promise，thenable，以及其余有效 JavaScript 值。

private mockResolve(value: any) {
  // 规范提到 resolve 不能传入当前返回的 promise
  // 即 `[[Resolve]](promise,x)` 中 promise ！== x
  if (value === this) {
    this.mockReject(resolveSelfError);
    return;
  }
  // 非对象和函数，直接处理
  if (!isObjectORFunction(value)) {
    this.fulfill(value);
    return;
  }
  // 处理一些像 promise 的对象或函数，即 thenable
  this.handleLikeThenable(value, this.getThen(value));
}

处理 Thenable 对象

重点看下 handleLikeThenable 实现，可结合前面规范部分说起 Thenable 的几种状况来分析：

private handleLikeThenable(value: any, then: any) {
    // 处理 "真实" promise 对象
    if (this.isThenable(value, then)) {
      this.handleOwnThenable(value);
      return;
    }
    // 获取 then 值失败且抛出异常，则以此异常为拒因 reject promise
    if (then === TRY_CATCH_ERROR) {
      this.mockReject(TRY_CATCH_ERROR.error);
      TRY_CATCH_ERROR.error = null;
      return;
    }
    // 若是 then 是函数，则检验 then 方法的合法性
    if (isFunction(then)) {
      this.handleForeignThenable(value, then);
      return;
    }
    // 非 Thenable ，则将该终植直接交由 fulfill 处理
    this.fulfill(value);
  }

处理 Thenable 中 Then 为函数的状况

规范说起：

若是 then 是函数，将 x 做为函数的做用域 this 调用之。传递两个回调函数做为参数，第一个参数叫作 resolvePromise ，第二个参数叫作 rejectPromise。

此时，handleForeignThenable 就是用来检验 then 方法的。

实现以下：

private tryThen(then, thenable, resolvePromise, rejectPromise) {
    try {
      then.call(thenable, resolvePromise, rejectPromise);
    } catch (e) {
      return e;
    }
  }
  private handleForeignThenable(thenable: any, then: any) {
    this.asap(() => {
      // 若是 resolvePromise 和 rejectPromise 均被调用，
      // 或者被同一参数调用了屡次，则优先采用首次调用并忽略剩下的调用
      // 此处 sealed (稳定否)，用于处理上诉逻辑
      let sealed = false;
      const error = this.tryThen(
        then,
        thenable,
        value => {
          if (sealed) {
            return;
          }
          sealed = true;
          if (thenable !== value) {
            this.mockResolve(value);
          } else {
            this.fulfill(value);
          }
        },
        reason => {
          if (sealed) {
            return;
          }
          sealed = true;
          this.mockReject(reason);
        }
      );

      if (!sealed && error) {
        sealed = true;
        this.mockReject(error);
      }
    });
  }

fulfill 实现

来看 [[Resolve]] 中最后一步，fulfill 实现：

private fulfill(value: any) {
    this['[[PromiseStatus]]'] = 'fulfilled';
    this['[[PromiseValue]]'] = value;

    // 用于处理异步状况
    if (this.subscribes.length !== 0) {
      this.asap(this.publish);
    }
  }

看到这里，你们可能有关注到不少方法都带有 private 修饰符，在 TypeScript 中

private 修饰的属性或方法是私有的，不能在声明它的类的外部访问

规范提到过，PromiseStatus 属性不能由外部更改，也就是 promise 状态只能改变一次，并且只能从内部改变，也就是这里私有方法 fulfill 的职责所在。

[[Resolve]] 小结

至此，一个内部 [[Resolve]] 就实现了。咱们回顾一下，[[Resolve]] 用于处理如下状况

// 实例化构造函数，传入 resolve 的状况
const promise = Promise(resolve => {
  const value: any;
  resolve(value);
});

以及

// then 方法中有 返回值的状况
promise.then(
  () => {
    const value: any;
    return value;
  },
  () => {
    const reason: any;
    return reason;
  }
);

对于终值 value 有多种状况，在处理 Thenable 的时候，请参考规范来实现。promise 除了 resolve 的还有 reject，但这部份内容比较简单，咱们会放到后面再讲解。先来看与 resolve 密不可分的 then 方法实现。这也是 promise 的核心方法。

Then 方法实现

经过前面的实现，咱们已经能够从 Promise 构造函数来改变内部 [[PromiseStatus]] 状态以及内部 [[PromiseValue]] 值，而且对于多种 value 值咱们都有作相应的兼容处理。接下来，是时候把这些值交由 then 方法中的第一个参数 onFulfilled 处理了。

在讲解以前先来看下这种状况：

promise2 = promise1.then(onFulfilled, onRejected);

使用 promise1 的 then 方法后，会返回一个 promise 对象 promise2 实现以下：

class Promise {
  then(onFulfilled?, onRejected?) {
    // 对应上述的 promise1
    const parent: any = this;
    // 对应上述的 promise2
    const child = new parent.constructor(() => {});

    // 根据 promise 的状态选择处理方式
    const state = PROMISE_STATUS[this['[[PromiseStatus]]']];
    if (state) {
      // promise 各状态对应枚举值 'pending' 对应 0 ，'fulfilled' 对应 1，'rejected' 对应 2
      const callback = arguments[state - 1];
      this.asap(() =>
        this.invokeCallback(
          this['[[PromiseStatus]]'],
          child,
          callback,
          this['[[PromiseValue]]']
        )
      );
    } else {
      // 调用 then 方法的 promise 处于 pending 状态的处理逻辑，通常为异步状况。
      this.subscribe(parent, child, onFulfilled, onRejected);
    }

    // 返回一个 promise 对象
    return child;
  }
}

这里比较惹眼的 asap 后续会单独讲。先来理顺一下逻辑，then 方法接受两个参数，由当前 promise 的状态决定调用 onFulfilled 仍是 onRejected。

如今你们确定很关心 then 方法里的代码是如何被执行的，好比下面的 console.log：

promise.then(value => {
  console.log(value);
});

接下来看与之相关的 invokeCallback 方法

then 方法中回调处理

then 方法中的 onFulfilled 和 onRejected 都是可选参数，开始进一步讲解前，建议你们先了解规范中说起的两个参数的特性。

如今来说解 invokeCallback 接受的参数及其含义：

• settled (稳定状态)，promise 处于非 pending 状态则称之为 settled，settled 的值能够为 fulfilled 或 rejected
• child 即将返回的 promise 对象
• callback 根据 settled 选择的 onFulfilled 或 onRejected 回调函数
• detail 当前调用 then 方法 promise 的 value(终值) 或 reason(拒因)

注意这里的 settled 和 detail，settled 用于指 fulfilled 或 rejected， detail 用于指 value 或 reason 这都是有含义的

知道这些以后，就只须要参考规范建议实现的方式进行处理相应：

private invokeCallback(settled, child, callback, detail) {
    // 一、是否有 callback 的对应逻辑处理
    // 二、回调函数执行后是否会抛出异常，即相应处理
    // 三、返回值不能为本身的逻辑处理
    // 四、promise 结束(执行结束或被拒绝)前不能执行回调的逻辑处理
    // ...
  }

须要处理的逻辑已给出，剩下的实现方式读者可自行实现或看本项目源码实现。建议全部实现都应参考规范来落实，在实现过程当中可能会出现遗漏或错误处理的状况。(ps：考验一个依赖健壮性的时候到了)

截至目前，都是处理同步的状况。promise 号称处理异步的大神，怎么能少得了相应实现。处理异步的方式有回调和订阅发布模式，咱们实现 promise 就是为了解决回调地狱的，因此这里固然选择使用 订阅发布模式。

then 异步处理

这里要处理的状况是指：当调用 then 方法的 promise 处于 pending 状态时。

那何时会出现这种状况呢？来看下这段代码：

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

promise.then(value => {
  console.log(value);
});

代码编写到这里，若是出现这种状况。咱们的 promise 实际上是不能正常工做的。因为 setTimeout 是一个异常操做，当内部 then 方法按同步执行的时候，resolve 根本没执行，也就是说调用 then 方法的 promise 的 [[PromiseStatus]] 目前还处于 'pending'，[[PromiseValue]] 目前为 undefined，此时添加对 pending 状态下的回调是没有任何意义的 ，另外规范说起 then 方法的回调必须处于 settled( 以前有讲过 ) 才会调用相应回调。

或者咱们不用考虑是否是异步形成的，只须要明确一件事。存在这么一种状况，调用 then 方法的 promise 状态可能为pending。

这时就必须有一套机制来处理这种状况，对应代码实现就是：

private subscribe(parent, child, onFulfillment, onRejection) {
    let {
      subscribes,
      subscribes: { length }
    } = parent;
    subscribes[length] = child;
    subscribes[length + PROMISE_STATUS.fulfilled] = onFulfillment;
    subscribes[length + PROMISE_STATUS.rejected] = onRejection;
    if (length === 0 && PROMISE_STATUS[parent['[[PromiseStatus]]']]) {
      this.asap(this.publish);
    }
  }

subscribe 接受 4 个参数 parent，child,onFulfillment,onRejection

• parent 为当前调用 then 方法的 promise 对象
• child 为即将由 then 方法返回的 promise 对象
• onFulfillment then 方法的第一个参数
• onFulfillment then 方法的第二个参数

用一个数组来存储 subscribe ，主要保存即将返回的 promise 对象及相应的 onFulfillment 和 onRejection 回调函数。

知足 subscribe 是新增的状况及调用 then 方法的 promise 对象的 [[PromiseStatus]] 值不为 'pending'，则调用 publish 方法。也就是说异步的状况下，不会调用该 publish 方法。
这么看来这个 publish 是跟执行回调相关的方法。

那异步的状况，何时会触发回调呢?能够回顾以前讲解过的 fulfill 方法:

private fulfill(value: any) {
    this['[[PromiseStatus]]'] = 'fulfilled';
    this['[[PromiseValue]]'] = value;

    // 用于处理异步状况
    if (this.subscribes.length !== 0) {
      this.asap(this.publish);
    }
  }

当知足 this.subscribes.length !== 0 时会触发 publish。也就是说当异步函数执行完成后调用 resolve 方法时会有这么一个是否调用 subscribes 里面的回调函数的判断。

这样就保证了 then 方法里回调函数只会在异步函数执行完成后触发。接着来看下与之相关的 publish 方法

publish 方法

首先明确，publish 是发布，是经过 invokeCallback 来调用回调函数的。在本项目中，只与 subscribes 有关。直接来看下代码：

private publish() {
    const subscribes = this.subscribes;
    const state = this['[[PromiseStatus]]'];
    const settled = PROMISE_STATUS[state];
    const result = this['[[PromiseValue]]'];
    if (subscribes.length === 0) {
      return;
    }
    for (let i = 0; i < subscribes.length; i += 3) {
      // 即将返回的 promise 对象
      const item = subscribes[i];
      const callback = subscribes[i + settled];
      if (item) {
        this.invokeCallback(state, item, callback, result);
      } else {
        callback(result);
      }
    }
    this.subscribes.length = 0;
  }

then 方法小结

到这咱们就实现了 promise 中的 then 方法，也就意味着目前实现的 promise 已经具有处理异步数据流的能力了。then 方法的实现离不开规范的指引，只要参考规范对 then 方法的描述，其他就只是逻辑处理了。

至此 promise 的核心功能已经讲完了，也就是内部 [[Resolve]] 和 then 方法。接下来快速看下其他 API。

语法糖 API 实现

catch 和 finally 都属于语法糖

• catch 属于 this.then(null, onRejection)
• finally 属于 this.then(callback, callback);

promise 还提供了 resolve，reject，all，race 的静态方法，为了方便链式调用，上述方法均会返回一个新的 promise 对象用于链式调用。

以前主要讲 resolve，如今来看下

reject

reject 处理方式跟 resolve 略微不一样的是它不用处理 thenable 的状况，规则说起 reject 的值 reason 建议为 error 实例代码实现以下：

private mockReject(reason: any) {
    this['[[PromiseStatus]]'] = 'rejected';
    this['[[PromiseValue]]'] = reason;
    this.asap(this.publish);
  }
  static reject(reason: any) {
    let Constructor = this;
    let promise = new Constructor(() => {});
    promise.mockReject(reason);
    return promise;
  }
  private mockReject(reason: any) {
    this['[[PromiseStatus]]'] = 'rejected';
    this['[[PromiseValue]]'] = reason;
    this.asap(this.publish);
  }

all & race

在前面 API 的基础上，扩展出 all 和 race 并不难。先来看二者的做用：

• all 用于处理一组 promise，当知足全部 promise 都 resolve 或 某个 promise reject 时返回对应由 value 组成的数组或 reject 的 reason
• race 赛跑的意思，也就是在一组 promise 中看谁执行的快，则用这个 promise 的结果

对应实现代码：

// all
let result = [];
let num = 0;
return new this((resolve, reject) => {
  entries.forEach(item => {
    this.resolve(item).then(data => {
      result.push(data);
      num++;
      if (num === entries.length) {
        resolve(result);
      }
    }, reject);
  });
});

// race
return new this((resolve, reject) => {
  let length = entries.length;
  for (let i = 0; i < length; i++) {
    this.resolve(entries[i]).then(resolve, reject);
  }
});

时序组合

若是有须要按顺序执行的异步函数，能够采用以下方式：

[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());

在 ES7 中时序组合能够经过使用 async/await 实现

for (let f of [func1, func2]) {
  await f();
}

更多使用方式可参考 这篇

知识补充

Promise 的出现是为了更好地处理异步数据流，或者常说的回调地狱。这里说的回调，是在异步的状况下，若是非异步，则通常不须要用到回调函数。下面来了解下在实现 Promise 过程当中出现的几个概念：

• 回调函数
• 异步 & 同步
• EventLoop
• asap

回调函数

回调函数的英文定义：

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed。

字面上的理解，回调函数就是一个参数，将这个函数做为参数传到另外一个函数里面，当那个函数执行完以后，再执行传进去的这个函数。这个过程就叫作回调。

在 JavaScript 中，回调函数具体的定义为： 函数 A 做为参数(函数引用)传递到另外一个函数 B 中，而且这个函数 B 执行函数 A。咱们就说函数 A 叫作回调函数。若是没有名称(函数表达式)，就叫作匿名回调函数。

首先须要声明，回调函数只是一种实现，并非异步模式特有的实现。回调函数一样能够运用到同步（阻塞）的场景下以及其余一些场景。

回调函数须要和异步函数区分开来。

异步函数 & 同步函数

• 若是在函数返回的时候，调用者就可以获得预期结果，这个就是同步函数。
• 若是在函数返回的时候，调用者还不可以获得预期结果，而是须要在未来经过必定的手段获得，那么这个函数就是异步的。

那什么是异步，同步呢?

异步 & 同步

首先要明确，Javascript 语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。若是有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

这种模式会形成一个阻塞问题，为了解决这个问题，Javascript 语言将任务的执行模式分红两种：同步（Synchronous）和异步（Asynchronous）。

但须要注意的是：异步机制是浏览器的两个或以上常驻线程共同完成的，Javascript 的单线程和异步更多的应该是属于浏览器的行为。也就是说 Javascript 自己是单线程的，并无异步的特性。

因为 Javascript 的运用场景是浏览器，浏览器自己是典型的 GUI 工做线程，GUI 工做线程在绝大多数系统中都实现为事件处理，避免阻塞交互，所以产生了 Javascript 异步基因。全部涉及到异步的方法和函数都是由浏览器的另外一个线程去执行的。

浏览器中的线程

• 浏览器事件触发线程 当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待 JavaScript 引擎的处理。这些事件能够是当前执行的代码块如：定时任务、也可来自浏览器内核的其余线程如鼠标点击、AJAX 异步请求等，但因为 JavaScript 是单线程，全部这些事件都得排队等待 JavaScript 引擎处理；
• 定时触发器线程 浏览器定时计数器并非由 JavaScript 引擎计数的, 由于 JavaScript 引擎是单线程的, 若是处于阻塞线程状态就会影响记计时的准确, 所以经过单独线程来计时并触发定时是更为合理的方案；
• 异步 HTTP 请求线程 XMLHttpRequest 在链接后是经过浏览器新开一个线程请求，将检测到状态变动时，若是设置有回调函数，异步线程就产生状态变动事件放到 JavaScript 引擎的处理队列中 等待处理；

经过以上了解，能够知道其实 JavaScript 是经过 JS 引擎线程与浏览器中其余线程交互协做实现异步。

可是回调函数具体什么时候加入到 JS 引擎线程中执行？执行顺序是怎么样的？

接下来了解一下，与之相关的 EventLoop 机制

EventLoop

先来看一些概念，Stack，Heap，Queue，直接上图：

• 那些不须要回调函数的操做均可归为 Stack 这一类
• Heap 用来存储声明的变量、对象
• 一旦某个异步任务有了响应就会被推入 Queue 队列中

一个大体的流程以下：

JS 引擎线程用来执行栈中的同步任务，当全部同步任务执行完毕后，栈被清空，而后读取消息队列中的一个待处理任务，并把相关回调函数压入栈中，单线程开始执行新的同步任务。

JS 引擎线程从消息队列中读取任务是不断循环的，每次栈被清空后，都会在消息队列中读取新的任务，若是没有新的任务，就会等待，直到有新的任务，这就叫事件循环。

这张图不知道谁画的，真的是很是棒!先借来描述下 AJAX 大概的流程：

AJAX 请求属于很是耗时的异步操做，浏览器有提供专门的线程来处理它。当主线程上有调用 AJAX 的代码时，会触发异步任务。执行这个异步任务的工做交由 AJAX 线程，主线程并无等待这个异步操做的结果而是接着执行。假设主线程代码在某个时刻执行完毕，也就是此时的 Stack 为空。而在早些时刻，异步任务执行完成后已经将消息存放在 Queue 中，以便 Stack 为空时从中拿去一个回调函数来执行。

这背后运做的就叫 EventLoop，有了上面的大体了解。下面来从新了解下 EventLoop：

异步背后的“靠山”就是 event loops。这里的异步准确的说应该叫浏览器的 event loops 或者说是 javaScript 运行环境的 event loops，由于 ECMAScript 中没有 event loops，event loops 是在 HTML Standard 定义的。

event loop 翻译出来就是事件循环，能够理解为实现异步的一种方式，咱们来看看 event loop 在 HTML Standard 中的定义章节：

为了协调事件，用户交互，脚本，渲染，网络等，用户代理必须使用本节所述的 event loop。

事件，用户交互，脚本，渲染，网络这些都是咱们所熟悉的东西，他们都是由 event loop 协调的。触发一个 click 事件，进行一次 ajax 请求，背后都有 event loop 在运做。

task

一个 event loop 有一个或者多个 task 队列。每个 task 都来源于指定的任务源，好比能够为鼠标、键盘事件提供一个 task 队列，其余事件又是一个单独的队列。能够为鼠标、键盘事件分配更多的时间，保证交互的流畅。

task 也被称为macrotask，task 队列仍是比较好理解的，就是一个先进先出的队列，由指定的任务源去提供任务。

task 任务源:

• setTimeout
• setInterval
• setImmediate
• I/O
• UI rendering

microtask

每个 event loop 都有一个 microtask 队列，一个 microtask 会被排进 microtask 队列而不是 task 队列。microtask 队列和 task 队列有些类似，都是先进先出的队列，由指定的任务源去提供任务，不一样的是一个 event loop 里只有一个 microtask 队列。

一般认为是 microtask 任务源有：

• process.nextTick
• promises
• Object.observe
• MutationObserver

一道关于 EventLoop 的面试题

console.log('start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve()
  .then(function() {
    console.log('promise1');
  })
  .then(function() {
    console.log('promise2');
  });

console.log('end');

// start
// end
// promise1
// promise2
// setTimeout

上面的顺序是在 chrome 运行得出的，有趣的是在 safari 9.1.2 中测试，promise1 promise2 会在 setTimeout 的后边，而在 safari 10.0.1 中获得了和 chrome 同样的结果。promise 在不一样浏览器的差别正源于有的浏览器将 then 放入了 macro-task 队列，有的放入了 micro-task 队列。

EventLoop 小结

event loop 涉及到的东西不少，但本文怕重点偏离，这里只是说起可能与 promise 相关的知识点。若是想深刻了解的同窗，建议看完这篇一定会受益不浅。

什么是 asap

as soon as possible 英文的缩写，在 promise 中起到的做用是尽快响应变化。

在 Promises/A+规范 的 Notes 3.1 中说起了 promise 的 then 方法能够采用“宏任务（macro-task）”机制或者“微任务（micro-task）”机制来实现。

本项目，采用 macro-task 机制

private asap(callback) {
    setTimeout(() => {
      callback.call(this);
    }, 1);
  }

或者 MutationObserver 模式：

function flush() {
...
}
function useMutationObserver() {
  var iterations = 0;
  var observer = new MutationObserver(flush);
  var node = document.createTextNode('');
  observer.observe(node, { characterData: true });

  return function () {
    node.data = iterations = ++iterations % 2;
  };
}

初次看这个 useMutationObserver 函数总会颇有疑惑，MutationObserver 不是用来观察 dom 的变化的吗，这样凭空造出一个节点来反复修改它的内容，来触发观察的回调函数有何意义？

答案就是使用 Mutation 事件能够异步执行操做（例子中的 flush 函数），一是能够尽快响应变化，二是能够去除重复的计算。

或者 node 环境下：

function useNextTick() {
  return () => process.nextTick(flush);
}

前端安全感

既然标题提到了 前端安全感，固然要说点什么。现现在前端处于模块化开发的鼎盛时期，面对 npm 那成千上万的 "名牌包包" 不少像我这样的小白不免会迷失自我，渐渐没有了安全感。

是作拿来主义，仍是像笔者同样偶尔研究下底层原理，看看别人的代码，本身撸一遍来感悟其中的真谛来提高安全感。

作前端也有段时日了，被业务埋没的那些年，真是感叹!回想曾经差点去作设计的我终于要入门前端了，心中不免想去搓一顿，那就写到这吧!

结语

写的有点多，好累。但愿对你们有所帮助。

源码

参考

Promises/A+
MDN Promises
Promise 使用
Event loop