promise polyfill解析

https://github.com/taylorhakes/promise-polyfill

Promise构造器

function Promise(fn) {if (!(this instanceof Promise))throw new TypeError('Promises must be constructed via new');if (typeof fn !== 'function') throw new TypeError('not a function');/*** 0: pending* 1: resolve* 2: reject* 3: res(p)中p为promise类型*/this._state = 0;/** 是否处理完成 */this._handled = false;/** 当前promise的value值 */this._value = undefined;/** 保存obj,obj包含3个参数：* 当前promise的onFulfilled和onRejected回调方法* 当前promise的完成后要执行的promise*/this._deferreds = [];
doResolve(fn, this);
}

doResolve

执行Promise构造时的参数。且如果执行出错，则直接reject

new Promise((res, rej) => {setTimeout(() => {res();}, 0)
});

function doResolve(fn, self) {var done = false;try {fn(// 上面代码中res()时执行function(value) {if (done) return;done = true;resolve(self, value);},// 上面代码中rej()时执行function(reason) {if (done) return;done = true;reject(self, reason);});} catch (ex) {if (done) return;done = true;reject(self, ex);}
}

可以看到是同步执行的，所以下面代码依次输出1，2，3

new Promise(() => {console.log(1);
});
console.log(2);
setTimeout(() => {console.log(3);
}, 0);

then

Promise.prototype.then = function(onFulfilled, onRejected) {var prom = new this.constructor(noop);// handler存储调用then的promise及then的参数var handler = new Handler(onFulfilled, onRejected, prom);handle(this, handler);// 返回prom,即下一个then的this对象return prom;
};


function Handler(onFulfilled, onRejected, promise) {this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;this.onRejected = typeof onRejected === 'function' ? onRejected : null;this.promise = promise;
}

handle

根据当前promise的状态处理：

当前promise的值是promise，则取最内层的promise值为作为当前promise

当前promise为pending状态，将其调用then时then的参数及自身存到自己的_deferreds上，所以then return prom会在then的调用链上形成promise内有_deferreds，_deferreds内有promise的循环

当前promise为resolve（1）或reject（2）状态，取对应的回调执行

function handle(self, deferred) {while (self._state === 3) {self = self._value;}// 将then的参数存放在then的调用者的_deferreds中if (self._state === 0) {self._deferreds.push(deferred);return;}self._handled = true;// resolve后当前promise的状态为1，reject后为2，且要在下个事件循环中完成回调Promise._immediateFn(function() {var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;if (cb === null) {(self._state === 1 ? resolve : reject)(deferred.promise, self._value);return;}var ret;try {ret = cb(self._value);} catch (e) {reject(deferred.promise, e);return;}// deferred.promise：取deferred上的promise，及下一个then的调用者resolve(deferred.promise, ret);});
}

resolve

关键代码：

将当前promise的状态改为1（resolve），执行final，

self._state = 1;
self._value = newValue;
finale(self);

function finale(self) {if (self._state === 2 && self._deferreds.length === 0) {Promise._immediateFn(function() {if (!self._handled) {Promise._unhandledRejectionFn(self._value);}});}// 取当前promise的_deferreds，处理当前promise的状态for (var i = 0, len = self._deferreds.length; i < len; i++) {handle(self, self._deferreds[i]);}self._deferreds = null;
}

Promise的就是根据状态进行处理的过程，最关键的是then方法的返回参数并不是this，因为每个then或catch的状态需要分开处理

new Promise((res) => { res(); })  // p1
.then(f1)  // p2
.then(f2)  // p3

将上面代码中调用每行then的promise实例分别标记为p1,p2,p3，当然p1自己就是promise

p2对应的line执行时，调用者是p1，在p1实例的_deferreds中存储f1和p2的实例，且返回p2

p3对应的line执行时，调用者是p2，所以在p2实例的_deferreds中存储f2和p3的实例，且返回p3

这样保证每个then或catch的状态不会收其他promise的影响