Arr = function () {
var items = [],
promise,
arr = {
add: function (item) {
items.push(item);
},
length: function () {
return items.length;
},
clear: function () {
items = [];
},
promise: function () {
if (promise) {
return promise;
}
var obj = promise = {};
obj.add = arr.add;
obj.length = arr.length;
obj.promise = arr.promise;
return obj;
}
};
return arr;
}
上面代码定义了一个Arr，用来生成一个数组对象，包含一些方法，比如add(), length(), clear(), promise()。
其中promise()返回当前Arr对象的一个副本，只能向其中添加元素，而不能清空内部数组。
复制代码 代码如下:
var arr = Arr();
arr.add(1);
arr.add(2);
// 2
console.log(arr.length());
arr.clear();
// 0
console.log(arr.length());
var arr = Arr();
arr.add(1);
arr.add(2);
// 2
console.log(arr.length());
var promise = arr.promise();
promise.add(3);
promise.add(4);
// 4
console.log(promise.length());
// Error: TypeError: promise.clear is not a function
promise.clear();
deferred.promise()与deferred.promise().promise()
还记得前面提到的那两个完成相同功能的代码么？
复制代码 代码如下:
function getData() {
return $.get('/foo/');
}
function showDiv() {
// 这里返回promise()或者直接返回deferred对象，代码都能正确运行。
return $.Deferred(function (dfd) {
$('#foo').fadeIn(1000, dfd.resolve);
}).promise();
}
$.when(getData(), showDiv()).then(function (ajaxResult) {
console.log('The animation AND the AJAX request are both done!');
});
那么你有没有思考过，为什么这两种方式都能运行呢？
如果你深入jQuery的源代码，你会发现$.when(obj1, obj2, ...)在内部实现时会获取obj1.promise()：
复制代码 代码如下:
if ( object && jQuery.isFunction( object.promise ) ) {
object.promise().then( iCallback(lastIndex), deferred.reject );
}
所以我们来看上面showDiv的返回结果：
如果是deferred对象的话，$.when()通过下面方式得到promise：
$.Deferred().promise()
如果是deferred.promise()对象的话，$.when()通过下面方式得到promise：
$.Deferred().promise().promise()
那么是不是说：$.Deferred().promise() === $.Deferred().promise().promise()
我们还是通过示例来验证我们的想法：
复制代码 代码如下:
var deferred = $.Deferred(),
promise = deferred.promise();
// true
promise === promise.promise();
// true
promise === promise.promise().promise().promise();
当然，这个结果是推理出来的，如果我们直接看Deferred的源代码，也很容易看出这样的结果：
复制代码 代码如下:
promise: function (obj) {
if (obj == null) {
// 在这里，如果promise已经存在（已经调用过.promise()），就不会重新创建了
if (promise) {
return promise;
}
promise = obj = {};
}
var i = promiseMethods.length;
while (i--) {
obj[promiseMethods[i]] = deferred[promiseMethods[i]];
}
return obj;
}
总结
1. deferred.promise()返回的是deferred对象的只读属性。
2. 建议任务不要返回deferred对象，而是返回deferred.promise()对象。这样外部就不能随意更改任务的内部流程。
3. deferred.promise() === deferred.promise().promise() （上面我们分别从代码推理，和源代码分析两个角度得到这个结论）
本文由三生石上原创，博客园首发，转载请注明出处。
您可能感兴趣的文章: