JS 中的 assign 方法究竟是 “深克隆” 还是 “浅克隆”?

先说一下答案:assign做的是浅克隆。 

“第一层是深克隆,下面的每一层做的是浅克隆” 这种说法其实是错误的。

   在我们去探究assign是深克隆还是浅克隆之前,我们必须先明白究竟什么是深克隆、什么是浅克隆?

问了一位大佬,是这么回答的

深浅克隆本质是看克隆后有没有指向同一个内存空间 - 牛客_上岸酱

这就是深、浅克隆的核心区别,网上有数不胜数的回答,但很少有这句话分析地如此简单而又透彻。

   回顾一下assign的用法

let obj2 = Object.assign({}, obj1);

assign发挥的作用,就是将obj1的属性克隆到一个空对象(取决于obj1的数据类型)中,然后让obj2指向这个对象。

我们一起看一个例子: 

let obj1 = {
  m: 1,
  n: 2,
  attr: {
    name: 'Jack',
    age: 18
  }
}

let obj2 = Object.assign({}, obj1);

obj1.attr.name = 'Tom';
console.log( obj1.attr.name );  // Tom
console.log( obj2.attr.name );  // Tom

obj2.attr.name = 'Jarry';
console.log( obj1.attr.name );  // Jarry
console.log( obj2.attr.name );  // Jarry

可以看到,obj1与obj2的attr依旧是耦合的状态,所以,很明显assign做的就是浅克隆

   还有很多人说,第一层是深克隆,更深的依旧是浅克隆

首先,这种说法一定是错误的。

按照这种说法,由obj1克隆出obj2,assign做的是深克隆。

但我们仔细观察上面的代码,obj2指向的对象,其实并非由assign创建,而是事先由我们创建。assign做的,只是将obj1的属性,克隆到这个事先被我们创建好的空对象中罢了。

注意事项:

  • assign在做属性拷贝过程,可能会产生异常,比如目标对象的某个只读属性和源对象的某个属性同名,这时该方法会抛出一个 TypeError 异常,拷贝过程中断,已经拷贝成功的属性不会受到影响,还未拷贝的属性将不会再被拷贝。
  • Object.assign() 拷贝的是属性值。假如源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值

它无法实现多层的深克隆

  我们来实现一个简单的多层深克隆

function deepCopy(o,c){
  var c = c || {}
  for(var i in o){
    if(typeof o[i] === 'object'){
      // 要考虑深复制问题了
      if(Object.prototype.toString.call(o[i]).slice(8, -1) === Array){
        // 这是数组
        c[i] =[];
      }else{
        //这是对象
        c[i] = {}
      }
      deepCopy(o[i],c[i])
    }else{
      c[i] = o[i]
    }
  }
  return c
}

这个方法只能作为一种思路,其在真正的应用中,还是会出现很多的问题。

  • 例如出现循环对象该如何处理?(a对象某个属性指向b对象,b对象中某个属性又是指向a对象)
  • 当对象的属性较多、深度够大时,使用递归,在性能上,也有很大的问题。

  ​​​​​​​ 目前,最好的解决方式,就是 lodash 中的 .cloneDeep(value) 方法,对ES6新增加的大多数数据类型都有考虑,性能上也是十分不错的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

麦田里的POLO桔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值