浅谈JS中对象的深拷贝和浅拷贝
浅拷贝和深拷贝的'深浅'主要针对的是对象的‘深度’，常见的对象都是'浅'的，也就是对象里的属性就是单个的属性，而'深'的对象是指一个对象的属性是另一个对象，也就是对象里面嵌套对象，就像嵌套函数一样。
为什么要使用深拷贝和浅拷贝呢？
如果现有var obj1 = {...}这个对象，想要复制对象obj1，一贯的做法就是obj2 = obj1，这时虽然obj2拥有了obj1的所有属性，但obj2却不是自由的，因为它的改动会影响到obj1，obj1的改动也会影响到obj2，这不是我们所希望的，所以要用到深拷贝和浅拷贝。
深拷贝和浅拷贝就是为解决对象的直接赋值后依然'连接'的问题，也就是共用一个引用，一个改变会影响到另一个。下面是常见的浅拷贝：
var obj = {
a:10,
b:20
};
function copy(obj) {
var newobj={};
for(arr in obj){
newobj[arr]=obj[arr]
}
return newobj;
}
obj2 = copy(obj); //成功复制出obj
console.log(obj2); Object {a: 10, b: 20}
obj2.a = 5; //更改了obj2的a
console.log(obj2.a); //5
console.log(obj.a); //10，obj2的改变不影响obj，说明拷贝后的对象和之前的对象不存在共用一个引用
Paste_Image.png
浅拷贝可以解决常见的现象，但倘若对象不是常见的那种呢？比如说对象里还有子对象，那么用浅拷贝就不够彻底，比如如下代码：
var obj = {
a: 10,
b: 20,
omg: {
name: 'xuguojun',
sex: 'male'
}
}
function copy(obj){
var newobj = {};
for(arr in obj){
newobj[arr] = obj[arr]
}
return newobj;
}
obj2 = copy(obj);
console.log(obj2); //成功复制出obj
obj2.omg.name = 'PDD'; //改变obj2.omg.name的值为'PDD'
console.log(obj2.omg.name);
console.log(obj.omg.name); //obj.omg.name的值也随着改变
Paste_Image.png
上面代码中，拷贝完成后更改了obj2.omg.name,结果obj.omg.name也随之改变，说明omg依然存在共用同一个引用的现象，所以浅拷贝拷贝的并不彻底 。这时候深拷贝就该上场了，它能用递归的思想继续深挖，直到最底层为止。
下面就是深拷贝了：
var obj = {
a: 10,
b: 20,
omg: {
name: 'xuguojun',
sex: 'male'
}
}
function deepcopy(obj){
var newobj = {};
for(arr in obj){
if (typeof obj[arr]==='object' && obj[arr] !== null) {
newobj[arr] = deepcopy(obj[arr]); //递归，核心代码
} else {
newobj[arr] = obj[arr];
}
}
return newobj;
}
obj2 = deepcopy(obj);
console.log(obj2);
obj2.omg.name = 'PDD';
console.log(obj2.omg.name);
console.log(obj.omg.name);
Paste_Image.png
通过上述代码可看出深拷贝拷贝的非常彻底，做到真正意义上的杜绝共用一个引用的问题。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017.01.08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读