jQuery-extend分析

jQuery.extend = jQuery.fn.extend = function() {var options, name, src, copy, copyIsArray, clone,target = arguments[0] || {},i = 1,length = arguments.length,deep = false;// Handle a deep copy situationif ( typeof target === "boolean" ) {deep = target;target = arguments[1] || {};// skip the boolean and the targeti = 2;}// Handle case when target is a string or something (possible in deep copy)if ( typeof target !== "object" && !jQuery.isFunction(target) ) {target = {};}// extend jQuery itself if only one argument is passedif ( length === i ) {target = this;--i;}for ( ; i < length; i++ ) {// Only deal with non-null/undefined valuesif ( (options = arguments[ i ]) != null ) {// Extend the base objectfor ( name in options ) {src = target[ name ];copy = options[ name ];// Prevent never-ending loopif ( target === copy ) {continue;}// Recurse if we're merging plain objects or arraysif ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {if ( copyIsArray ) {copyIsArray = false;clone = src && jQuery.isArray(src) ? src : [];} else {clone = src && jQuery.isPlainObject(src) ? src : {};}// Never move original objects, clone themtarget[ name ] = jQuery.extend( deep, clone, copy );// Don't bring in undefined values} else if ( copy !== undefined ) {target[ name ] = copy;}}}}// Return the modified objectreturn target;};

extend，可以用於jq自身的擴充，也可以用於對象拷貝

使用方法：

1、給JQ擴充方法

2、對象的淺拷貝

3、對象的深拷貝

ps：拷貝的參數可以有多個，如 $.extend(a,b,c,d...)

a後面的全部拷貝給a

程式碼分析：

var options, name, src, copy, copyIsArray, clone,

options：arguments參數

name：枚舉k值

src：以上樣本中的a.a，當a.a不存在，則為undefined

copy：以上執行個體中的b.b

copyIsArray：用來判斷是不是數組

clone：對src的複製

1、對自身的拓展

target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;

target：要賦值的對象

對自身的拓展，length肯定為1，和初始設定的i相等，則把i設定為0，後面for迴圈一次；

if ( length === i ) {
target = this;
--i;
}

for迴圈直接走這裡

if ( copy !== undefined ) {
target[ name ] = copy;
}

2、淺拷貝

第一個參數boolean設定為false，因為執行代碼執行預設為淺拷貝：deep=false，第一個參數省略。傳入參數至少為2個以上，$.extend(a,b,c,d...)

//這個判斷是為了格式化無效參數

if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}

for迴圈裡面走的流程和對自身拷貝一樣

3、深拷貝

第一個參數肯定為true，for迴圈索引變為從2開始，索引1的值的賦值的對象，上列中的a。

if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}

for ( name in options ) {
src = target[ name ];
copy = options[ name ];


// Prevent never-ending loop
if ( target === copy ) {//當賦值的對象和被拷貝的值為同一個對象，跳出
continue;
}


// Recurse if we're merging plain objects or arrays

//深拷貝 && copy有值 && copy為{}  / new Object對象或者數組
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

if ( copyIsArray ) {
copyIsArray = false;

//如果為數組，則對該數組進行引用，用來儲存原來的值，為空白組則賦值[]
clone = src && jQuery.isArray(src) ? src : [];


} else {

//如果為{}對象，則對該對象進行引用，用來儲存原來的值，為空白則賦值{}
clone = src && jQuery.isPlainObject(src) ? src : {};
}


// Never move original objects, clone them

//這一步很關鍵，自調用，遞迴拷貝，成功複製，防止了對同一對象的共同引用情況
target[ name ] = jQuery.extend( deep, clone, copy );


// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}

對arguments參數的判斷然後分別做出執行，這種方法很值得學習。