关于 JS 克隆那些事儿

克隆包含 深度克隆 和 浅度克隆，说简单点，就是将引用对象在堆中创建新的内存地址。

浅度克隆

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