jQuery->Deferred then

浏览数：18 / 时间：2015年06月09日

合格的项目经理应该具备哪些技能？

奥，不知道哎！但我知道不合格的项目经理具备哪些特点

1. 不看代码

2. 识别不了平庸与卓越

3. 催进度

1. then返回值是什么？var a = aDeferred.then(),a和aDeferred是什么关系？

then的返回值是一个promise，也就是没有触发功能(resolve,reject,notify)的Deferred对象
a和aDeferred啥关系也不是，a是新生成的promise。

2. $.Deferred(fn)是什么意思？

$.Deferred(fn)等价于：
var t = $.Deferred(); fn.call(t , t);
即在t的作用域上，函数fn以t为参数做调用。

3. var t = $.Deferred().then(); t和下面代码中then函数中的newDefer参数是什么关系?

newDefer中的属性copy自t，t是newDefer的子集

then: function() {
    var 
fns = arguments;
    return 
jQuery.Deferred(function( newDefer ) {...
    }).promise();
}   

4 tuples来自哪里？deferred指的是谁？

假设调用t.then(),tuples是生成t时产生的，deferred同理

    then: function( /* fnDone, fnFail, fnProgress */ ) {
        var fns = arguments;
        return jQuery.Deferred(function( newDefer ) {
            jQuery.each( tuples, function( i, tuple ) {
                var action = tuple[ 0 ],
                    fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
                // deferred[ done | fail | progress ] for forwarding actions to newDefer
                deferred[ tuple[1] ](function() {
                    var returned = fn && fn.apply( this, arguments );
                    if ( returned && jQuery.isFunction( returned.promise ) ) {
                        returned.promise()
                            .done( newDefer.resolve )
                            .fail( newDefer.reject )
                            .progress( newDefer.notify );
                    } else {
                        newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
                    }
                });
            });
            fns = null;
        }).promise();
    }

5.$.each(arr, fn);函数fn中的this对象是谁？

arr[i],$.each中对fn的调用进行了作用域的绑定

each: function( obj, callback, args ) {
    ... 
    } else {
         if ( isArray ) {
             for ( ; i < length; i++ ) {
                 value = callback.call( obj[ i ], i, obj[ i ] );
                 ...
             }
        }
    }
    return obj;
}

6. deferred[ tuple[1] ](fn)在做什么？

将fn添加到deferred的回调函数列表，以便deferred.resolve/reject()触发后回调fn

7. jQuery.isFunction( returned.promise )是什么意思？

判断returned是否至少是promise对象。

8. returned.promise().done( newDefer.resolve )在做什么？

为returned添加处理完成的回调函数，以便returned.resolve()后去执行newDefer.resolve()

9 fn是函数，
jQuery.isFunction( fn().promise ) === false;
$.Deferred().done(fn)与$.Deferred().then(fn)有何区别？

$.Deferred().then(fn)缺少回调函数绑定时，两者没有区别，后者会在结束时触发新生成的Deferred对象的resolveWith方法。

10 then 和pipe的区别

jquery早期版本中pipe的功能和目前(jquery1.10.1)then的功能是一致的，目前pipe是then的别名，考虑向后兼容

11.then的实际用途^[1]

上面的情况下，done和then方式的调用几乎没有区别
看看下面这种情况，ajax请求，返回的数据用于修改页面的值。

$.ajax("your/url", {
    dataType: "json"
}).done(
    function(data) {
        $.each(data, function(key, value) {
    $("#" + key).val(value);
    });
});

现在假设value并不是最终要展示的值，需要对value进行转换，value = doSomethingWith(value);如果doSomethingWith包含了异步操作，怎么确保异步操作之后将正确的结果显示出来呢？

这个时候就用到了then，第一个ajax，称作ajax1，响应完成后，流程转到了then，then中返回ajax(延迟对象) ajax2，最终，ajax2调用完成触发resolve执行done添加的函数队列，将结果显示出来。

    $.ajax("your/url", {
        dataType: "json"
    }).then(function(theOriginalData) {
        return $.ajax("your/web/service/doSomethingWith", {
            data: theOriginalData,
            dataType: "json"
        });
    }).done(function(theFinalData) {
        $.each(theFinalData, function(key, value) {
            $("#" + key).val(value);
        });
    });

12 异步操作之间数据是如何传递？

以上面的示例说明，ajax1处理成功之后，会调用resolveWith触发回调函数队列

  deferred.resolveWith( callbackContext, [ theOriginalData, statusText, jqXHR ] );->
    
  (function() {
        var returned = fn && fn.apply( this, arguments );
        if ( returned && jQuery.isFunction( returned.promise ) ) {
            returned.promise()
                .done( newDefer.resolve )
                .fail( newDefer.reject )
                .progress( newDefer.notify );
        } else {
            newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
        }
    }).apply(callbackContext, [ theOriginalData, statusText, jqXHR ]); ->
    
    fn.apply( this, arguments )-> //触发另一个
    
    (function(theOriginalData) {
        return $.ajax("your/web/service/doSomethingWith", {
            data: theOriginalData,
            dataType: "json"
        });
    }).apply(callbackContext, [ theOriginalData, statusText, jqXHR ]);->
    
    $.ajax("your/web/service/doSomethingWith", {
            data: theOriginalData,
            dataType: "json"
    }); -> //异步操作完成后
    
    deferred.resolveWith( callbackContext, [ theFinalData, statusText, jqXHR ] );->
    
    newDefer.resolve( callbackContext, [ theFinalData, statusText, jqXHR ] ); ->
    
    (function(theFinalData) {
        $.each(theFinalData, function(key, value) {
            $("#" + key).val(value);
        });
    }).apply( callbackContext, [ theFinalData, statusText, jqXHR ] );

[1]代码来源：understanding-deferred-pipe

[2]函数上下文中确定this的值的规则

this的值由调用者提供，由调用函数的方式决定，如果调用括号()左边是引用类型，this为这个引用类型值的base对象，其他情况this为全局对象

function foo() {
    console.log(this);
}

foo(); // global, because

var fooReference = {
    base: global,
    propertyName: ‘foo‘
};

// 另一种调用形式
foo.prototype.constructor(); //foo.prototype, because

var fooPrototypeConstructorReference = {
    base: foo.prototype,
    propertyName: ‘constructor‘
};

思考下面函数表达式：
(function() {
    console.log(this); // null => global
})();

function foo() {// 解释 http://dmitrysoshnikov.com/ecmascript/chapter-3-this/#comment-342
    function bar() {
        console.log(this); // => global
    }
    bar();
}