JS深拷贝的实现过程和代码解读

【根据深拷贝的代码实现过程给自己讲解一遍，就懂了】

/**

 * 深拷贝

 */

const obj1 = {

    age: 20,

    name: 'xxx',

    address: {

        city: 'beijing'

    },

    arr: ['a', 'b', 'c']

}

// const obj2 = obj1

const obj2 = deepClone(obj1)

obj2.address.city = 'shanghai'

obj2.arr[0] = 'a1'

console.log(obj1.address.city) // -> beijing

console.log(obj1.arr[0]) // -> a

    // 1.obj2改了，obj1也被改了。

    // 2.深拷贝就是obj2改值，obj1不变

/**

 *深拷贝

 *

 * @param {Object} [obj={}] obj要拷贝的对象

 * @return {*}

 */

function deepClone(obj = {}) {

    if (typeof obj !== 'object' || obj == null) {

        // obj 是 null，或者不是对象和数组，直接返回

        return obj

    }

    // 初始化返回结果

    let result

    if (obj instanceof Array) {

        result = []

    } else {

        result = {}

    }

    for (let key in obj) {

        // 保证 key 不是原型的属性

        if (obj.hasOwnProperty(key)) { // 保证key是obj的属性。

            //递归调用！！！

            result[key] = deepClone(obj[key])

        }

    } // 层次很深的东西就需要这样一遍一遍递归，把值类型给拷贝出来，这样才能完成深拷贝

    // 返回结果

    return result

}