分析了一下JQuery中的extend方法實(shí)現(xiàn)原理
很久沒(méi)有發(fā)表帖子了，今天突然分析了一下JQuery中的extend方法實(shí)現(xiàn)原理。目的為了提高自己對(duì)JQuery的認(rèn)識(shí)，也想了解JavaScript高手是如何編寫JS的，如有不足請(qǐng)指正。謝謝！
下面是JQuery.extend方法源代碼：
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {}, // 目標(biāo)對(duì)象
i = 1,
length = arguments.length,
deep = false;
// 處理深度拷貝情況（第一個(gè)參數(shù)是boolean類型且為true）
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// 跳過(guò)第一個(gè)參數(shù)（是否深度拷貝）和第二個(gè)參數(shù)（目標(biāo)對(duì)象）
i = 2;
}
// 如果目標(biāo)不是對(duì)象或函數(shù)，則初始化為空對(duì)象
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// 如果只指定了一個(gè)參數(shù)，則使用jQuery自身作為目標(biāo)對(duì)象
if ( length === i ) {
target = this;
--i;
}
for ( ; i < length; 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;
}
// 如果對(duì)象中包含了數(shù)組或者其他對(duì)象，則使用遞歸進(jìn)行拷貝
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
// 處理數(shù)組
if ( copyIsArray ) {
copyIsArray = false;
// 如果目標(biāo)對(duì)象不存在該數(shù)組，則創(chuàng)建一個(gè)空數(shù)組；
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// 從不改變?cè)紝?duì)象，只做拷貝
target[ name ] = jQuery.extend( deep, clone, copy );
// 不拷貝undefined值
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// 返回已經(jīng)被修改的對(duì)象
return target;
};
從上面的分析可以看出extend函數(shù)支持深度拷貝，那么在JS中什么是深度拷貝呢？
我的理解如下：如果一個(gè)對(duì)象中包含引用對(duì)象（如：數(shù)組或?qū)ο螅?，那么拷貝該?duì)象時(shí)不是簡(jiǎn)單的進(jìn)行引用對(duì)象的地址拷貝，而是將引用對(duì)象的內(nèi)容復(fù)制過(guò)來(lái)保存成一個(gè)單獨(dú)的對(duì)象（如下圖）。
從上圖可以看出兩個(gè)學(xué)生對(duì)象共用好友對(duì)象，一方對(duì)好友對(duì)象的操作同時(shí)另一方也可見(jiàn)。如：你將好友的姓成了“zhangsan”那么另一個(gè)對(duì)象也能看見(jiàn)。
從上圖可以看出兩個(gè)學(xué)生對(duì)象都有自己的好友對(duì)象，一方的修改對(duì)另一方完全是透明的（無(wú)任何影響）。以上就是我對(duì)深度復(fù)制的理解，有什么不對(duì)的請(qǐng)不要笑話，謝謝。
那么JQuery.extend方法怎樣實(shí)現(xiàn)淺復(fù)制和深度復(fù)制呢？
JQuery.extend使用方式：
1、JQuery.extend（源對(duì)象）
將源對(duì)象擴(kuò)展到j(luò)Query對(duì)象上，即把源對(duì)象的屬性和方法復(fù)制到j(luò)Query上。使用jQuery作為目標(biāo)對(duì)象，源碼如下：
// 如果只指定了一個(gè)參數(shù)，則使用jQuery自身作為目標(biāo)對(duì)象
if ( length === i ) {
target = this;
--i;
}
【 實(shí)例1】：將person對(duì)象的方法擴(kuò)展到j(luò)Query對(duì)象上。
var person = {
sex : 'male',
showName : function(name){
alert("Name: " + name);
}
};
jQuery.extend(person); // 將person對(duì)象擴(kuò)展到j(luò)Query（$）對(duì)象上
jQuery.showName("admin"); // Name: admin
$.showName("admin"); // Name: amdin
alert("Sex: " + $.sex); // Sex: male
【實(shí)例2】驗(yàn)證使用此種形式的extend方法為淺復(fù)制。
var person = {
language : ['java', 'c++', 'sql'],
showName : function(name){
alert("Name: " + name);
}
};
jQuery.extend(person); // 將person對(duì)象擴(kuò)展到j(luò)Query（$）對(duì)象上
alert($.language); // java, c++, sql
$.language.push('PL/SQL'); // 修改擴(kuò)展后的對(duì)象
alert(person.language); // java, c++, sql, PL/SQL
person.language.pop();
alert($.language); // java, c++, sql
從上面例子中可以發(fā)現(xiàn)，被擴(kuò)展后的對(duì)象（$）和源對(duì)象（person）任何一方對(duì)language數(shù)組的修改，都會(huì)影響到另一方。這就是淺復(fù)制
2、JQuery.extend（目標(biāo)對(duì)象，源對(duì)象）
將源對(duì)象的屬性和方法復(fù)制到目標(biāo)對(duì)象上，采用淺復(fù)制。
【實(shí)例】分別創(chuàng)建person和student對(duì)象，然后通過(guò)jQuery.extend方法將person的屬性和方法擴(kuò)展到student對(duì)象。
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對(duì)象擴(kuò)展到指定的student對(duì)象上
student.showName("admin");
alert(student.language);
3、JQuery.extend（boolean，源對(duì)象）
此種方式中的boolean參數(shù)表示是否采用深度復(fù)制，如果為true，則使用深度復(fù)制。
【實(shí)例】將person對(duì)象擴(kuò)展到j(luò)Query對(duì)象上
var person = {
language : ['java', 'c++', 'sql'],
showName : function(name){
alert("Name: " + name);
}
};
jQuery.extend(true, person); // 將person對(duì)象擴(kuò)展jQuery對(duì)象上
alert($.language); // java, c++, sql
$.language.push('PL/SQL'); // 修改擴(kuò)展后的對(duì)象
alert(person.language); // java, c++, sql
person.language.pop();
從上面例子中可以看出對(duì)$.language的修改不會(huì)影響到person中的language屬性。這就是深度復(fù)制
4、JQuery.extend（boolean，目標(biāo)對(duì)象，源對(duì)象）
決定是否采用深度復(fù)制將源對(duì)象擴(kuò)展到目標(biāo)對(duì)象上面。如下：
【實(shí)例】分別創(chuàng)建person和student對(duì)象，然后通過(guò)jQuery.extend方法將person的屬性和方法擴(kuò)展到student對(duì)象。
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
以上就是我對(duì)extend方法的理解，如有不正確的地方請(qǐng)指正。非常謝謝！
- jQuery繼承extend用法詳解
- jQuery插件擴(kuò)展extend的簡(jiǎn)單實(shí)現(xiàn)原理
- jquery簡(jiǎn)單插件制作(fn.extend)完整實(shí)例
- Jquery實(shí)現(xiàn)$.fn.extend和$.extend函數(shù)
- jQuery.extend 函數(shù)及用法詳細(xì)
- 淺談jquery.fn.extend與jquery.extend區(qū)別
- jQuery中extend()和fn.extend()方法詳解
- 原生js實(shí)現(xiàn)復(fù)制對(duì)象、擴(kuò)展對(duì)象 類似jquery中的extend()方法
- Jquery中擴(kuò)展方法extend使用技巧
- jQuery $.extend()用法總結(jié)
- jQuery的extend方法【三種】
相關(guān)文章
jQuery學(xué)習(xí)筆記之jQuery動(dòng)畫效果
本次學(xué)習(xí)分為兩個(gè)文件的測(cè)試，第一個(gè)是基本動(dòng)畫，第二個(gè)是滑動(dòng)和透明動(dòng)畫效果，分別如下2013-09-09
jQuery實(shí)現(xiàn)對(duì)象轉(zhuǎn)為url參數(shù)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)對(duì)象轉(zhuǎn)為url參數(shù)的方法,涉及jQuery針對(duì)字符串的遍歷與轉(zhuǎn)換操作相關(guān)技巧,需要的朋友可以參考下2017-01-01
jQuery的each終止或跳過(guò)：涉及迭代，不可避免需要有非正常終止，或強(qiáng)制跳過(guò)的情況2013-12-12
模擬電子簽章蓋章效果的jQuery插件源碼，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了jQuery 查找元素操作,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)頁(yè)面元素的各種常見(jiàn)查找操作實(shí)現(xiàn)方法,需要的朋友可以參考下2019-10-10
本文給大家分享基于jquery步驟進(jìn)度條源碼分享，實(shí)現(xiàn)功能是這樣的，在輸入框中輸入第3步，點(diǎn)擊重新生成按鈕，相應(yīng)的步驟顏色就會(huì)加深，對(duì)jquery步驟進(jìn)度條感興趣的朋友一起看看吧2015-11-11
本篇文章主要介紹了jquery編寫日期選擇器的實(shí)現(xiàn)過(guò)程與方法，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
jQuery下實(shí)現(xiàn)等待指定元素加載完畢(可改成純js版)
下面就是我想到的等待元素出現(xiàn)方法，雖然是基于jQuery的，但是代碼很簡(jiǎn)潔，可以修改成純js版的,感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
通過(guò)上下左右鍵和回車鍵切換光標(biāo)實(shí)現(xiàn)代碼
客戶有這樣一個(gè)需求在列表中的文本框里輸入數(shù)據(jù)時(shí)，要能夠通過(guò)上下左右鍵來(lái)切換光標(biāo)，按回車鍵就把光標(biāo)移到下一個(gè)文本框，接下來(lái)將為你介紹下如何實(shí)現(xiàn)，感興趣的朋友可以參考下2013-03-03
為jQuery增加join方法的實(shí)現(xiàn)代碼
正在做一個(gè)在線書簽管理的站點(diǎn)，有需要這樣一個(gè)功能,把匹配節(jié)點(diǎn)的id或值拼合起來(lái)以用來(lái)傳遞參數(shù)。2010-11-11