js之深浅克隆（深浅拷贝）

目录

1.浅克隆（浅拷贝）

2.深克隆（深拷贝）

总结

---

1.浅克隆（浅拷贝）

        无法进行引用类型（地址和地址中数据的）双重拷贝，从而导致克隆者和被克隆者指向同一地址后，任何一方发生数据的改变都会影响对方的数据。

        克隆者与被克隆者之间相互影响。

var arr = [{a: 1,b: [1, 2, 3]}, 2, 3, 4];

        function clone(param) {
            if (Array.isArray(param)) {//  判断是不是数组
                var newArr = [];
                for (var i = 0; i < param.length; i++) {
                    newArr.push(param[i]);
                };
                return newArr;
            } else if (Object.prototype.toString.call(param) === '[object Object]') {//  判断是不是对象

                var newObj = {};
                for (var k in param) {
                    newObj[k] = param[k];
                };
                return newObj;
            } else {
                //  函数 与 基本数据类型 可以直接返回
                //  函数就是为了被调用：不需要所谓的克隆，需要函数内部的数据时执行调用就好。
                //  基本数据类型可实现数据的完全拷贝
                return param;
            };
        };

        var clonedRes = clone(arr);

        console.log(clonedRes);

输出结果如下图：

 看起来，clonedRes和arr的确一模一样。

接下来，看看改变clonedRes中的数据时会发生什么吧？

clonedRes[0].a = 8;

console.log(arr);

结果如下：

 可见：改变clonedRes中的数据，也会引发arr中数据的改变。

这就是浅拷贝的不足之处了，所以才有了深拷贝的存在。

---

2.深克隆（深拷贝）

克隆地址和数据，直到克隆到引用类型的最深层（存储的都是基本数据类型）时，形成绝对的结构拷贝，使拷贝者拥有完全一样的独立结构和独立数据，从而实现深克隆。

克隆者与被克隆者之间互不影响。

var arr = [{ a: 1, b: [1, 2, 3], }, 2, 3, 4];

        function clone(param) {
            // 通过条件限制来进行不同类型数据的克隆
            if (Array.isArray(param)) {//  判断是不是数组
                var newArr = [];
                for (var i = 0; i < param.length; i++) {
                    //  利用递归 对数组类型进行浅拷贝后，再调用clone进行一次浅拷贝，从而实现深拷贝
                    newArr.push(clone(param[i]));
                };
                return newArr;
            } else if (Object.prototype.toString.call(param) === '[object Object]') {//  判断是不是对象

                var newObj = {};
                //  遍历对象 for in
                for (var k in param) {
                    //  利用递归 对对象类型进行浅拷贝后，再调用clone进行一次浅拷贝，从而实现深拷贝
                    newObj[k] = clone(param[k]);
                };
                return newObj;
            } else {
                //  函数 与 基本数据类型 可以直接返回
                //  函数就是为了被调用：不需要所谓的克隆，需要函数内部的数据时执行调用就好。
                //  基本数据类型可实现数据的完全拷贝
                return param;
            };
        };

        var clonedRes = clone(arr);

结果如图：

 仍测试改变clonedRes中的数据时，arr是否改变？

clonedRes[0].a = 8;

console.log(arr);

已经完成深拷贝了，当然不会改变了。

其实，完成深拷贝后，克隆者和被克隆者就像是一对双胞胎，看起来一模一样，但实际上就是两个独立的个体。

当独立的个体各自做自己独立的事情时，当然不会影响对方啦~

---

总结

学习深浅克隆，更深的感受到了不同数据类型之间的细微差别。

所以，按实际情况实现相应功能总是不会错的。