js中的extend,可實現淺拷貝深拷貝


js中的extend

 

1.    JS中substring與substr的區別

之前在項目中用到substring方法,因為C#中也有字符串的截取方法Substring方法,當時也沒有多想就誤以為這兩種方法的使用時一樣的。這樣就直接按照在C#中使用Substring的方式,直接在js中用了substring,在實際的項目中,有時候能得到正確的結果,但是有時候得到的結果卻讓人匪夷所思,后來仔細的調試跟蹤之后才發現,原來是Js中substring的方法跟C#中的Substring方法不一樣。關於C# 中的字符串截取方法已經很簡單了,這里就不再敘述了。主要講一個js中的substring方法,順便再講一下substr方法。

Substring:

該方法可以有一個參數也可以有兩個參數。

l  一個參數:

示例: var str=“Olive”;

               str.substring(3);

        結果:“ve”

        說明:當substring只有一個參數時,參數表示從字符串的第幾位開始截取,

直截取到字符串結尾。

l  兩個參數:

        示例:var str=“Olive”;

1)       Str.substring(3,4);

2)       Str.substring(3,2);

           結果:1) “v”  2) 0

           說明:當substring有兩個參數時,第一個參數表示從字符串的第幾位開始截取,第二個參數表示截取到字符串的第幾位。這點是個C#中字符截取不同的一點,所以才會導致不同的結果。

Substr:

該方法也可以有一個或兩個參數。

l  一個參數:

    說明:substr一個參數時,作用跟substring方法一個參數時一樣。

l  兩個參數:

    示例:var str=“Olive”;

1)       Str.substr(3,2);

2)       Str.substr(3,4);

        結果:1) “ve” 2) “ve”

        說明:substr有兩個參數時,第一個參數表示從字符串的第幾位開始截取,第二個參數表示截取多少位字符串。這點跟C#中字符截取相同的,所以在以后的使用中,如果想要避免出現截取的問題最好還是使用substr。

2 $.extend()

因為項目中有些地方看到有用到這個方法,當時也不知道是什么意思,見的多了就想了

解一下。原來這個方法還是挺有用的,多用在編寫插件,當然,它本身也有一些重載原型。也可是實現靜態方法:

$.extend({
sayHello: function (name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //調用
$.sayHello('Wayou'); //帶參調用

2.1 extend(result,item1,item2…..)

這里這個方法主要用來合並,將所有的參數項都合並result中,並返回result,但是這

樣就會破壞result的結構。

2.2 extend({},item1,item2,……)

用這個方法,可以將所得的結果全部合並在{}中,並返回,而且還不會破壞原有的項的結構。

示例:

Var item={name:”olive”,age:23};

Var item1={name:”Momo”,sex:”gril”};

Var result=$.extend({},item,item1);

結果:

Result={name:”Momo”,age:23,sex:”gril”};

說明:

以上的結果表明extend方法將所有的項都合並到了{}中,但是,細心一點就會發現,其中item1中的name:“Momo” 將item中的name:“olive”給覆蓋了,這是怎么回事?請接着往下看。

2.3 extend(bool,{},item1,item2….)

Extend方法還有帶bool型參數的重載。

bool型參數為true表示深拷貝,為false時表示淺拷貝。具體可以通過一下示例來說明:

示例:

var item={name:“olive”,age:23,address{provice:”河南”,city:”鄭州”}};

var item1={sex:”girl”,address{city:”北京”}};

var result=$.extend(true,item,item1);

var result1=$.extend(false,item,item1);

結果:

Result={name:“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

Result1={name:“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

說明:

以上結果說明,當參數為ture時,即為深拷貝,當子項item1中的子項有與item中的子項相同屬性的值不一樣時,item1中子項的值會將item子項中的值給覆蓋,當子項item1的屬性跟item中的屬性不同時,會與item進行合並。

當參數為false時,子項item1中的子項中與item中的子項屬性相同時,item1中子項的屬性值會將item中的值給完全覆蓋。

2.4 $.extend(item)

該方法是將item合並到Jquery的全局對象中去,相當於為Jquery全局對象添加了一個

靜態方法(對應這里的靜態方法,當然還有實例方法,在后邊有介紹)。

     示例:

           $.extend({SayHello:function(value){alert(“hello “+value);}});

           這樣寫過之后,就可以直接調用SayHello方法:

           $.SayHello(“Olive”);

     說明:該方法相當於為Jquery類添加了新的方法。

2.5 $.fn.extend(item)

上邊提到的$.extend(item)說是為Jquery類添加了靜態方法,那么這里的$.fn.extend(item

)就是為每一個實例添加一個實例方法了。

     示例:

         $.fn.extend({hello:function(value){alert(“hello “+value);}});

         這樣寫過之后,在獲取每一個示例之后,都可以調用該方法:

         $(“#id”).hello(“Olive”);

 

3.(function($){….})(jQuery)

初次看到這種寫法時,一頭霧水,不知所雲。在網上查找了一些資料之后才有點明白。

我們先看第一個括號里邊的內容:function($){….},這不就是一個匿名的函數嗎?但是它的形參比較奇怪,是$,這里主要是為了不與其它的庫沖突。

這樣我們就比較容易理解第一個括號內的內容就是定義了一個匿名函數,我們在調用函數的時候,都是函數名后邊加上括號以及實參,但是由於操作符的優先級我們定義的匿名函數也需要用()括起來。

現在我想大家已經很清楚這句話是什么意思了吧。第一個括號表示定義了一個匿名函數,然后第二個函數表示為該函數傳遞的參數,整個結合起來意思就是,定義了一個匿名函數,然后又調用該函數,該函數的實參為jQuery。

相當於:function fun($){…};fun(jQuery);

這種方法多用於存放開發的插件,執行其中的代碼時,Dom對象並不一定加載完畢。於此相反的是$(function(){}),這種方法在使用時頁面的Dom對象已經加載完畢了。事實上該方法的全寫是:$(document).ready(function(){});


免責聲明!

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



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