深入深入再深入 js 深拷貝物件

雲峰yf發表於2018-04-18

前言

物件是 JS 中基本型別之一，而且和原型鏈、陣列等知識息息相關。不管是面試中，還是實際開發中我們都會碰見深拷貝物件的問題。

顧名思義，深拷貝就是完完整整的將一個物件從記憶體中拷貝一份出來。所以無論用什麼辦法，必然繞不開開闢一塊新的記憶體空間。

通常有下面兩種方法實現深拷貝：

迭代遞迴法
序列化反序列化法

我們會基於一個測試用例對常用的實現方法進行測試並對比優劣：

let test = {
    num: 0,
    str: '',
    boolean: true,
    unf: undefined,
    nul: null,
    obj: {
        name: '我是一個物件',
        id: 1
    },
    arr: [0, 1, 2],
    func: function() {
        console.log('我是一個函式')
    },
    date: new Date(0),
    reg: new RegExp('/我是一個正則/ig'),
    err: new Error('我是一個錯誤')
}

let result = deepClone(test)

console.log(result)
for (let key in result) {
    if (isObject(result[key]))
        console.log(`${key}相同嗎？ `, result[key] === test[key])
}

// 判斷是否為物件
function isObject(o) {
    return (typeof o === 'object' || typeof o === 'function') && o !== null
}
複製程式碼

1. 迭代遞迴法

這是最常規的方法，思想很簡單：就是對物件進行迭代操作，對它的每個值進行遞迴深拷貝。

for...in 法

// 迭代遞迴法：深拷貝物件與陣列
function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error('obj 不是一個物件！')
    }

    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [] : {}
    for (let key in obj) {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    }

    return cloneObj
}
複製程式碼

結果：
複製程式碼

我們發現，arr 和 obj 都深拷貝成功了，它們的記憶體引用已經不同了，但 func、date、reg 和 err 並沒有複製成功，因為它們有特殊的建構函式。
複製程式碼

Reflect 法

// 代理法
function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error('obj 不是一個物件！')
    }

    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [...obj] : { ...obj }
    Reflect.ownKeys(cloneObj).forEach(key => {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    })

    return cloneObj
}
複製程式碼

結果：
複製程式碼

我們發現，結果和使用 for...in 一樣。那麼它有什麼優點呢？讀者可以先猜一猜，答案我們會在下文揭曉。
複製程式碼

lodash 中的深拷貝

著名的 lodash 中的 cloneDeep 方法同樣是使用這種方法實現的，只不過它支援的物件種類更多，具體的實現過程讀者可以參考 lodash 的 baseClone 方法。

我們把測試用例用到的深拷貝函式換成 lodash 的：
```
let result = _.cloneDeep(test)
複製程式碼
```
結果：

我們發現，arr、obj、date、reg深拷貝成功了，但 func 和 err 記憶體引用仍然不變。

為什麼不變呢？這個問題留給讀者自己去探尋，嘿嘿~不過可以提示下，這跟 lodash 中的 cloneableTags 有關。

由於前端中的物件種類太多了，所以 lodash 也給使用者準備了自定義深拷貝的方法 cloneDeepWith，比如自定義深拷貝 DOM 物件：
```
function customizer(value) {
  if (_.isElement(value)) {
    return value.cloneNode(true);
  }
}

var el = _.cloneDeepWith(document.body, customizer);
 
console.log(el === document.body);
// => false
console.log(el.nodeName);
// => 'BODY'
console.log(el.childNodes.length);
// => 20
複製程式碼
```

2.序列化反序列化法

這個方法非常有趣，它先把程式碼序列化成資料，再反序列化回物件：

// 序列化反序列化法
function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj))
}
複製程式碼

結果：

我們發現，它也只能深拷貝物件和陣列，對於其他種類的物件，會失真。這種方法比較適合平常開發中使用，因為通常不需要考慮物件和陣列之外的型別。

深入深入再深入

物件成環怎麼辦？我們給 test 加一個 loopObj 鍵，值指向自身：
```
test.loopObj = test
複製程式碼
```
這時我們使用第一種方法中的 for..in 實現和 Reflect 實現都會棧溢位：

而使用第二種方法也會報錯：

但 lodash 卻可以得到正確結果：

為什麼呢？我們去 lodash 原始碼看看：

因為 lodash 使用的是棧把物件儲存起來了，如果有環物件，就會從棧裡檢測到，從而直接返回結果，懸崖勒馬。這種演算法思想來源於 HTML5 規範定義的結構化克隆演算法，它同時也解釋了為什麼 lodash 不對 Error 和 Function 型別進行拷貝。

