克隆包含 深度克隆
和 浅度克隆
,说简单点,就是将引用对象在堆中创建新的内存地址。
浅度克隆
var a = [1, 2, 3, 4];
var b = a;
复制代码
这种结果大家都应该可以想到,无论a,b怎么修改,他们最终的结果都会一样。原因是a,b是存在栈中的变量,它们指向堆中存储的地址。
伪深度克隆
var a = [1, 2, 3, 4];
var b = a.slice();
var c = a.contact();
var d = [...a];
复制代码
这种应该是大家比较常用的克隆的办法,但是很可惜并不是真正的深度克隆。
可以看到,拷贝的不彻底啊,b对象的一级属性确实不受影响了,但是二级属性还是没能拷贝成功,仍然脱离不了a的控制,说明slice根本不是真正的深拷贝。还包括 Object.assign({})。 下面是来自知乎的一张原理图:
第一层的属性确实深拷贝,拥有了独立的内存,但更深的属性却仍然公用了地址,所以才会造成上面的问题。
深度克隆
1.递归
function deepClone(obj){
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
for(key in obj){
if(obj.hasOwnProperty(key)){
//判断ojb子元素是否为对象,如果是,递归复制
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是,简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
复制代码
这就是最常见的递归深度克隆,非常普通,非常实用,效果也是非常好。
2.JSON对象
function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
复制代码
这个算是一个巧办法,利用 JSON 对象的相互转换实现深度克隆。
3.工具函数
这里就不举例了,比如 jQuery 的 Extend ,Underscore 的 Extend