Jquery的擴展方法extend詳解


今天研究了下Jquery的擴展方法extend。

1.extend(obj,item1,item2,item3...);

這段代碼的含義是將src1,scr2等所有項合並到obj對象中,但是同樣存在一個問題,這樣合並會修改到obj的整個結構。

2.var result = $.extend({},item1,item2,item3...);

這個方法巧妙地運用了extend的特性 將一個空對象與所有item合並,並通過返回值的形式獲取到一個新的對象。如下所示:

var result = $.extend({},{name:"zx",age:21},{name:"clt",sex:"man"});

輸出結果為{name:"clt",age:21,sex:"man"},由此我們可以看出在合並中, 如果存在相同的屬性名,則后者會覆蓋前者。

3.接下來是我們通常在插件中會看到的,擴展jq類的靜態方法。如下所示:

$.extend({say:function(){alert("hello");}});

這樣就是將src合並到jquery的全局對象中,換句話說也就是擴展了整個jq類的靜態方法,我們可以通過$.say()進行調用。

舉一反三,既然可以擴展jq類,自然也能擴展我們的自定義對象。

例如:$.extend(obj,{say:function(){alert("hello");}});

我們可以自定義一個obj對象,然后擴展他的say方法,通過obj.say()調用。

4.$.fn.extend(say:function(){alert($(this).text());}})

在jq源碼中,$.fn = $.prototype,也就是jq類的原型鏈,該方法將src合並到jquery的實例對象中去,需要一個實例化的jq對象才可以調用,如下所示:

通過$("#test").say()可以調用到擴展的say方法。

5.var result=$.extend( true or false, {},
{ name: "zx", location: {city: "上饒",county:"USA"} },
{ last: "clt", location: {state: "江西",county:"China"} } );

最后我們需要了解$.extend中的傳參,第一個參數為ture or false,分別代表執行深拷貝 or 淺拷貝。結果如下所示:

{ name: "zx", location: {city: "上饒",county:"China",state:"江西"} ,last:"clt"}。

當傳入false時,代表執行淺拷貝,結果如下所示:

{ name: "zx", location: {state: "江西",county:"China"} ,last:"clt"}。

通過觀察結果,我們可以得到以下結論。當參數為ture時,即為深拷貝,當第一個對象的location與第二個location的值不一樣時,前者會將后者中的值給覆蓋,換而言之,當不同時,則會進行合並。

當參數為false時,子項location屬性相同時,后者location的屬性值會將前者的值給完全覆蓋。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM