1.如果還記的分析一中的返回一個對象,我直接貼了一句代碼
return new jQuery.fn.init( selector, context );
好多不清楚為什么jQuery.fn.init返回的是jQuery對象呢我也研究了很久涛贯。
jQuery.fn = jQuery.prototype = {
jQuery.fn現(xiàn)在指向的是jQuery的原型
init.prototype = jQuery.fn;
init.prototype指向的是jQuery.fn
這個就講得通了啊诽嘉,返回的是init,而init的原型通過原型鏈指回jQuery的原型對象弟翘,所以返回的是一個對象虫腋,this指向的是這個新對象,這個新對象可以調(diào)用jQuery原型鏈上的所有方法衅胀。
2.jQuery.fn.extend()與jQuery.extend()
第一個是用來擴展對象方法的岔乔,也就是實例方法,調(diào)用的的時候$().foo()把對象掛載在jQuery的原型對象上
第二個是用來擴展靜態(tài)方法的滚躯,也就是直接用jQuery.foo()來調(diào)用的雏门。
這兩個方法很有意思
看源碼
jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
這兩個方法用了同一個方法體,如何實現(xiàn)不同的功能掸掏?這就要取決于強大的this了茁影,jQuery.extend中的this指向的是jQuery對象jQuery.fn.extend指向的是fn,還記的1中的代碼嗎丧凤?jquer.fn=jQuery.prototype募闲,所以this的指向不同。
3.回溯
先上三段代碼開開胃
end: function() {
return this.prevObject || this.constructor();
},
// For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: push,
sort: deletedIds.sort,
splice: deletedIds.splice
};
pushStack: function( elems ) {
// Build a new jQuery matched element set
var ret = jQuery.merge( this.constructor(), elems );
// Add the old object onto the stack (as a reference)
ret.prevObject = this;
ret.context = this.context;
// Return the newly-formed element set
return ret;
},
merge: function( first, second ) {
var len = +second.length,
j = 0,
i = first.length;
while ( j < len ) {
first[ i++ ] = second[ j++ ];
}
// Support: IE<9
// Workaround casting of .length to NaN on otherwise arraylike objects (e.g., NodeLists)
if ( len !== len ) {
while ( second[ j ] !== undefined ) {
first[ i++ ] = second[ j++ ];
}
}
first.length = i;
return first;
},
結(jié)合這三段代碼
首先end()返回的是this.prevObject,這個屬性要結(jié)合pushStack這個函數(shù)愿待,這里面給返回的新對象加了一個prevObject屬性浩螺,該函數(shù)將一個 DOM 元素集合加入到 jQuery 內(nèi)部管理的一個棧中,通過改變 jQuery 對象的 prevObject 屬性來跟蹤鏈式調(diào)用中前一個方法返回的 DOM 結(jié)果集合這個屬性是包含上一步操作的集合仍侥。當(dāng)調(diào)用end()方法的時候內(nèi)部就返回當(dāng)前 jQuery 對象的 prevObject 屬性要出,完成回溯