JavaScript深拷贝实现原理简析

Posted 2020-12-25 yehaojun

 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库。