JavaScript深拷贝实现原理简析

Posted 2020-12-06 hongqdt

　　Why: 引用类型拷贝为了不出现数据共享问题，需要使用深拷贝。
　　
　　So:
　　
　　1.内部原理：
　　
　　1 function inCopy(obj1,obj2) {
　　
　　2 var obj1 = obj1 || {};//容错处理
　　
　　3 for (var k in obj2) {
　　
　　4 if(obj2.hasOwnProperty(k)){ //只拷贝实例属性，不进行原型的拷贝
　　
　　5 if(typeof obj2[k] == ‘object‘) { //引用类型的数据单独处理
　　
　　6 obj1[k] = Array.isArray(obj2[k])?[]:{};
　　
　　7 inCopy(obj1[k],obj2[k]); //递归处理引用类型数据
　　
　　8 }else{
　　
　　9 obj1[k] = obj2[k]; //值类型的数据直接进行拷贝
　　
　　10 }
　　
　　11 }
　　
　　12 }
　　
　　13 }
　　
　　2. 除了递归，我们还可以借用JSON对象的parse和stringify：
　　
　　function deepClone(obj){
　　
　　let _obj = JSON.stringify(obj),
　　
　　objClone = JSON.parse(_obj);
　　
　　return objClone
　　
　　}
　　
　　let a=[0,1,[2,3],4],
　　
　　b=deepClone(a);
　　
　　a[0]=1;
　　
　　a[2][0]=1;
　　
　　console.log(a,b);
　　
　　3.除了上面两种方法之外，我们还可以借用JQ的extend方法。
　　
　　$.extend( [deep ], target, object1 [, objectN ] )
　　
　　deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝
　　
　　target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
　　
　　object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。
　　
　　let a=[0,1,[2,3],4],
　　
　　b=$.extend(true,[],a);
　　
　　a[0]=1;
　　
　　a[2][0]=1;
　　
　　console.log(a,b);
　　
　　可以看到，效果与上面方法一样，只是需要依赖JQ库。