789
技術社區[雲棲]
jQuery繼承的實現（extends）
jQuery中的extend方法通過不同的參數實現了幾種不同的繼承方法：
- 1.extend(src)
- 2.extend(dest,src1,src2,src3...srcN)
將src1、src2...對象的屬性和方法逐一複製給dest對象，需要注意的是，在複製的過程中，排在後麵的參數（對象）將會覆蓋排在前麵的參數的屬性和方法；實際上，該方法和後麵的方法3都提供了一種“深度繼承”的方法，即：參數一表示的對象可以通過該方法一次實現逐一按層次的父類繼承。
如下圖所示：
srcN
...
src3
src2
src1
dest
使用該方法，可以一次將”繼承“dest的多個父類，需要注意的是src3提供的屬性和方法由可能會被src2,src1重載。
- 3.extend(boolean,dest,src1,src2...)
與其他的類庫不同的是，jQuery的extend方法提供了“深層拷貝”的功能，如果你傳入的第一個參數為boolean型變量，則該變量為深層拷貝的標誌，第二個參數為extend方法的目標對象，其餘參數為需要進行繼承的“父類”。如果第一個參數的值為true（深層拷貝），並且dest和src元素都包括相同名稱的對象屬性，則對該對象屬性的方法和屬性再進行一次複製。
- 最後我們來通過分析源代碼，來加深對該繼承機製的理解：
// copy reference to target object
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;
// Handle a deep copy situation
if ( target.constructor == Boolean ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
/*如果目標參數不是object或者function，那麼就有可能是深度copy,*/
if ( typeof target != "object" && typeof target != "function" )
target = {};
if ( length == i ) {
target = this;
--i;
}
for ( ; i < length; i++ )
if ( (options = arguments[ i ]) != null )
// Extend the base object
for ( var name in options ) {
var src = target[ name ], copy = options[ name ];
if ( target === copy )
continue;
if ( deep && copy && typeof copy == "object" && !copy.nodeType )
target[ name ] = jQuery.extend( deep,
// Never move original objects, clone them
src || ( copy.length != null ? [ ] : { } )
, copy );
else if ( copy !== undefined )
target[ name ] = copy;
}
// Return the modified object
return target;
};
- 注意：
在這裏還有一個特殊的地方，就是在函數開頭的地方有jQuery.extend = jQuery.fn.extend，而在程序的前麵已經將jQuery.prototype賦值給jQuery.fn了，所以在後麵的調用中會出現jQuery.extend()和jQuery.fn.extend()的不同調用，這兩個方法調用產生的結果也不一樣，jQuery.extend()的調用並不會把方法擴展到對象的實例上，引用它的方法也需要通過jQuery類來實現，如jQuery.init()，而jQuery.fn.extend()的調用把方法擴展到了對象的prototype上，所以實例化一個jQuery對象的時候，它就具有了這些方法，這是很重要的，在jQuery.js中到處體現這一點
最後更新：2017-04-02 00:06:38