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) //结构、事件与数据都克隆
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值