首先先看一下 promise 的调用方式：

// 实例化 Promise：

  new MyPromise((resolve, reject) => {

    setTimeout(() => {

      resolve(1)  //这里相当于给value赋值

    }, 0)

  }).then(value => {

    console.log(value)

  })

实现原理如下：

const PENDING = 'pending' //首先我们创建了三个常量用于表示状态，对于经常使用的一些值都应该通过常量来管理，便于开发及后期维护 const RESOLVED = 'resolved' const REJECTED = 'rejected' function MyPromise(fn) { const that = this //在函数体内部首先创建了常量 `that`，因为代码可能会异步执行，用于获取正确的 `this` 对象 that.state = PENDING //一开始 `Promise` 的状态应该是 `pending` that.value = null //`value` 变量用于保存 `resolve` 或者 `reject` 中传入的值 that.resolvedCallbacks = [] that.rejectedCallbacks = [] /* `resolvedCallbacks` 和 `rejectedCallbacks` 用于保存 `then` 中的回调， 因为当执行完 `Promise` 时状态可能还是等待中，这时候应该把 `then` 中的回调保存起来用于状态改变时使用 */ function resolve(value) { if (that.state === PENDING) { that.state = RESOLVED that.value = value that.resolvedCallbacks.map(cb => cb(that.value))//map这里是执行回调函数  } } function reject(value) { if (that.state === PENDING) { that.state = REJECTED that.value = value that.rejectedCallbacks.map(cb => cb(that.value))//map这里是执行回调函数  } } /* * 首先两个函数都得判断当前状态是否为等待中，因为规范规定只有等待态才可以改变状态 * 将当前状态更改为对应状态，并且将传入的值赋值给 `value` * 遍历回调数组并执行 */ try { fn(resolve, reject) } catch (e) { reject(e) } } MyPromise.prototype.then = function(onFulfilled, onRejected) { const that = this //首先判断两个参数是否为函数类型，因为这两个参数是可选参数 //当参数不是函数类型时，需要创建一个函数赋值给对应的参数，同时也实现了透传 onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (v) => { return v } onRejected = typeof onRejected === 'function' ? onRejected : r => { throw r } //接下来就是一系列判断状态的逻辑，当状态不是等待态时，就去执行相对应的函数。 //如果状态是等待态的话，就往回调函数中 `push` 函数，比如如下代码就会进入等待态的逻辑 if (that.state === PENDING) { that.resolvedCallbacks.push(onFulfilled)//push这里是保存回调函数  that.rejectedCallbacks.push(onRejected) } if (that.state === RESOLVED) { onFulfilled(that.value) } if (that.state === REJECTED) { onRejected(that.value) } }

详细解释如下：

定义异步函数 MyPromise，所以执行的函数也是 MyPromise：

首先看 函数执行的方法：

new MyPromise((resolve, reject) => { setTimeout(() => { resolve(1) }, 0) })

函数的参数是：

(resolve, reject) => { setTimeout(() => { resolve(1) }, 0) }

对应着

function MyPromise(fn){ try { fn(resolve, reject) // 在这里执行了传入的参数fn(),并且把规定的   resolve, reject 两个参数传递到 fn 中。 } catch (e) { reject(e) } }

中的 fn，所以会执行这个传入的函数 fn(resolve, reject)；

传入的参数是异步的，会在同步代码结束后再去执行对应的 resolve(1)这个函数，

而这个函数已经在 MyPromise 中进行了定义：

function resolve(value) { if (that.state === PENDING) { that.state = RESOLVED that.value = value that.resolvedCallbacks.map(cb => cb(that.value))//map这里是执行回调函数  } }

// 也就是会在同步代码之后再执行上面的函数，所以我们继续看 MyPromise 的调用

new MyPromise((resolve, reject) => { //异步代码 }).then(value => { console.log(value) })

接着执行方法： then()。而then 挂在了原型链上：

MyPromise.prototype.then = function(onFulfilled, onRejected) { }

所以then包含两个参数，分别对对应 onFulfilled, onRejected。 如果没有定义需要做容错处理，

也就是给默认的函数参数：
onFulfilled = typeof onFulfilled === ‘function’ ? onFulfilled : (v) => { return v }

由于执行同步操作，此时state 还等于PENDING，所以执行：

if (that.state === PENDING) { that.resolvedCallbacks.push(onFulfilled)//push这里是保存回调函数  that.rejectedCallbacks.push(onRejected) }

也就是把 成功后操作函数和失败函数分别保存到对应的数组中。

setTimeout(() => { resolve(1) }, 0)

好了，接下来同步执行结束，然后开始执行异步操作：

function resolve(value) { if (that.state === PENDING) { that.state = RESOLVED that.value = value that.resolvedCallbacks.map(cb => cb(that.value))//map这里是执行回调函数  } }

可以看到，先改变状态，再从保存数组中，获取到回调函数，再执行！

至此，在promise中 resolve(1) 告诉了执行回调的时机和参数。

而then规定的是异步之后的回调函数。

然后我们看到还在then函数中规定了其他的状态，解释一下：

如果执行函数中，没有异步处理：

new MyPromise((resolve, reject) => { resolve(1) }).then(value => { console.log(value) })

也就是在定义中：

try { fn(resolve, reject) } catch (e) { reject(e) }

直接执行了 fn()，根据传入的 resolve，reject。这里直接执行了 resolve：

function resolve(value) { if (that.state === PENDING) { that.state = RESOLVED that.value = value that.resolvedCallbacks.map(cb => cb(that.value))//map这里是执行回调函数  } }

更改了状态，由于还没有执行then函数，保存函数没有数据，所以没有可以执行的回调函数。

接下来程序走到了then

new MyPromise((resolve, reject) => { //同步代码 }).then(value => { console.log(value) })

由于状态已经改变，所以执行：

MyPromise.prototype.then = function(onFulfilled, onRejected) { if (that.state === RESOLVED) { onFulfilled(that.value) } }

同样也做到了执行then传入的函数。

总结一下，如果 resolve 被放在了异步函数中，then传入的回调函数会先被保存下来，待异步函数执行完毕之后，

在次执行回调函数；

而如若 resolve 被放在了同步函数中，则回调函数数组为空，顺序执行到 then 函数，则会执行该回调函数。