很久沒有發表貼文了，今天突然分析了一下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方法的理解，如有不正確的地方請指正。非常謝謝！
