jQuery源碼分析(二)

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é)果集合這個屬性是包含上一步操作的集合。當調(diào)用end()方法的時候內(nèi)部就返回當前 jQuery 對象的 prevObject 屬性,完成回溯

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容