Jquery的深度拷貝和深度克隆
有人問,拷貝和克隆不都是“複製”的意思嗎。
這位看官問的好,一般情況下是一樣的,但在jquery中卻有些不同。jqurey深度拷貝一般只js物件的複製,是$.extend()方法,jquery深度克隆一般指dom物件的複製,是$.clone()方法。
$.extend()
語法:jQuery.extend( [deep ], target, object1 [, objectN ] )
用途:複製js物件,或將兩個或更多物件的內容合併到第一個物件。
深淺拷貝對應的引數就是[deep],是可選的,為true或false。預設情況是false(淺拷貝),並且false是不能夠顯示的寫出來的。如果想寫,只能寫true(深拷貝),在預設情況下,通過$.extend()
true
作為該函式的第一個引數,那麼會在物件上進行遞迴的合併(深拷貝)。
淺拷貝(false 預設):如果第二個引數物件有的屬性第一個引數物件也有,那麼不會進行相同引數內部的比較,直接將第一個物件的相同引數覆蓋。
深拷貝(true):如果第二個引數物件有的屬性第一個引數物件也有,還要繼續在這個相同的引數向下一層找,比較相同引數的物件中是否還有不一樣的屬性,如果有,將其繼承到第一個物件,如果沒有,則覆蓋。
1 var object1 = {
2 apple: 0,
3 banana: {
4 weight: 52,
5 price: 100
6 },
7 cherry: 97
8 };
9 var object2 = {
10 banana: {
11 price: 200
12 },
13 durian: 100
14 };
15 //預設情況淺拷貝
16 //object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
17 //object2的banner覆蓋了object1的banner,但是weight屬性未被繼承
18 //$.extend(object1, object2);
19 //深拷貝
20 //object1--->{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
21 //object2的banner覆蓋了object1的banner,但是weight屬性也被繼承了呦
22 $.extend(true,object1, object2);
23 console.log('object1--->'+JSON.stringify(object1));
$.clone()
語法:$(selector).clone(includeEvents)
用途:用於處理dom的克隆
.clone()方法深度 複製所有匹配的元素集合,包括所有匹配元素、匹配元素的下級元素、文位元組點。clone方法比較簡單就是克隆節點,但是需要注意,如果節點有事件或者資料之類的其他處理,我們需要通過clone(ture)傳遞一個布林值ture用來指定,這樣不僅僅只是克隆單純的節點結構,還要把附帶的事件與資料給一併克隆了
1 $("div").on('click', function() {//執行操作})
2 //clone處理一
3 $("div").clone() //只克隆了結構,事件丟失
4 //clone處理二
5 $("div").clone(true) //結構、事件與資料都克隆