當然，設定一個雜湊表儲存已拷貝過的物件同樣可以達到同樣的目的：
```
function deepClone(obj, hash = new WeakMap()) {
    if (!isObject(obj)) {
        return obj
    }
    // 查表
    if (hash.has(obj)) return hash.get(obj)

    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [] : {}
    // 雜湊表設值
    hash.set(obj, cloneObj)

    let result = Object.keys(obj).map(key => {
        return {
            [key]: deepClone(obj[key], hash)
        }
    })
    return Object.assign(cloneObj, ...result)
}
複製程式碼
```
這裡我們使用 WeakMap 作為雜湊表，因為它的鍵是弱引用的，而我們這個場景裡鍵恰好是物件，需要弱引用。

鍵不是字串而是 Symbol

我們修改一下測試用例：

var test = {}
let sym = Symbol('我是一個Symbol')
test[sym] = 'symbol'

let result = deepClone(test)
console.log(result)
console.log(result[sym] === test[sym])
複製程式碼

執行 for...in 實現的深拷貝我們會發現：

拷貝失敗了，為什麼？

因為 Symbol 是一種特殊的資料型別，它最大的特點便是獨一無二，所以它的深拷貝就是淺拷貝。

但如果這時我們使用 Reflect 實現的版本：

成功了，因為 for...in 無法獲得 Symbol 型別的鍵，而 Reflect 是可以獲取的。

當然，我們改造一下 for...in 實現也可以：

function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error('obj 不是一個物件！')
    }

    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [] : {}
    let symKeys = Object.getOwnPropertySymbols(obj)
    // console.log(symKey)
    if (symKeys.length > 0) {
        symKeys.forEach(symKey => {
            cloneObj[symKey] =  isObject(obj[symKey]) ? deepClone(obj[symKey]) : obj[symKey]
        })
    }
    for (let key in obj) {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    }

    return cloneObj
}
複製程式碼

拷貝原型上的屬性

眾所周知，JS 物件是基於原型鏈設計的，所以當一個物件的屬性查詢不到時會沿著它的原型鏈向上查詢，也就是一個非建構函式物件的 __proto__ 屬性。

我們建立一個 childTest 變數，讓 result 為它的深拷貝結果，其他不變：
```
let childTest = Object.create(test)
let result = deepClone(childTest)
複製程式碼
```
這時，我們最初提供的四種實現只有 for...in 的實現能正確拷貝，為什麼呢？原因還是在結構化克隆演算法裡：原形鏈上的屬性也不會被追蹤以及複製。

落在具體實現上就是：for...in 會追蹤原型鏈上的屬性，而其它三種方法(Object.keys、Reflect.ownKeys 和 JSON 方法)都不會追蹤原型鏈上的屬性：

需要拷貝不可列舉的屬性

第四種情況，就是我們需要拷貝類似屬性描述符，setters 以及 getters 這樣不可列舉的屬性，一般來說，這就需要一個額外的不可列舉的屬性集合來儲存它們。類似在第二種情況使用 for...in 拷貝 Symbol 型別鍵時：我們給 test 變數裡的 obj 和 arr 屬性定義一下屬性描述符：

Object.defineProperties(test, {
    'obj': {
        writable: false,
        enumerable: false,
        configurable: false
    },
    'arr': {
        get() {
            console.log('呼叫了get')
            return [1,2,3]
        },
        set(val) {
            console.log('呼叫了set')
        }
    }
})
複製程式碼

然後實現我們的拷貝不可列舉屬性的版本：

function deepClone(obj, hash = new WeakMap()) {
    if (!isObject(obj)) {
        return obj
    }
    // 查表，防止迴圈拷貝
    if (hash.has(obj)) return hash.get(obj)

    let isArray = Array.isArray(obj)
    // 初始化拷貝物件
    let cloneObj = isArray ? [] : {}
    // 雜湊表設值
    hash.set(obj, cloneObj)
    // 獲取源物件所有屬性描述符
    let allDesc = Object.getOwnPropertyDescriptors(obj)
    // 獲取源物件所有的 Symbol 型別鍵
    let symKeys = Object.getOwnPropertySymbols(obj)
    // 拷貝 Symbol 型別鍵對應的屬性
    if (symKeys.length > 0) {
        symKeys.forEach(symKey => {
            cloneObj[symKey] = isObject(obj[symKey]) ? deepClone(obj[symKey], hash) : obj[symKey]
        })
    }

    // 拷貝不可列舉屬性,因為 allDesc 的 value 是淺拷貝，所以要放在前面
    cloneObj = Object.create(
        Object.getPrototypeOf(cloneObj),
        allDesc
    )
    // 拷貝可列舉屬性（包括原型鏈上的）
    for (let key in obj) {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key], hash) : obj[key];
    }

    return cloneObj
}
複製程式碼

結果：

結語

