今天研究了下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的屬性值會將前者的值給完全覆蓋。
