如果你只需要一行黑科技代码就可以实现深拷贝
1 var copyObj = {2 ????name: ‘ziwei‘,3 ????arr : [1,2,3]4 }5 ?6 var targetObj = JSON.parse(JSON.stringify(copyObj))7 ?8 此时 copyObj.arr !== targetObj.arr ?已经实现了深拷贝 别着急走,利用window.JSON的方法做深拷贝存在2个缺点:
- 如果你的对象里有函数,函数无法被拷贝下来
- 无法拷贝copyObj对象原型链上的属性和方法
当然,你明确知道他们的缺点后,如果他的缺点对你的业务需求没有影响,就可以放心使用了,一行原生代码就能搞定。
目前我在开发业务场景中,大多还真可以忽略上面2个缺点。往往需要深拷贝的对象里没有函数,也不需要拷贝它原型链的属性。
下面我会尽可能全面的讲解清楚JS里对象的拷贝,要讲清楚拷贝,你需要一点点前置知识
你需要的前置知识:
- 理解JS里的引用类型和值类型的区别,知道Obj存储的只是引用
- 对原型链有基本了解
关于对象拷贝的全部:
- 1.深拷贝、浅拷贝是什么
- 2.深拷贝、浅拷贝在业务里的最常见的应用场景
- 3.深拷贝和浅拷贝的实现方式
- 4.总结与建议
1.深拷贝、浅拷贝是什么
只有对象里嵌套对象的情况下,才会根据需求讨论,我们要深拷贝还是浅拷贝。
比如下面这种对象
1 var obj1 = {2 ????name: ‘ziwei‘,3 ????arr : [1,2,3]4 }因为,如果是类似这样{name: ‘ziwei’},没有嵌套对象的对象的话,就没必要区分深浅拷贝了。只有在有嵌套的对象时,深拷贝和浅拷贝才有区别
调用shallowCopy()后,obj2拷贝obj1所有的属性。但是obj2.arr和obj1.arr是不同的引用,指向同一个内存空间
1 var obj2 = shallowCopy( obj1 , {})2 ?3 console.log( obj1 !== obj2 ) ??????????????????// true ???无论哪种拷贝,obj1和obj2一定都是2个不同的对象(内存空间不同)4 ?5 console.log( obj2.arr === obj1.arr ) ???????????// true ??他们2个对象里arr的引用,指向【相同的】内存空间所以, 2个obj经过拷贝后,虽然他们属性相同,也的确是不同的对象,但他们内部的obj都是指向同一个内存空间,这种我们叫浅拷贝
调用deepCopy()后,obj2拷贝obj1所有的属性,而且obj2.arr和obj1.arr是指向不同的内存空间,
2个obj2除了拷贝了一样的属性,没有任何其他关联。
1 var obj2 = deepCopy( obj1 , {})2 ?3 console.log( obj1 !== obj2 ) ??????????????????// true ???无论哪种拷贝,obj1和obj2一定都是2个不同的对象(内存空间不同)4 ?5 console.log( obj2.arr === obj1.arr ) ???????????// false ??他们2个对象里arr的引用,指向【不同的】内存空间所以, 2个obj经过拷贝后,除了拷贝下来相同的属性之外,没有任何其他关联的2个对象,这种我们叫深拷贝
JS的深拷贝/浅拷贝
原文地址：https://www.cnblogs.com/shiweida/p/8763245.html