JS深拷贝避坑指南：JSON.parse、递归及循环引用处理

前言

在之前的面试经历中，面试官曾询问如何实现对象的深拷贝。当时我认为这是一个基础问题，便直接回答通常使用JSON.parse结合JSON.stringify，或者通过for...in循环配合递归来实现。面试官对此表示认可，但我后来发现这两种方法均存在明显的缺陷。

提出问题

上述两种常见方法具体存在哪些Bug？

特殊对象拷贝

假设有一个对象，忽略基本数据类型，其包含以下成员：


const obj = {
    arr: [111, 222],
    obj: {key: '对象'},
    a: () => {console.log('函数')},
    date: new Date(),
    reg: /正则/ig
}

接下来，我们分别使用上述两种方法进行拷贝测试。

JSON法


JSON.parse(JSON.stringify(obj))

输出结果：

从结果可以看出，普通对象和数组能够被正确拷贝，但Date对象被转换为了字符串，函数直接丢失，而正则表达式则变成了空对象。

递归


function isObj(obj) {
    return (typeof obj === 'object' || typeof obj === 'function') && obj !== null
}
function deepCopy(obj) {
    let tempObj = Array.isArray(obj) ? [] : {}
    for(let key in obj) {
        tempObj[key] = isObj(obj[key]) ? deepCopy(obj[key]) : obj[key]
    }
    return tempObj
}

结果：

结论

通过测试可知，这两种方法均无法正确处理函数、Date和RegExp类型的对象。

什么是环？

环指的是对象之间的循环引用，导致形成闭环。例如以下对象：


var a = {}

a.a = a

使用上述两种方法进行拷贝会直接报错。

解决方案

可以使用WeakMap结构来存储已拷贝的对象。每次执行拷贝时，先查询WeakMap中是否已存在该对象，若存在则直接返回。改造后的deepCopy函数如下：


function deepCopy(obj, hash = new WeakMap()) {
    if(hash.has(obj)) return hash.get(obj)
    let cloneObj = Array.isArray(obj) ? [] : {}
    hash.set(obj, cloneObj)
    for (let key in obj) {
        cloneObj[key] = isObj(obj[key]) ? deepCopy(obj[key], hash) : obj[key];
    }
    return cloneObj
}

拷贝环结果：

特殊对象的拷贝

解决特殊对象拷贝较为复杂，因为需要特别处理的对象类型众多。参考MDN的结构化克隆算法，并结合解决循环引用的方案，实现如下：


// 只解决date，reg类型，其他的可以自己添加

function deepCopy(obj, hash = new WeakMap()) {
    let cloneObj
    let Constructor = obj.constructor
    switch(Constructor){
        case RegExp:
            cloneObj = new Constructor(obj)
            break
        case Date:
            cloneObj = new Constructor(obj.getTime())
            break
        default:
            if(hash.has(obj)) return hash.get(obj)
            cloneObj = new Constructor()
            hash.set(obj, cloneObj)
    }
    for (let key in obj) {
        cloneObj[key] = isObj(obj[key]) ? deepCopy(obj[key], hash) : obj[key];
    }
    return cloneObj
}

拷贝结果：