JavaScript 浅复制与深复制

目录

• JavaScript 浅复制与深复制
  • 1 赋值

 

JavaScript 浅复制与深复制

1 赋值

在JavaScript中，基本数据类型存在栈中，对象作为引用数据类型存在堆中。
JavaScript赋值，对于栈中基本数据类型的赋值，操作的是栈，传递的是值；对于堆中对象的赋值，操作的是栈，传递的是引用。
以下主要讨论堆中的赋值。
如 obj = obj1; 那么obj和obj1指向同一块内存地址，修改obj或obj1的属性，都会引起内存地址存储内容的修改。

var obj = {a:{b:1}};
var obj1 = obj;
// obj1.a.b = 2;
obj.a.b = 2;
console.log(obj.a.b,obj1.a.b);//2 2

赋值的缺陷在于源对象和赋值对象指向相同的内存地址，联系过于紧密。一旦一方修改，另一方也会随之修改。
克隆很好解决了这个问题，克隆对象和被克隆对象，分别存在于两个不同的内存地址之中。

2 浅克隆

上面谈到，克隆和赋值的最大区别在于，赋值双方指向同一个内存地址，而克隆双方存储在不同的内存地址之中。
克隆又分为浅克隆和深克隆。浅克隆和深克隆主要的差异在于

• 不同点：对于深层属性，浅克隆存在与对源对象的引用关系，而深克隆与源对象之间完全没有引用关系。
• 相同点：相对于赋值来说，克隆和被克隆对象存储在不同内存地址，赋值双方存储在相同内存地址。
  下面介绍浅克隆的常见方式。

2.1 for-in 浅克隆 只能克隆对象第一层的可枚举属性

广度遍历，不做赘述

2.2 cloneNode(false) 浅克隆

cloneNode的作用对象是DOM结点，当参数为false表示浅克隆，为true表示深克隆
cloneNode(false)浅克隆不能克隆子结点，只能进行一层克隆
这种方式存在的问题是：

• 针对结点，无法操作非节点对象
• 不能克隆被addEventListener或onlcick这些用js绑定的事件
• 就算是cloneNode(true),也只能克隆DOM子树，不存在与祖先节点的链接关系。
• 以上两点参考MDN

    //cloneNode浅克隆
    var node = document.querySelector("#aaa");
    node.obj = {
        a: {
            b: 2
        }
    }
    var cNode = node.cloneNode(false);
    document.body.appendChild(cNode);
    console.log(node,cNode); 
    console.log(node.childNodes.length,cNode.childNodes.length);//3 0

2.3 Object.assign() 浅克隆

Object.assign()用于将所有可枚举属性的值从一个或多个源对象复制到目标对象
对于Object.assign()来说, 它拷贝的是属性值。假如源对象的属性值是另一个对象的引用，那么它也只指向那个引用。

    let source = { 'name':'prop',obj:{'name':'objprop',innerObj:{num:1}} };
    let clone = Object.assign({}, source);
    source.name = 'prop1';
    source.obj.name="objprop1";
    source.obj.innerObj.num=99;  //改变克隆目标对象的对象属性，克隆对象也随之改变，说明存在引用关系
    console.log('srcObj', clone); 

2.4 解构 浅克隆

解构是ES6中对赋值运算符的一种拓展，可以很方便地在复杂对象中提取数据字段.
解构可以克隆对象深层属性，然而需要注意的是，对于复杂类型，解构克隆的依然是引用。

    var source = {
        a: 1,
        b: function () { },
        c: {
            d: {
                num: 2,
            }
        }
    }
    var clone = { ...source};
    source.c.d.num = 6;//改变source,clone也随之改变
    console.log('clone', clone);

3 深克隆

3.1 JSON序列化实现深克隆及其缺陷 JSON.parse(JSON.stringify(obj))

序列化期间，存在将对象状态写入到临时或持久性存储区的过程，此后，可以通过从存储区中读取或反序列化对象的状态，重新创建该对象。
因此JSON.parse(JSON.stringify(obj))转换之后不存在引用关系。

    var source = {
        a: 1,
        c: {
            d: {
                num: 2,
            }
        }
    }
    var clone = JSON.parse(JSON.stringify(source));
    source.c.d.num = 6;
    console.log('clone', clone);//clone.c.d.num依然为2，说明不存在引用关系，深层属性也完全被拷贝，看似不存在问题。

这种方法表面上实现了深复制，然而在改变测试用例时，结果却大相径庭。
可以发现函数与symbol被忽略，而正则对象变成了空对象{},日期对象也变成了字符串，没有被还原。
JSON.stringfiy()的问题：
遇到对象中undefined、symbol、函数会自动忽略，跳过他们进行序列化
遇到Date对象会转成字符串，正则对象变为空对象。
非数组对象的属性不能保证以特定顺序出现在序列化后的字符串中

    var source = {
            c: () => console.log('clone'),
            d: /clone/,
            e: Symbol(''),
            f: new Date()
    }

    console.log(JSON.parse(JSON.stringify(source)));

对于循环引用，会抛出异常

    //循环引用，父属性和子属性指向同一个对象
    let obj1 = {};
    var c = {a:1}
    obj1.b = c;
    obj1.b.c = c;
    let obj2 = (JSON.parse(JSON.stringify(obj1)));//Converting circular structure to JSON

问题的根源在于JSON.stringify的机制。对此，可参考MDN对SON.stingify()序列化的限制做出的描述说明

3.2 关于实现深克隆的思考

