jQuery extend()詳解及簡(jiǎn)單實(shí)例
jQuery extend()詳解及簡(jiǎn)單實(shí)例
使用jQuery的時(shí)候會(huì)發(fā)現(xiàn)，jQuery中有的函數(shù)是這樣使用的：
$.get(); $.post(); $.getJSON();
有些函數(shù)是這樣使用的：
$('div').css();
$('ul').find('li');
有些函數(shù)是這樣使用的：
$('li').each(callback);
$.each(lis,callback);
這里涉及到兩個(gè)概念：工具方法與實(shí)例方法。通常我們說的工具方法是指無需實(shí)例化就可以調(diào)用的函數(shù)，如第一段代碼；實(shí)例方法是必須實(shí)例化對(duì)象以后才可以調(diào)用的函數(shù)，如第二段代碼。jQuery中很多方法既是實(shí)例方法也是工具方法，只是調(diào)用方式略有不同，如第三段代碼。為了更清晰解釋JavaScript中的工具方法與實(shí)例方法，進(jìn)行如下測(cè)試。
functionA(){
}
A.prototype.fun_p=function(){console.log("prototpye");};
A.fun_c=function(){console.log("constructor");};
var a=new A();
A.fun_p();//A.fun_p is not a function
A.fun_c();//constructor
a.fun_p();//prototpye
a.fun_c();//a.fun_c is not a function
通過以上測(cè)試可以得出結(jié)論，在原型中定義的是實(shí)例方法，在構(gòu)造函數(shù)中直接添加的是工具方法；實(shí)例方法不能由構(gòu)造函數(shù)調(diào)用，同理，工具方法也不能由實(shí)例調(diào)用。
當(dāng)然實(shí)例方法不僅可以在原型中定義，有以下三種定義方法：
functionA(){
this.fun_f=function(){
console.log("Iam in the constructor");
};
}
A.prototype.fun_p=function(){
console.log("Iam in the prototype");
};
var a=newA();
a.fun_f();//Iam in the constructor
a.fun_i=function(){
console.log("Iam in the instance");
};
a.fun_i();//Iam in the instance
a.fun_p();//Iam in the prototype
這三種方式的優(yōu)先級(jí)為：直接定義在實(shí)例上的變量的優(yōu)先級(jí)要高于定義在“this”上的，而定義在“this”上的又高于 prototype定義的變量。即直接定義在實(shí)例上的變量會(huì)覆蓋定義在“this”上和prototype定義的變量，定義在“this”上的會(huì)覆蓋prototype定義的變量。
下面看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 adeep copy situation
if ( typeoftarget === "boolean" ) {
deep= target;
//Skip the boolean and the target
target= arguments[ i ] || {};
i++;
}
// Handlecase when target is a string or something (possible in deep copy)
if ( typeoftarget !== "object" && !jQuery.isFunction(target) ) {
target= {};
}
// ExtendjQuery itself if only one argument is passed
if ( i ===length ) {
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;
}
//Recurse if we're merging plain objects or arrays
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;
}
}
}
}
// Returnthe modified object
return target;
};
（1）首先，jQuery和其原型中extend()方法的實(shí)現(xiàn)使用的同一個(gè)函數(shù)。
（2）當(dāng)extend()中只有一個(gè)參數(shù)的時(shí)候，是為jQuery對(duì)象添加插件。在jQuery上擴(kuò)展的叫做工具方法，在jQuery.fn（jQuery原型）中擴(kuò)展的是實(shí)例方法，即使在jQuery和原型上擴(kuò)展相同名字的函數(shù)也可以，使用jQuery對(duì)象會(huì)調(diào)用工具方法，使用jQuery()會(huì)調(diào)用實(shí)例方法。
（3）當(dāng)extend()中有多個(gè)參數(shù)時(shí)，后面的參數(shù)都擴(kuò)展到第一個(gè)參數(shù)上。
var a={};
$.extend(a,{name:"hello"},{age:10});
console.log(a);//Object{name: "hello", age: 10}
（4）淺拷貝（默認(rèn)）：
var a={};
varb={name:"hello"};
$.extend(a,b);
console.log(a);//Object{name: "hello"}
a.name="hi";
console.log(b);//Object{name: "hello"}
b不受a影響，但是如果b中一個(gè)屬性為對(duì)象：
var a={};
varb={name:{age:10}};
$.extend(a,b);
console.log(a.name);//Object{age: 10}
a.name.age=20;
console.log(b.name);//Object{age: 20}
由于淺拷貝無法完成，則b.name會(huì)受到a的影響，這時(shí)我們往往希望深拷貝。
深拷貝：
var a={};
varb={name:{age:10}};
$.extend(true,a,b);
console.log(a.name);//Object{age: 10}
a.name.age=20;
console.log(b.name);//Object{age: 10}
b.name不受a的影響。
var a={name:{job:"Web Develop"}};
var b={name:{age:10}};
$.extend(true,a,b);
console.log(a.name);//age: 10 job: "Web Develop"
//b.name沒有覆蓋a.name.job。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
- jQuery源碼解讀之extend()與工具方法、實(shí)例方法詳解
- jQuery中$.extend()用法實(shí)例
- jQuery中extend()和fn.extend()方法詳解
- 原生js實(shí)現(xiàn)復(fù)制對(duì)象、擴(kuò)展對(duì)象 類似jquery中的extend()方法
- jQuery $.extend()用法總結(jié)
- jQuery學(xué)習(xí)筆記之jQuery.extend(),jQuery.fn.extend()分析
- jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法示例詳解
- jQuery.extend()的實(shí)現(xiàn)方式詳解及實(shí)例
相關(guān)文章
用jQuery技術(shù)實(shí)現(xiàn)Tab頁(yè)界面之二
這個(gè)tab頁(yè)是把數(shù)據(jù)全部取回來再顯示，所以沒有數(shù)據(jù)緩存的特點(diǎn)。但是因?yàn)閿?shù)據(jù)全部是顯示的html代碼，所以對(duì)搜索引擎是友好的，也許對(duì)seo有好處。2009-09-09
這篇文章主要為大家詳細(xì)介紹了jQuery EasyUI Panel面板組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery動(dòng)態(tài)添加可拖動(dòng)元素完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了jQuery動(dòng)態(tài)添加可拖動(dòng)元素的方法,可實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)擊添加元素,并且添加的元素可進(jìn)行拖動(dòng)操作.涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2016-06-06
jquery.validate.js插件使用經(jīng)驗(yàn)記錄
工作中使用到了jquery.validate.js插件，下面將其用法整理一下，方便以后使用2014-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)全選操作案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
jQuery使用jsonp實(shí)現(xiàn)百度搜索的示例代碼
這篇文章主要介紹了jQuery使用jsonp實(shí)現(xiàn)百度搜索，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
jQuery彈出窗口完整代碼,可以實(shí)現(xiàn)窗口居中,居左,居右顯示，比較不錯(cuò)，需要的朋友可以參考下2012-10-10
在開始介紹使用JQuery提交表單之前，先看一下非Ajax提交表單的形式2011-07-07
juqery 學(xué)習(xí)之三 選擇器 子元素與表單
juqery 學(xué)習(xí)之三 選擇器 子元素與表單，學(xué)習(xí)jquery的朋友可以參考下。2010-11-11
JQuery插件Marquee.js實(shí)現(xiàn)無縫滾動(dòng)效果
這篇文章主要介紹了JQuery插件Marquee.js實(shí)現(xiàn)無縫滾動(dòng)效果的相關(guān)資料,需要的朋友可以參考下2016-04-04