分析了一下JQuery中的extend方法實作原理_jquery

很久沒有發表貼文了，今天突然分析了一下JQuery中的extend方法實作原理。目的為了提升自己對JQuery的認識，也想了解JavaScript高手是如何寫JS的，如有不足請指正。謝謝！

下面是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; 
    // 處理深度拷貝狀況（第一個參數是boolean型別且為true） 
    if ( typeof target === "boolean" ) { 
        deep = target; 
        target = arguments[1] || {}; 
        // 跳過第一個參數（是否深度拷貝）與第二個參數（目標物） 
        i = 2; 
    } 
    // 若目標不是物件或函數，則初始化為空物件 
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) { 
        target = {}; 
    } 
    // 如果只指定了一個參數，則使用jQuery本身作為目標物件 
    if ( length === i ) { 
        target = this; 
        --i; 
    } 
    for ( ; i         // Only deal with non-null/undefined values 
        if ( (options = arguments[ i ]) != null ) { 
            // Extend the base object 
            for ( name in options ) { 
                src = target[ name ]; 
                copy = options[ name ]; 
                // Prevent never-ending loop 
                if ( target === copy ) { 
                    continue; 
                } 
                // 若物件中包含了陣列或其他對象，則使用遞迴進行拷貝 
                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 : {}; 
                    } 
                    // 從不改變原始對象，且只做拷貝 
                    target[ name ] = jQuery.extend( deep,clone, copy ); 
                // 不拷貝undefined值 
                } else if ( copy !== undefined ) { 
                    target[ name ] = copy; 
                } 
            } 
        } 
    } 
    // 傳回已被修改的物件 
    return target; 
};

 從上面的分析可以看出extend函數支援深度拷貝，那麼在JS中什麼是深度拷貝呢？
 
我的理解如下：如果一個物件中包含引用對象（如：數組或對象），那麼拷貝該對象時不是簡單的進行引用對象的地址拷貝，而是將引用對象的內容複製過來保存成一個單獨的對象（如下圖）。

 從上圖可以看出兩個學生對象共用好友對象，一方對好友對象的操作同時另一方也可見。如：你將好友的姓成了「zhangsan」那麼另一個對像也能看見。

 從上圖可以看出兩個學生對像都有自己的好友對象，一方的修改對另一方完全是透明的（沒有任何影響）。以上就是我對深度複製的理解，有什麼不對的請不要笑話，謝謝。

那麼JQuery.extend方法怎麼實作淺複製和深度複製呢？

JQuery.extend使用方式：

1、JQuery.extend（來源物件）

      將來源物件擴展到jQuery物件上，即將來源物件的屬性和方法複製到jQuery上。使用jQuery作為目標對象，原始碼如下：

複製程式碼 程式碼如下:

// 如果只指定了一個參數，則使用jQuery本身作為目標物件 
if ( length === i ) { 
    target = this; 
    --i; 
}

【 實例1】：將person物件的方法擴展到jQuery物件上。

複製程式碼 程式碼如下:

var person = { 
    sex      : 'male', 
    showName : function(name){ 
            alert("Name: " name); 
    } 
}; 
jQuery.extend(person); // 將person物件擴展到jQuery（$）物件上 
jQuery.showName("admin"); // Name: admin 
$.showName("admin"); // Name: amdin 
alert("Sex: " $.sex); // Sex: male

【實例2】驗證使用此種形式的extend方法為淺複製。

複製程式碼 程式碼如下:

var person = { 
    language : ['java', 'c ', 'sql'], 
    showName : function(name){ 
        alert("Name: " name); 
    } 
}; 
jQuery.extend(person); // 將person物件擴展到jQuery（$）物件上 
alert($.language); // java, c , sql 
$.language.push('PL/SQL'); // 修改擴充後的物件 
alert(person.language); // java, c , sql, PL/SQL 
person.language.pop(); 
alert($.language); // java, c , sql

 從上面例子可以發現，被擴展後的物件（$）和來源物件（person）任何一方對language陣列的修改，都會影響到另一方。這就是淺複製

2、JQuery.extend（目標對象，來源對象）

    將來源物件的屬性和方法複製到目標物件上，採用淺複製。
【實例】分別建立person和student對象，然後透過jQuery.extend方法將person的屬性和方法擴展到student對象。

複製程式碼 程式碼如下:

var person = { 
    language : ['java', 'c ', 'sql'], 
    showName : function(name){ 
        alert("Name: " name); 
    } 
}; 
var student = { 
    showNum : function(num){ 
        alert("Num: " num); 
    } 
}; 
jQuery.extend(student, person); // 將person物件擴展到指定的student物件上 
student.showName("admin"); 
alert(student.language);

3、JQuery.extend（boolean，來源物件）

    此種方式中的boolean參數表示是否採用深度複製，如果為true，則使用深度複製。
【實例】將person物件擴展到jQuery物件上

複製程式碼 程式碼如下:

var person = { 
    language : ['java', 'c ', 'sql'], 
    showName : function(name){ 
        alert("Name: " name); 
    } 
}; 
jQuery.extend(true, person); // 將person物件擴充jQuery物件上 
alert($.language); // java, c , sql 
$.language.push('PL/SQL'); // 修改擴充後的物件 
alert(person.language); // java, c , sql 
person.language.pop();

 從上面範例可以看出對$.language的修改不會影響到person中的language屬性。這就是深度複製

4、JQuery.extend（boolean，目標對象，來源物件）

    決定是否採用深度複製將來源物件擴展到目標物件上方。如下：
【實例】分別建立person和student對象，然後透過jQuery.extend方法將person的屬性和方法擴展到student對象。

複製程式碼 程式碼如下:

var person = { 
    showName : function(name){ 
        alert("Name: " name); 
    } 
}; 
var student = { 
    language : ["java", "c ", "javascript"], 
    showNum : function(num){ 
        alert("Num: " num); 
    } 
}; 
var target = jQuery.extend(person, student); 
alert(target.language);     // java, c , javascript 
target.language.push("PL/SQL"); 
alert(student.language);    // java, c , javascript, PL/SQL 
student.language.pop(); 
alert(target.language);     // java, c , javascript 
var target2 = jQuery.extend(true, person, student); 
alert(target2.language);    // java, c , javascript 
target2.language.push("PL/SQL"); 
alert(student.language);    // java, c , javascript 
student.language.pop(); 
alert(target2.language);    // java, c , javascript, PL/SQL

以上就是我對extend方法的理解，如有不正確的地方請指正。非常謝謝！