JS浅克隆与深克隆

为什么会有克隆这么个玩意呢？

上代码：

var a = [1,2,3];
var b = a;
a[1] = 4;
console.log(b[1]);  // 4

这就是我们为什么提到克隆的原因。我只不过改了a数组的内容，怎么b数组的内容也跟着一起变了嘞？这里需要知道a和b在栈和堆中的存储情况

看图：

大概说下，数组的内容是存储在堆中的，而a和b不过是作为一个引用（也可以参考C语言的指针）指向了数组内容的存储地址，上面var b = a;只不过是将a引用赋值给了b，并不是将数组内容拷贝一份出来，然后让b指向新拷贝出来的数组内容。所以a或者b修改数组内容，其实都是修改的同一个。

又因为基本变量（js的原始值undefined，null，number，string，boolean类型）一般都会直接放在栈中，因此克隆只针对对象、数组、函数等复杂数据。

浅克隆

上面栗子就是浅克隆，说白了就是只复制引用地址，不复制内容。实现方法如上栗子。

深克隆

那当然就是连同内容一起复制啦。

看代码：

function deepClone(val) {
    // 如果不是对象类型，那么就直接返回
    if (typeof val != "object") {
        return val;
    }
    var result = {};
    for (var i in val) {
        result[i] = deepClone(val[i]);  // 递归循环完成深克隆
    }
    return result;
}

将刚才那个栗子中修改一下

var a = [1,2,3];
var b = deepClone(a);
a[1] = 4;
console.log(b[1]);  // 2

然后我们就可以发现这个结果已经是我们想要的了。

那么现在就让我们偷个懒，要是每次都要写这么个函数也挺累的。

我们再把刚才的那个栗子修改一下，这次不使用深克隆函数了。

var a = [1,2,3];
var b = JSON.parse(JSON.stringify(a));
a[1] = 4;
console.log(b[1]);  // 2

诶！一行代码解决了耶。

这里的原理在于将对象转换成JSON字符串后又将JSON字符串重新生成为一个一模一样的新的对象，于是就间接地帮我们完成了深克隆的工作。

总结

深浅克隆只要理解了堆栈其实就是这么一回事的东西，没啥大不了的 _(:з」∠)_