日常深拷貝，建議序列化反序列化方法。
面試時遇見面試官搞事情，寫一個能拷貝自身可列舉、自身不可列舉、自身 Symbol 型別鍵、原型上可列舉、原型上不可列舉、原型上的 Symol 型別鍵，迴圈引用也可以拷的深拷貝函式：

// 將之前寫的 deepClone 函式封裝一下
function cloneDeep(obj) {
    let family = {}
    let parent = Object.getPrototypeOf(obj)

    while (parent != null) {
        family = completeAssign(deepClone(family), parent)
        parent = Object.getPrototypeOf(parent)
    }

    // 下面這個函式會拷貝所有自有屬性的屬性描述符,來自於 MDN
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
    function completeAssign(target, ...sources) {
        sources.forEach(source => {
            let descriptors = Object.keys(source).reduce((descriptors, key) => {
                descriptors[key] = Object.getOwnPropertyDescriptor(source, key)
                return descriptors
            }, {})

            // Object.assign 預設也會拷貝可列舉的Symbols
            Object.getOwnPropertySymbols(source).forEach(sym => {
                let descriptor = Object.getOwnPropertyDescriptor(source, sym)
                if (descriptor.enumerable) {
                    descriptors[sym] = descriptor
                }
            })
            Object.defineProperties(target, descriptors)
        })
        return target
    }

    return completeAssign(deepClone(obj), family)
}

複製程式碼

有特殊需求的深拷貝，建議使用 lodash 的 copyDeep 或 copyDeepWith 方法。

最後感謝一下知乎上關於這個問題的啟發，無論做什麼，儘量不要把簡單的事情複雜化，深拷貝能不用就不用，它面對的問題往往可以用更優雅的方式解決，比如使用一個函式來得到物件，當然面試的時候裝個逼是可以的。

深入淺出深拷貝與淺拷貝
2019-02-22
深入淺出的“深拷貝與淺拷貝”
2018-07-24
深入JavaScript基礎之深淺拷貝
2019-03-01
JavaScript
深入理解閉包，裝飾器，深拷貝淺拷貝
2021-03-16
深入理解 JavaScript 物件和陣列拷貝
2019-03-03
JavaScript物件陣列
物件深拷貝和淺拷貝
2019-03-04
物件
深入理解零拷貝技術
2021-09-06
js物件實現深淺拷貝！！
2020-10-31
JS物件
實現物件淺拷貝、深拷貝
2019-07-20
物件
聊聊物件深拷貝和淺拷貝
2018-12-29
物件
物件的深拷貝與淺拷貝
2016-12-16
物件
JS深拷貝與淺拷貝
2019-10-21
JS
js 淺拷貝和深拷貝
2018-07-18
JS
js 深拷貝和淺拷貝
2022-03-30
JS
js深拷貝和淺拷貝
2017-04-12
JS
js 深拷貝 vs 淺拷貝
2017-09-03
JS
【JavaScript】物件的淺拷貝與深拷貝
2018-07-29
JavaScript物件
js的深拷貝和淺拷貝
2018-12-28
JS
js之淺拷貝和深拷貝
2021-10-10
JS
jquery之物件拷貝深拷貝淺拷貝案例講解
2020-10-25
jQuery物件
js深拷貝方法
2020-08-03
JS
js 深拷貝方法
2018-10-02
JS
PHP 物件導向 - 物件的淺拷貝與深拷貝
2019-11-20
PHP物件
【JS】深拷貝與淺拷貝，實現深拷貝的幾種方法
2018-08-07
JS
詳解js中物件的深淺拷貝
2017-03-28
JS物件
JavaScript物件的深拷貝以及淺拷貝分析
2018-12-13
JavaScript物件
js實現深拷貝和淺拷貝
2019-01-17
JS
淺探js深拷貝和淺拷貝
2018-11-15
JS
[JS系列二]談談深拷貝和淺拷貝，如何實現深拷貝
2019-03-19
JS
js陣列物件複製拷貝不改變原來的值，深拷貝
2020-11-26
JS陣列物件
JS深拷貝總結
2018-06-13
JS
JS中的深拷貝
2018-06-19
JS
js實現深拷貝
2018-05-26
JS
JavaScript 中物件的深拷貝
2016-10-30
JavaScript物件
詳解js中的物件的深淺拷貝
2020-01-02
JS物件
理解JS中的淺拷貝與深拷貝
2019-10-12
JS
js 陣列的淺拷貝和深拷貝
2021-03-09
JS陣列
js 淺拷貝（淺複製、淺克隆）、深拷貝（深複製、深克隆）
2018-12-24
JS

深入深入再深入 js 深拷貝物件

前言

1. 迭代遞迴法

for...in 法

Reflect 法

lodash 中的深拷貝

2.序列化反序列化法

深入深入再深入

結語

相關文章