克隆(深克隆)

克隆,针对的对象是对象,数组,函数等这些复杂的数据

浅克隆就是将栈内存中的引用复制一份,赋给一个新的变量,本质上两个指向堆内存中的同一地址,内容也相同,其中一个变化另一个内容也会变化(根本上改变的是同一个对象)。

深克隆就是创建一个新的空对象,开辟一块内存,然后将原对象中的数据全部复制过去,完全切断两个对象间的联系。

浅克隆:

 1 var obj={
 2         age:11,
 3         name:'xiaoming',
 4         fn:function(){
 5            console.log(this.age);
 6         },
 7         arr:[1,2,3,4]
 8     }
 9     function clone(origin,target){
10         var target=target||{};
11         for(var key in origin){
12             target[key]=origin[key]
13         }
14     }
15     var obj2={};
16     clone(obj,obj2);//浅克隆
17     console.log(obj2);
18     obj2.arr[0]=2;
19     console.log(obj.arr);//[2,2,3,4]
20     console.log(obj2.arr);//[2,2,3,4]
21     obj.age=2;
22     console.log(obj.age);//2
23     console.log(obj2.age);//11
View Code

可以明显的发现浅克隆中,当改变一个对象的原始值属性时,另一个的属性并不会发生改变,而当改变引用值属性的,由于该值指向同一个地址,因此会同时改变,这时候如果想完全切断他们的联系,我们就必须用到深克隆,也就是对于他的引用值属性进行特殊处理。

深克隆:

 1   var obj={
 2         age:11,
 3         name:'xiaoming',
 4         fn:function(){
 5            console.log(this.age);
 6         },
 7         arr:[1,2,3,4]
 8     }
 9     function clone(origin,target){
10         var target=target||{};
11         for(var key in origin){
12             target[key]=origin[key]
13         }
14     }
15     function deepclone(origin,target){
16         var target=target||{};
17         var str=Object.prototype.toString;
18         for(var key in origin){
19             if(origin.hasOwnProperty(key)){
20                 if(typeof origin[key] === 'object' && origin[key] !==null){
21                     if(str.call(origin[key])==='[object Object]'){
22                         // 对象值
23                         target[key]={};
24                     }else{
25                         // 数组
26                         target[key]=[];
27                     }
28                     deepclone(origin[key],target[key])
29                 }else{
30                     target[key]=origin[key];
31                 }
32 
33             }
34         }
35     }
36     var obj2={};
37     deepclone(obj,obj2);
38     obj2.arr[0]=2;
39     console.log(obj.arr);//[1,2,3,4]
40     console.log(obj2.arr);//[2,2,3,4]
View Code
原文地址:https://www.cnblogs.com/xiaofuxuan-blogs/p/9061002.html