先说说我自己曾经遇到的坑吧。
记得第一次遇到深拷贝的问题是一年前在前台用html做一个渲染楼房落位图时出现的。后台返回了一个大json。我var个一个新对象,并把json赋给它。在对这个“复制体”进行改造的时候,我发现“本体”也跟着一块儿被改造了。
原因:我var的这个新对象,只是把这个json浅复制了,它仅仅只是指针指向了原来的json。事实上现在两个对象共用了一块内存区域,所以才会出现那种“修改一个,全部被改动“的情况。
我要的并不是与原来的对象公用内存,而是复制出一个独立的个体。怎么办,这里我们就需要对对象进行深复制了,也就是传说中的深拷贝。
下面就罗列一下实现深拷贝的几个常见方法:
1、JSON解析方法,简单暴力的黑科技
newObj = JSON.parse( JSON.stringify(obj) )
此方法简单暴力,但是无法深复制function,且原型链被毁坏。原理是把obj转换成了字符串(此时开辟了新的内存),再把字符串转成obj。此方法已经满足大部分项目需求,简单好用。
2、利用jQuery的extend实现深拷贝和浅拷贝。带上true为深拷贝。更详细的内部实现,可以去看看JQ的extend的源码,也不长。
var
obj
=
{
str
:
'String'
};
var
a
=
{};
var
b
=
{
key1
:
obj
,
key2
:
obj
};
var
c
=
$
.
extend
(
true
,
a
,
b
);
// c.key1 === c.key2 -> false
3、通过递归调用来实现
function deepCopy(obj){
var objArray = Array.isArray(obj) ? [] : {};
if(obj && typeof obj === "object"){
for(key in obj){
if(obj.hasOwnProperty(key)){
if(obj[key] && typeof obj[key] == "object"){
objArray[key] = this.deepCopy(obj[key]);
}else{
objArray[key] = obj[key];
}
}
}
}
return objArray;
}