深拷贝与浅拷贝

浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象该变量这个地址，就会影响到另一个对象。

const oldObj = {
    name: '张三',
    age: 20,
    colors: ['orange', 'green', 'red'],
    friend: {
        name: '李四'
    }
}
const newObj=oldObj
newObj.name='张六'
newObj.friend.name = '王五'
newObj.colors[0] = 'black'
console.log('oldObj', oldObj);
console.log('newObj', newObj);

 

深拷贝：将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象。

const oldObj = {
    name: '张三',
    age: 20,
    colors: ['orange', 'green', 'red'],
    friend: {
        name: '李四'
    }
}

function deepClone (obj) {
    if (typeof obj !== 'object' || obj == null) {
        return obj
    }
    let result
    // 判断要拷贝的是数组还是对象
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 只拷贝对象自身的属性，不拷贝原型上的
        if (obj.hasOwnProperty(key)) {
            result[key] = deepClone(obj[key])
        }
    }

    return result
}

const newObj = deepClone(oldObj)
newObj.name='张六'
newObj.friend.name = '王五'
newObj.colors[0] = 'black'
console.log('oldObj', oldObj);
console.log('newObj', newObj);