Jquery的深度拷貝和深度克隆


  有人問,拷貝和克隆不都是“復制”的意思嗎。

  這位看官問的好,一般情況下是一樣的,但在jquery中卻有些不同。jqurey深度拷貝一般只js對象的復制,是$.extend()方法,jquery深度克隆一般指dom對象的復制,是$.clone()方法。

$.extend()

  語法:jQuery.extend( [deep ], target, object1 [, objectN ] )

  用途:復制js對象,或將兩個或更多對象的內容合並到第一個對象。

  深淺拷貝對應的參數就是[deep],是可選的,為true或false。默認情況是false(淺拷貝),並且false是不能夠顯示的寫出來的。如果想寫,只能寫true(深拷貝),在默認情況下,通過$.extend()合並操作不是遞歸的(淺拷貝);如果第一個對象的屬性本身是一個對象或數組,那么它將完全用第二個對象相同的key重寫一個屬性。這些值不會被合並。然而,如果將 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) //結構、事件與數據都克隆


免責聲明!

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



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