最近逛论坛也看到过很多实现深克隆的方法，但有些方法存在一些问题。
既然是克隆，免不了对属性对象做广度和深度的遍历。
常见的广度遍历的方式有for-in,Object.keys(),Object.assign()等等，常见的深度遍历手法是递归。
然而不少案例在进行广度遍历时，欠缺对属性可枚举性enumerable的考虑，导致克隆方法存在显著缺陷。
举个栗子：

    function deepClone1(obj) {
        var objClone = Array.isArray(obj) ? [] : {};
        if (obj && typeof obj === "object") {
            for (key in obj) {
                if (obj.hasOwnProperty(key)) {
                    if (obj[key] && typeof obj[key] === "object") {
                        objClone[key] = deepClone1(obj[key]);
                    } else {
                        objClone[key] = obj[key];
                    }
                }
            }
        }
        return objClone;
    }

以上方法使用for-in进行广度遍历，而for-in是无法对非枚举属性进行访问的。
对于正则对象的source属性和flag属性这些不可枚举的属性，采用for-in、Object.assign()、Object.keys()等广度遍历方式均无法访问，从而造成克隆的失败。

3.3 实现深克隆

此方式是对3.1、3.2所列举方式的改进，对一些特殊的对象如正则、日期、函数进行了具体处理。

思路:

/* 
    对象的深复制：
    1 初始化返回的目标对象
        如果没有指定返回目标对象，则利用源对象的构造函数创建目标对象，判断源对象类型，正则对象和日期对象分开复制
            如果源对象是正则对象，抽取源对象属性source和flag放入构造参数中新建正则对象
            如果源对象是日期对象，抽取源对象放入构造参数中新建日期对象
        如果指定了目标对象，进入2
    2 复制属性并返回结果
        首先用getOwnProperty(此方法可获取对象的可枚举不不可枚举属性)获取源对象的一级属性名数组props[]，遍历此数组获取属性名对应的属性描述对象desc。
        使用typeof 把对象和函数分开处理。
        如果是对象：
            将源对象的属性描述对象设置到对应的目标对象属性中
            考虑到对象存在深度关系，设置对象属性的操作用递归处理
        如果是函数：
            正则提取参数列表和函数体，使用构造创建函数的形式，将二者作为参数传进去
            设置value为fn，其他三个描述属性参照描述属性对象
        如果是字面量
            直接将源属性对应的属性名和属性描述设置给目标属性
*/

实现:

    function deepClone(source, clone) {
        //是否存在源对象
        if (!source) return {};
        //是否指定返回对象
        if (!clone) {
            //正则和日期对象分别处理
            switch (source.constructor) {
                case RegExp:
                    clone = new RegExp(source.source, source.flag);
                    break;
                case Date:
                    clone = new Date(source);
                    break;
                default:
                    clone = new source.constructor();
                    break;
            }
        }
        //获取对象一级属性名数组
        let props = Object.getOwnPropertyNames(source);
        for (let i = 0; i < props.length; i++) {
            //获取属性描述对象
            let desc = Object.getOwnPropertyDescriptor(source, props[i]);
            if (typeof desc.value === "object") {
                //递归
                let o = deepClone(desc.value);
                //设置目标对象属性
                Object.defineProperty(clone, props[i], {
                    configurable: desc.configurable,
                    writable: desc.writable,
                    enumerable: desc.enumerable,
                    value: o
                })
            }
            else if (typeof desc.value === "function") {
                let fnStr = desc.value.toString().replace(/\n/g, "");
                //非贪婪匹配，获取参数列表
                let arg = fnStr.match(/\((.*?)\)/)[1];
                //贪婪匹配，获取函数体
                let content = fnStr.match(/{(.*)}/)[1];
                let fn = new Function(arg, content);
                //设置函数名
                Object.defineProperty(fn, "name", {
                    writable: true,
                    value: desc.value.name
                });
                //设置函数属性
                Object.defineProperty(clone, props[i], {
                    configurable: desc.configurable,
                    enumerable: desc.enumerable,
                    writable: desc.writable,
                    value: fn
                });
            }
            else {
                // 属性值是字面量
                Object.defineProperty(clone, props[i], desc);
            }
        }
        return clone;
    }

测试用例

    var obj = {
        a: 1,
        b: "a",
        c: true,
        d: function (a, b) {
            if (a > 10) a = 10;
            if (b > 5) {
                b = 5;
            } else if (b < 0) {
                b = 0;
            }
            console.log(a + b);
        },
        e: [1, 2, 3, 4],
        f: {
            g: ["a", "b", "c"],
            h: new Date(),
            i: /^[a-z]+$/g,
            j: {
                k: {

                },
                l: [true, false],
                m: [
                    { id: 1001, name: "abc1" },
                    { id: 1002, name: "abc2" },
                    { id: 1003, name: "abc3" }
                ]
            }
        }
    }
    Object.defineProperties(obj.f.j, {
        n: {
            value: function () {
                console.log("abcd");
            }
        },
        o: {
            value: 10,
            enumerable: true
        },
        p: {
            value: [1, 2, 3],
            writable: true
        },
        q: {
            value: true,
            writable: true,
            enumerable: true
        }
    });


    Object.defineProperties(obj.f.j.k, {
        r: {
            value: function () {

            },
            writable: true
        },
        s: {
            value: { a: 1 },
            enumerable: true
        }
    });

    var obj1 = deepClone(obj);

    obj.f.j.p[2] = 10;//obj改变，obj1不改变，不存在引用关系
    console.log(obj, obj1);

效果

至此，方法已经趋于成熟，能对一些常见的对象进行深拷贝，应付日常所需。但是对于一些复杂的情况，如拷贝Vue实例等，可能还存在问题。
这里推荐一个更强大的第三方库lodash作为参考 loadash cloneDeep。