码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript深拷贝实现原理简析

时间:2018-07-27 23:15:44      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:数据   引用类型   color   原理   log   fun   let   实现   ==   

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

JavaScript深拷贝实现原理简析

标签:数据   引用类型   color   原理   log   fun   let   实现   ==   

原文地址:https://www.cnblogs.com/yehaojun/p/9380020.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!