Jquery的深度拷贝和深度克隆

时间：2021-02-23 09:44:31

　　有人问，拷贝和克隆不都是“复制”的意思吗。

　　这位看官问的好，一般情况下是一样的，但在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）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。

 var object1 = {

     apple: 0,

     banana: {

         weight: 52,

         price: 100

     },

     cherry: 97

 };

 var object2 = {

     banana: {

         price: 200

     },

     durian: 100

 };

 //默认情况浅拷贝

 //object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

 //object2的banner覆盖了object1的banner，但是weight属性未被继承

 //$.extend(object1, object2);

 //深拷贝

 //object1--->{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

 //object2的banner覆盖了object1的banner，但是weight属性也被继承了呦

 $.extend(true,object1, object2);

 console.log('object1--->'+JSON.stringify(object1));

$.clone()

　　语法：$(selector).clone(includeEvents)

　　用途：用于处理dom的克隆

　　.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了

 $("div").on('click', function() {//执行操作})

 //clone处理一

 $("div").clone()   //只克隆了结构，事件丢失

 //clone处理二

 $("div").clone(true) //结构、事件与数据都克隆

相关文章