jQuery源码学习:Deferred Object

var
version = "3.1.1",
// Define a local copy of jQuery
jQuery = function (selector, context) {...},

window.jQuery = window.$ = jQuery;

var promise = {
...
promise: function (obj) {
return obj != null ? jQuery.extend(obj, promise) : promise;
}
},
deferred = {}; ... // 向deferred添加resolve,reject,notify,resolveWith,rejectWith和notifyWith方法 // Make the deferred a promise
promise.promise(deferred);

var tuples = [ // action, add listener, callbacks,
// ... .then handlers, argument index, [final state]
["notify", "progress", jQuery.Callbacks("memory"),
jQuery.Callbacks("memory"), 2],
["resolve", "done", jQuery.Callbacks("once memory"),
jQuery.Callbacks("once memory"), 0, "resolved"],
["reject", "fail", jQuery.Callbacks("once memory"),
jQuery.Callbacks("once memory"), 1, "rejected"]
],

fulfilled_callbacks = jQuery.Callbacks("once memory");
fulfilled_callbacks.add(fn1);
fulfilled_callbacks.add(fn2);
fulfilled_callbacks.fireWith(context, args); // fn1先执行，即fn1.apply(context,args)；然后fn2执行fn2.apply(context,args)
fulfilled_callbacks.fireWith(context, args); // 没有任何效果
fulfilled_callbacks.add(fn3); // fn3马上执行，即fn3.apply(context, args)

always: function () {
deferred.done(arguments).fail(arguments);
return this;
},

dfd1 = jQuery.Deferred();
dfd1.progress(function () {
console.log("progress1")
});
dfd1.notify(); // console log "progress1"
dfd1.resolve();
dfd1.progress(function () { // console log "progress2" immediately, i.e. before dfd1.progress() returns
console.log("progress2")
});

Deferred: function (func) {
…
if (func) {
func.call(deferred, deferred);
} // All done!
return deferred;
},

.then()方法的同步执行流程如下：

用文字描述的话，deferred.then(onFulfilled)方法被调用时主要完成了两件“任务”：

  a. 把“包裹”了真正的回调函数onFulfilled的一个函数加入了deferred的“私有变量”fulfilled_handlers当中；

  b. 产生了一个新的deferred object即newDefer，并最终返回了newDefer.promise()。

当然这只是逻辑上的划分，实际运行时.then()是同步执行的:“任务”b的前半段先执行（得到了newDefer）,接下来“任务”a执行（需要newDefer作为实参），最后“任务”b的后半段执行，就如上图所示。

2.2 .then()运行时加入到fulfilled_handlers中的函数

在上图右侧代码部分，tuples[1][3]就是fulfilled_handlers，它的.add()方法将这个方法的参数加入到fulfilled_handlers中，也就是把执行resolve()函数得到的返回值加入到fulfilled_handlers中。而resolve()函数返回一个匿名的内部函数，所以，加入到fulfilled_handlers中的函数是执行resolve()函数返回的（resolve()函数的）内部函数。

请注意这个resolve()函数本身是.then()方法的内部函数，并不是.resolve()方法。

换句话说，.then()运行后，deferred的”私有变量“fulfilled_handlers的“私有变量”list数组的第一个元素list[0]就指向上面这个resolve()返回的匿名函数。这个匿名函数的定义见下一节。

3. 异步执行

3.1 异步的触发

deferred.resolve()/resolveWith()执行时，会调用fulfilled_handlers.fire()，从而运行已加入到fulfilled_handlers中的函数。从上一节可知，此时运行的就是resolve()的内部匿名函数，如下：

这个函数定义了两个(对于它而言的)内部函数process()和mightThrow()，并在最后调用了window.setTimeout()，这样process()作为定时器的回调函数被异步执行。process()最早也要在下一个event loop才会得到机会运行，而且开始它运行前execution stack是空的，this变量指向window(sloppy mode)或undefined(strict mode)，这样process()只有通过闭包才能访问到需要的变量，详见下图。

3.2 异步执行时的作用域链

3.3 process()的执行

3.3.1 Evaluation of handler

deferred.resolve()/resolveWith()执行时，最终会导致process()被异步执行。

procss()首先运行先前.then()调用中传入的handler即上图中的onFulfilled，返回值赋给returned;

这里handler是.then()调用中传入的onFulfilled，that是.resolveWith()时传入的context，args是.resolveWith()时传入的args，参考上图。

3.3.2 Promise Resolution Procedure

3.3.2.1 Evalution of handler returns non-thenable

process()会执行下面的语句来完成状态传递：

这里deferred其实是最开始调用.then()所产生的newDefer，that是调用.resolveWith()时传入的context，args是evaluation of handler的结果即returned，参考上图中的作用域链。

例如下面的代码就会走这种分支执行：

3.3.2.2 Evaluation of handler returns thenable

这种情况下evalutation of handler返回了一个thenable，也就是有着then方法的对象returned，process()会执行下面的语句：

这里的deferred是最初的.then()调用所产生的newDefer。另外为方便起见，我们把上面这个call()调用中的第二个参数叫做Identity_wrapper_handler。接下去的流程如下。

3.3.2.2.1 当这个thenable即returned被resolve的时候，process()将被异步调用，这是整个流程中process()第二次运行。这次被evaluate的handler是Identity_wrapper_handler。

3.3.2.2.2 Identity_wrapper_handler是调用resolve(maxDepth, deferred, Identity, special)返回的函数，这里maxDepth=1，deferred就是最初的.then()调用所产生的newDefer，可参考上图中的作用域链。运行identity_wrapper_handler会导致process()再次被运行。注意在Identity_wrapper_handler中，process()函数是立即运行而不是通过window.setTimeout(process)异步运行的。

3.3.2.2.3 process()在整个流程中第三次运行，这次被evalutate的handler是Identity函数。Identity函数定义如下:

Identity函数运行时的context是returned被resolve时的context，参数是returned被resolve时的值。这样Identity函数运行完毕之后，流程又走回到了3.3.2 Promise Resolution Procedure，这时evalution of handler返回的就是上一个thenalbe被resolve时的值。请注意在这个第三次运行的process()中，闭包中存放的deferred引用指向最初的deferred.then()所产生的newDefer，这样就保证了变化的状态能被传递到正确的deferred object上。

对照规范https://promisesaplus.com/来看，这就是规范中的2.3所描述的从[[Resolve]](promise,x)到[[Resolve]](promise,y)的过程。

例如下面的代码就会走这个小节即3.3.2.2的流程：

在上面代码运行的整个流程中，process()总共运行了三次，每次运行时的部分作用域如下:

* process()第一次和第三次运行时，scope chain[3]其实指向同一个activation object，只不过里面的变量maxDepth从0变成了1。

** 这两个scope chain指针也指向同一个activation object，因为scope chain[3]相同。

另外每次process()运行时，scope chain[5]指向同一个jQuery Closure activation object，scope chain[6]指向同一个Global variable object。

3.3.3 Exceptions

process()在运行handler（evalution of handler）或者调用thenable对象的then方法时，如果发生了异常或者异常被抛出，process()会catch exception并调用newDefer的.rejectWith()方法，这样newDefer就会变成rejected状态，确保了exception也会被传递下去。

3.3.4 Thenable self-resolution

下面的代码会导致newDefer要进入resolved状态就必须等待自己被resolve，这是一个逻辑上的死循环，相当于[[Resolve]](promise,promise)。


jQuery对于这种情况在deferred.resolve()时会抛出异常jQuery.Deferred exception: Thenable self-resolution。