Promise源码分析

源码来自：http://www.mattgreer.org/articles/promises-in-wicked-detail/
源码中加入.then()链式操作和.then()中返回Promise的代码看起来有点困难，所以只专注于下面这部分代码，更详细的代码可以直接去上述地址查阅。

function Promise(fn) {
  var state = 'pending';
  var value;
  var deferred = null;

  function resolve(newValue) {

    if(newValue && typeof newValue.then === 'function') {
        newValue.then(resolve);
        return;
    }
    
    state = 'resolved';
    value = newValue;

    if(deferred) {
      handle(deferred);
    }
  }

  function handle(handler) {
    if(state === 'pending') {
      deferred = handler;
      return;
    }

    if(!handler.onResolved) {
      handler.resolve(value);
      return;
    }

    var ret = handler.onResolved(value);
    handler.resolve(ret);
  }

  this.then = function(onResolved) {
    return new Promise(function(resolve) {
      handle({
        onResolved: onResolved,
        resolve: resolve
      });
    });
  };

  fn(resolve);
}

知识点

this与局部变量在切换执行环境的区别：
this对象是运行时基于函数的执行环境绑定的，而局部变量不会基于函数的执行环境而变化。

var innerVar = "world";
var name = "The Window";
function Obj() {
    var innerVar = "hello";
    this.name = "The Door";
    this.pp = function() {
        console.log(innerVar);
        console.log(this.name);
    }
}

var haha = new Obj();
haha.pp();
var hehe = haha.pp;
hehe();

在nodejs下执行结果为:

hello
The Door
hello
undefined

可以看到this.name会随着执行环境而变化，而innerVar则不会随着执行环境变化而变化。

上述源码有几个地方看起来比较突兀：

1. this.then中将用户提供的回调函数onResolved传递给了原始Promise的deferred中。

this.then = function(onResolved) {
    return new Promise(function(resolve) {
        handle({
            onResolved: onResolved,
            resolve: resolve
        });
    });
};

如果我们把这个匿名参数拆出来写：

this.then = function(onResolved) {
    var param = function(resolve) {
        handle({
            onResolved: onResolved,
            resolve: resolve
        });
    }
    return new Promise(param);
    });
};

可以看到作为参数的变量param，这个匿名函数闭包的作用域链中包含了Promise中的handle函数，而这个handle函数指的是直接创建Promise的handle函数，并非.then创建的Promise的handle函数，本质上这两个handle函数也是不一样的两个函数(并非同一个函数的两个引用，而是两个独立的函数)，所以handle中引用的deferred也是第一个Promise的deferred，所以通过.then将用户提供的回调函数onResolved传递给了第一个Promise。

1. 原始Promise的handle函数的最后一行的”handle.resolve(ret)”调用的究竟是哪个Promise的resolve？

在通过.then创建Promise时，会通过Promise函数的最后一行”fn(resovle)”来执行Promise的参数fn，而.then创建Promise的参数fn为:

function(resolve) {
    handle({
        onResolved: onResolved,
        resolve: resolve
    });
}

而此时fn中的参数resolve是新的Promise的resolve，所以原始Promise的deferred中保存的是新的Promise的resolve。所以如果原始Promise只有一层.then()的话，原始Promise在执行”handle.resolve(ret)”时会进入第二个Promise的环境，而第二个Promise的deferred为null，所以直接返回了。

1. 如果.then()中的onResolved也返回一个Promise是怎么处理的？

这类操作通常见于在需要根据第一个网络请求的返回值再创建一个网络请求。
我们就举这样一个例子，在第一个Promise中进行网络请求，请求成功后进行resolve(rt1)，在.then()中获取到rt后，返回一个Promise，这个Promise中利用rt进行第二次网络请求，请求成功而后进行resolve(rt2)。

function getSomeThing1() {
    return new Promise(function(resolve, reject) {
        var rt = 'something 1!';
        resolve(rt);
    });
}

getSomeThing1().then(function(rt) {
    return new Promise(function(resolve, reject) {
        var rt2;
        if (rt === 'something 1!') {
            rt2 = 'AA';
        } else {
            rt2 = 'BB';
        }
        
        resolve(rt2);
    });
})

这是通过在resolve函数中判断newValue是否有then属性的函数来实现的，在判断中对用户onResolved返回的Promise再次进行调用.then(resolve)来实现的。

我们把getSomeThing1返回的第一层网络请求Promise叫做Promise1，通过Promise1.then创建的Promise叫做Promise1_then，Promise1.then中创建的第二层网络请求叫做Promise2。

Promise1获取到数据rt后，resolve(rt)过程中执行handler.onResolved(value)返回了一个再次进行网络请求的Promise2，然后执行handler.resolve(Promise’)，handler.resolve调用的是Promise1_then中的resolve，如上面第2点描述的。接着执行Promise2.then(resolve)会将当前Promise1_then的resolve传递给了Promise2的deferred中，意味着当Promise2第二层网络请求完成时调用deferred.onResolved(value)会返回到Promise1_then的堆栈环境中，执行Promise1_then.resolve(rt2)，把第二层网络请求到的数据继续传递给下一个.then。