深拷贝和浅拷贝

浅拷贝： 对象只被克隆了一个引用或者只会被克隆最外部的一层，更深层的对象还是通过引用指向同一块堆内存。

1. Object.assign()

let p1= { 
    name: 'Tom' ,
    children: [{
        name: 'A'
    }]
};
let p2 = Object.assign({}, p1);
p1.name = 'Tim';
console.log(p2.name); // Tom
p1.children[0].name = 'B';
console.log(p2.children[0].name); // B

2. 展开运算符 ...

let p1 = {
    name: 'Tom',
    children: [{
        name: 'A'
    }]
};
let p2 = { ...p1 };
p1.name = 'Tim';
console.log(p1.name); // Tom

3. 自己编写一个函数

function shallowClone(obj) {
    const result = {};
    for (let key in obj) {
        result[key] = obj[key];
    }
    return obj;
}

深拷贝：不光解决了第一层的问题，还递归拷贝了目标对象的所有属性。

1. JSON.parse(JSON.strigify())

function Person(name) { 
    this.name = name;
}
const p = new Person('Tom');

const oldObj = {
    a: function() { console.log('hi');},
    b: new Array(1),
    c: new RegExp('ab+c', 'i'),
    d: p,
    e: Symbol('a'),
    f: undefined
};

const newObj = JSON.parse(JSON.stringify(oldObj));

console.log(oldObj);
//{ 
    a: ƒ (),
    b: [empty],
    c: /ab+c/i,
    d: Person {name: "Tom"},
    e: Symbol(male),
    f: undefined
}
console.log(newObj);
//{
    b: [null],
    c: {},
    d: {name: "Tom"}
}

缺点：

• 无法实现对函数、undefined、regexp、symbol等类型克隆
• 会抛弃对象的constructor，所有的构造函数都会指向object
• 对象有循环引用会报错

2. 简单的深拷贝（不考虑函数、Date、RegExp等类型）

const deepClone = (obj) => {
    if (obj === null || typeof obj !== 'object') return obj;
    let cloneObj = Array.isArray(obj) ? [] : {};
    for(let key in obj) {
        if (!obj.hasOwnProperty(key)) return;
        cloneObj[key] = obj[key] !== null && typeof obj === 'object' ? deepClone(obj[key]) : obj[key];
    }
    return cloneObj;
}

3. 考虑部分类型的简易版深拷贝，推荐使用 lodash 的深拷贝函数。

const isType = (obj, type) => Object.prototype.toString.call(obj).slice(8, -1) === type;

// 可用es6的flags替换（ie不支持）
const getRegExp = re => {
    var result = '';
    if (re.global) result += 'g';
    if (re.ignoreCase) result += 'I';
    if (re.multiline) result += 'm';
    return result;
}

const deepClone = (obj) => {
    const oldList = [];
    const newList = [];
    const _clone = (parent) => {
        if (parent === null || typeof parent !== 'object') return parent;
        let result;
        if (isType(parent, 'Array')) {
            result = [];
        } else if (isType(parent, 'RegExp')) {
            result = new RegExp(parent.source, getRegExp(parent)); // 等同于 parent.flags
            if (parent.lastIndex) resut.lastIndex = parent.lastIndex;
        } else if (isType(parent, 'Date')) {
            result = new Date(parent.getTime());
        } else {
            result = Object.create(Object.getPrototypeOf(parent));
        }
        // 处理循环引用
        const index = oldList.indexOf(parent);
        if (index !== -1) {
            return newList[index];
        }
        oldList.push(parent);
        newList.push(result);

        for (let attr in parent) {
            // 递归调用
            result[attr] = _clone(parent[attr]);
        }
        return result;
    };
    return _clone(obj);
}

4. MessageChannel

// 若所需拷贝的对象含有内置类型并且不包含函数，可以使用MessageChannel

const structuralClone = obj => {
    return new Promise(resolve => {
        const {port1, port2} = new MessageChannel();
        port2.onmessage = ev => resolve(ev.data);
        port1.postMessage(obj);
    });
};

const test = async () => {
    const clone = await structuralClone(obj);
    console.log(clone);
};
test();