JS 魔法堂：剖析源码理解 Promises/A 规范

var Promise = exports.Promise = function (fn) {
    if (typeof this !== "object") throw new TypeError("Promises must be constructed via new");
    if (typeof fn !== "function") throw new TypeError("not a function");
    var state = null; // 状态，null：pending，true：fulfilled，false：rejected
    var value = null; // 当前promise的状态事件处理函数（onFulfilled或onRejected）的入参
    var deferreds = []; // 当前promise的状态事件处理函数和promise链表中下一个promise的状态转换发起函数
    var self = this;
    // 唯一的公开方法
    this.then = function(onFulfilled, onRejected) {
	return new self.constructor(function(resolve, reject) {
	    handle(new Handler(onFulfilled, onRejected, resolve, reject));
	});
    };
    // 保存和执行deferreds数组中的元素
    function handle(deferred) {
	if (state === null) {
	    deferreds.push(deferred);
	    return;
	}
	// asap的作用为将入参的操作压入event loop队列中
	asap(function() {
	    var cb = state ? deferred.onFulfilled : deferred.onRejected;
	    if (cb === null) {
		(state ? deferred.resolve : deferred.reject)(value);
		return;
	    }
	    var ret;
	    try {
		// 执行当前promise的状态转换事件处理函数
		ret = cb(value);
	    } catch (e) {
		// 修改promise链表中下一个promise对象的状态为rejected
		deferred.reject(e);
		return;
	    }
	    // 修改promise链表中下一个promise对象的状态为fulfilled
	    deferred.resolve(ret);
	});
    }
    // promise的状态转换发起函数，触发promise的状态从pending->fulfilled
    function resolve(newValue) {
	try {
	    if (newValue === self) throw new TypeError("A promise cannot be resolved with itself.");
	    if (newValue && (typeof newValue === "object" || typeof newValue === "function")) {
		var then = newValue.then;
		if (typeof then === "function") {
		    // 将控制权移交thenable和promise对象，由它们来设置当前pormise的状态和状态转换事件处理函数的实参
		    doResolve(then.bind(newValue), resolve, reject);
		    return;
		}
	    }
	    state = true;
	    value = newValue;
	    finale();
	} catch (e) {
	    reject(e);
	}
    }
    // promise的状态转换发起函数，触发promise的状态从pending->rejected
    function reject(newValue) {
	state = false;
	value = newValue;
	finale();
    }
    // 向链表的下一个promise移动
    function finale() {
	for (var i = 0, len = deferreds.length; i < len; i++) handle(deferreds[i]);
	deferreds = null;
    }
    // 执行构造函数的工厂方法，由工厂方法触发promise的状态转换
    doResolve(fn, resolve, reject);
}

我们可以通过 new Promise(function(resolve, reject){ resolve('hello'); }); 来跟踪一下执行过程，发现重点在 doResolve(fn, resolve, reject) 方法调用中，该方法定义如下：

// 对状态转换事件处理函数进行封装后，再传给执行函数
function doResolve(fn, onFulfilled, onRejected) {
    // done作为开关以防止fn内同时调用resolve和reject方法
    var done = false;
    try {
	fn(function(value) {
	    if (done) return;
	    done = true;
	    onFulfilled(value);
	}, function(reason) {
	    if (done) return;
	    done = true;
	    onRejected(reason);
	});
    } catch (ex) {
	if (done) return;
	done = true;
	onRejected(ex);
    }
}

doResovle 仅仅是对 resolve 和 reject 方法进行封装以防止同时被调用的情况而已，这时控制权到达 resolve方法 。由于 resovle 的入参为字符串类型，因此直接修改当前 promise 的状态和保存状态转换事件处理函数的实参即可（若 resolve 的入参为 thenable 对象或 Promise 对象，则将控制权交给该对象，由该对象来设置当前 promise 的状态和状态转换事件处理函数的实参），然后将控制权移交 finale方法 。finale 方法内部会遍历 deffereds 数组并根据状态调用对应的处理函数和修改 promise 链表中下一个 promise 对象的状态。

那么 deffereds 数组具体是什么呢？其实它就跟我之前猜想的 thenables 数组功能一致，用于保存状态转换事件处理函数和维护 promise 单向链表（不直接存放下一个 promise 对象的指针，而是存放下一个 promise 的 resovle 和 reject 方法）的。具体数据结构如下：

// 构造promise的链表逻辑结构
function Handler(onFulfilled, onRejected, resolve, reject) {
  this.onFulfilled = typeof onFulfilled === "function" ? onFulfilled : null; // 当前promise的状态转换事件处理函数
  this.onRejected = typeof onRejected === "function" ? onRejected : null; // 当前promise的状态转换事件处理函数
  this.resolve = resolve; // 设置链表中下一个promise的状态为fulfilled
  this.reject = reject; // 设置链表中下一个promise的状态为rejected
}

若当前 promise 有 deffered 实例，那么则会执行 handle 函数中 asap 函数的函数入参

function() {
    var cb = state ? deferred.onFulfilled : deferred.onRejected;
    if (cb === null) {
	(state ? deferred.resolve : deferred.reject)(value);
	return;
    }
    var ret;
    try {
	// 执行当前promise的状态转换事件处理函数
	ret = cb(value);
    } catch (e) {
	// 修改promise链表中下一个promise对象的状态为rejected
	deferred.reject(e);
	return;
    }
    // 修改promise链表中下一个promise对象的状态为fulfilled
    deferred.resolve(ret);
}

我觉得原实现方式不够直白，于是改成这样：

