JavaScript深拷貝的一些坑

前言

以前去一家公司面試的時候，面試官問了我一個問題，說:"如何才能深拷貝一個對象"。當時我內心有些竊喜，這麼簡單的問題還用想嗎？因而脫口而出:"平時經常使用的有兩種辦法，第一種用JSON.parse(JSON.stringify(obj))，第二種可使用for...in加遞歸完成"。面試官聽了之後點了點頭以爲挺滿意的。 當時我也並無太過在意這個問題，直到前段時間又想起這個問題，發現上面說的兩種方法都是有Bug的。

提出問題

那麼上面所說的Bug是什麼呢？

• 特殊對象拷貝

首先讓咱們試想有這麼一個對象，在不考慮普通類型的狀況下，它有以下成員:

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

複製代碼

而後咱們用上面兩種方式分別拷貝一次

JSON法

JSON.parse(JSON.stringify(obj))

複製代碼

輸出結果:

能夠從中看出，obj中的普通對象和數組都能拷貝，然而date對象成了字符串，函數直接就不見了，正則成了一個空對象。

再來看看for...in加遞歸的方法

遞歸

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，reg類型的對象;

• 環

什麼是環?

環就是對象循環引用，致使本身成爲一個閉環，例以下面這個對象:

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
}

複製代碼

拷貝結果:

完整版能夠查看lodash深拷貝

• 函數的拷貝

可是MDN上的結構化拷貝依舊沒有解決函數的拷貝

目前爲止，我只想到使用eval的方法對函數進行拷貝，可是這種方法只能對箭頭函數生效，若是是fun(){}這種形式的則會出錯

拷貝函數增長函數類型

拷貝結果

出錯類型

後記

JavaScript的深拷貝還不止上面所說的這些坑，還存在的問題有如何拷貝原型鏈上的屬性？如何拷貝不可枚舉屬性? 如何拷貝Error對象等等的坑，在這裏就不一一贅述了。

不過在平常過程當中仍是建議使用JSON方法，這個方法已經覆蓋了絕大部分的業務需求，因此不須要把簡單的事情複雜化，不過面試中若是遇到面試官鑽牛角尖對這個問題的解答絕對能夠秀他一臉了。