JavaScript高级---（7）浅拷贝与深拷贝

一、浅拷贝

在JavaScript中，分为简单数据类型（数字、字符等）和复杂数据类型（对象、数组等），一般简单数据类型被存储在栈内存；而复杂数据类型存储在堆内存，其地址存储在栈内存里面。
所以一般将复杂数据类型赋值给其他变量的时候，一般是将其地址复制，如果对赋值后的数据进行操作，很容易改变原本的复杂数据类型。

我们举个例子，首先定义一个对象，里面有两个简单数据类型和另一个对象

        var obj = {
     
            id: 1,
            name: "andy",
            msg: {
     
                age: 18 // 将地址拷贝
            }
        };

        var o = {
     };
        for (var k in obj) {
     
            // k是属性名
            o[k] = obj[k];
        }
        console.log(o);
        o.msg.age = 20;
        console.log(o);
        console.log(obj);

我们先打印对象o，发现赋值完成：

接下来我们仅改变对象o里面age的属性，观察两个对象的age属性。

我们明明只改变了o的age，为什么obj的也会随着改变呢？这是因为在浅拷贝的情况下，里面复杂数据类型的赋值是地址的值传递，修改一个对象的同时，另一个对象也会改变。下面这张图可以更直观的理解。

js（es6）也为我们提供了浅拷贝的语法糖，同样可以实现浅拷贝，语法如下：
Object.assign(target, …sources)

		Object.assign(o, obj);
        o.msg.age = 20;
        console.log(o);
        console.log(obj);

二、深拷贝

深拷贝很简单理解了，就是将赋值后的每一个变量都单独指向，与原先的数据脱离，不再公用变量。
下图有助你的理解：

原生JS递归实现深拷贝：

        var obj = {
     
            id: 1,
            name: "andy",
            msg: {
     
                age: 18
            },
            color: ['red', 'pink']

        };

        var o = {
     };

        // 递归实现深拷贝
        function deepCopy(newObj, oldObj) {
     
            for (var key in oldObj) {
     
                // 判断数据类型
                item = oldObj[key];
                if (item instanceof Array) {
     
                    newObj[key] = [];
                    deepCopy(newObj[key], item);
                } else if (item instanceof Object) {
     
                    newObj[key] = {
     };
                    deepCopy(newObj[key], item);
                } else {
     
                    newObj[key] = item;
                }
            }
        }
        deepCopy(o, obj);
        o.msg.age = 19;
        console.log(o);
        console.log(obj);

可以看到修改一个对象的值，另一个对象不受影响。

下一篇：JavaScript高级—（8）正则表达式