function(){
    var cb = deferred[state ? 'onFulfilled' : 'onRejected'];
    var deferredAction = 'resolve', ret;
    try{
	ret = cb ? cb(value) : value;
    }
    catch (e){
	ret = e;
	deferredAction = 'reject';
    }
    deferred[deferredAction].call(deferred, ret);
}

文字太多了，还是看图更清楚哦！

接下来的问题就是 deffereds 数组的元素是从何而来呢？那就要看看 then 函数了。

then 函数代码结构上很简单，但设计上却很精妙。

this.then = function(onFulfilled, onRejected){
  return new self.constructor(function(resolve, reject) {
     handle(new Handler(onFulfilled, onRejected, resolve, reject));
  });
}

为了好看些，我修改了一下格式：

this.then = function(onFulfilled, onRejected) {
    // 构造新的promise实例并返回，从而形成链式操作
    return new Promise(function(resolve, reject) {
	var handler = new Handler(onFulfilled, onRejected, resolve, reject);
	/*
	  注意：这里利用了闭包特性，此处的handle并不是新Promise的handle函数，而是this.then所属promise的handle函数。
	  因此handler将被添加到this.then所属promise的deffereds数组中。
	  而onFulfilled和onRejected自然成为了this.then所属promise的状态转换事件处理函数，
	  而resolve和reject依旧是新promise实例的状态转换触发函数。
	*/
	handle(handler);
    });
};

源码读后感：

通过闭包特性来让链表后一个对象调用前一个对象的方法和变量，从而实现私有成员方法和属性实在是过瘾。比起我猜想的实现方式通过下划线(_)提示 API 调用者该属性下的均为私有成员的做法封装性更完整。

作用：将非Promise对象转换为Promise对象，而非Promise对象则被细分为两种：thenable对象和非thenable对象。

thenable 对象的 then 将作为 Promise 构造函数的工厂方法被调用

非 thenable 对象（Number、DOMString、Boolean、null、undefined 等）将作为 pending->fulfilled 的事件处理函数的入参。

由于源码中加入性能优化的代码，因此我提出核心逻辑以便分析：

// 将非thenable对象构造为thenable对象
// 其then方法则返回一个真正的Promise对象
function ValuePromise(value) {
    this.then = function(onFulfilled) {
	if (typeof onFulfilled !== "function") return this;
	return new Promise(function(resolve, reject) {
	    asap(function() {
		try {
		    resolve(onFulfilled(value));
		} catch (ex) {
		    reject(ex);
		}
	    });
	});
    };
}
/*
  也可以将非thenable对象构造为Promise对象
  function ValuePromise(value){
  return new Promise(function(resolve){
  resolve(value);
  });
  }*/

Promise.resolve = function(value) {
    if (value instanceof Promise) return value;
    if (typeof value === "object" || typeof value === "function") {
	try {
	    var then = value.then;
	    if (typeof then === "function") {
		return new Promise(then.bind(value));
	    }
	} catch (ex) {
	    return new Promise(function(resolve, reject) {
		reject(ex);
	    });
	}
    }
    return new ValuePromise(value);
};

作用：创建一个状态为 rejected 的 promise 对象，且入参将作为 onRejected 函数的入参。

Promise.reject = function(value) {
      return new Promise(function(resolve, reject) {
	reject(value);
      });
    };

作用：返回的一个 promise 实例，且该实例当且仅当 Promise.all 入参数组中所有 Promise 元素状态均为 fulfilled 时该返回的 promise 实例的状态转换为 fulfilled（onFulfilled 事件处理函数的入参为处理结果数组），否则转换为 rejected。

Promise.all = function(arr) {
    var args = Array.prototype.slice.call(arr);
    return new Promise(function(resolve, reject) {
	if (args.length === 0) return resolve([]);
	var remaining = args.length;
	function res(i, val) {
	    try {
		if (val && (typeof val === "object" || typeof val === "function")) {
		    var then = val.then;
		    if (typeof then === "function") {
			then.call(val, function(val) {
			    // 对于thenable和promise对象则订阅onFulfilled事件获取处理结果值
			    res(i, val);
			}, reject);
			return;
		    }
		}
		args[i] = val;
		// 检测是否所有入参都已返回值
		if (--remaining === 0) {
		    resolve(args);
		}
	    } catch (ex) {
		reject(ex);
	    }
	}
	for (var i = 0; i < args.length; i++) {
	    res(i, args[i]);
	}
    });
};

作用：返回一个 promise 对象，且入参数组中一旦某个 promise 对象状态转换为 fulfilled，则该 promise 对象的状态也转换为 fulfilled。

Promise.race = function(values) {
    return new Promise(function(resolve, reject) {
	values.forEach(function(value) {
	    // 将数组元素转换为promise对象
	    Promise.resolve(value).then(resolve, reject);
	});
    });
};

源码实现的方式是即使第一个数组元素的状态已经为 fulfilled，但仍然会订阅其他元素的 onFulfilled 和 onRejected 事件，依赖 resolve 函数中的标识位 done 来保证返回的 promise 对象的 onFulfilled 函数仅执行一次。我修改为如下形式：

Promise.race = function(values){
    return new Promise(function(resolve, reject){
	var over = 0;
	for (var i = 0, len = values.length; i < len && !over; ++i){
	    var val = values[i];
	    if (val && typeof val.then === 'function'){
		val.then(function(res){
		    !over++ && resolve(res);
		}, reject);
	    }
	    else{
		!over++ && resolve(val);
	    }
	}
    });
};