删除对象属性节点引发的血案之深拷贝解析

今天遇到一个很有意思的事，propertoes不见了，见下图，之前可能遇到过，但是忘记了，今天记录下来，加深下印象。

起初以为是使用JSON.parse(JSON.stringify(obj))进行深拷贝，把导致特殊的节点被过滤掉了（这个项目里，前面的代码正好遇到过）。后来查了深拷贝的文档后，排除了这个问题。在控制台调试后发现，原来是因为在console.log之后删除了当前节点，居然闹了个大笑话。

不过，这个场景还是得记录下，在删除一个属性之前打印该对象，默认是显示当前属性的，但是点开箭头之后，当前对象又是不包含此属性的。以后再出现这种情况，可以肯定是后面删除了这个属性，可以协助我们定位下问题。

后面补充下JSON.parse(JSON.stringify(obj))进行深拷贝的特殊场景，它只适用于一般数据的拷贝（对象、数组），有以下情况需要注意：

1.如果json里面有时间对象，则序列化结果：时间对象=>字符串的形式；

{
    let obj = {
        age: 18,
        date: new Date()
    };
    let objCopy = JSON.parse(JSON.stringify(obj));
    console.log('obj', obj);
    console.log('objCopy', objCopy);
    console.log(typeof obj.date); // object
    console.log(typeof objCopy.date); // string
}

2.如果json里有RegExp、Error对象，则序列化的结果将只得到空对象 RegExp、Error => {}；

{
    let obj = {
        age: 18,
        reg: new RegExp('\\w+'),
        err: new Error('error message')
    };
    let objCopy = JSON.parse(JSON.stringify(obj));
    console.log('obj', obj);
    console.log('objCopy', objCopy);
}

3.如果json里有 function,undefined，则序列化的结果会把 function,undefined 丢失；

{
    let obj = {
        age: 18,
        fn: function () {
            console.log('fn');
        },
        hh: undefined
    };
    let objCopy = JSON.parse(JSON.stringify(obj));
    console.log('obj', obj);
    console.log('objCopy', objCopy);
}

4.如果json里有NaN、Infinity和-Infinity，则序列化的结果会变成null；

{
    let obj = {
        age: 18,
        hh: NaN,
        isInfinite: 1.7976931348623157E+10308,
        minusInfinity: -1.7976931348623157E+10308
    };
    let objCopy = JSON.parse(JSON.stringify(obj));
    console.log('obj', obj);
    console.log('objCopy', objCopy);
}

5.如果json里有对象是由构造函数生成的，则序列化的结果会丢弃对象的 constructor；

{
    function Person(name) {
        this.name = name;
    }
    let obj = {
        age: 18,
        p1: new Person('lxcan')
    };
    let objCopy = JSON.parse(JSON.stringify(obj));
    console.log('obj', obj);
    console.log('objCopy', objCopy);
    console.log(obj.p1.__proto__.constructor === Person); // true
    console.log(objCopy.p1.__proto__.constructor === Object); // true
}

6.如果对象中存在循环引用的情况也无法实现深拷贝

{
    let obj = {
        age: 18
    };
    obj.obj = obj;
    let objCopy = JSON.parse(JSON.stringify(obj));
    console.log('obj', obj);
    console.log('objCopy', objCopy);
}

至于如何进行深拷贝，这块没有完美的解决方案，如果你对这块有需要建议看看 https://segmentfault.com/a/1190000016672263，这里整理了几种方案，各有利弊，大家选择性使用。