大家好，我是Echa。

最近有一位00后的小妹妹粉絲私信小編說(shuō)自己很喜歡編程，目前在某公司實(shí)習(xí)前端開(kāi)發(fā)工作，說(shuō)到現(xiàn)在為止還沒(méi)有搞懂JavaScript中深拷貝和淺拷貝這個(gè)問(wèn)題，同時(shí)也在網(wǎng)上看了很多關(guān)于深拷貝的文章，但是質(zhì)量良莠不齊，有很多都考慮得不周到，寫(xiě)的方法比較簡(jiǎn)陋，難以令人滿(mǎn)意，理解的迷迷糊糊。讓小編深入剖析JavaScript中深淺拷貝。

看這位小姑娘如此的好學(xué)，不懂就問(wèn)的這種精神可嘉，小編非常佩服。仿佛看見(jiàn)當(dāng)年自己好學(xué)的影子了。在這里給她點(diǎn)贊。

對(duì)于深拷貝和淺拷貝這個(gè)問(wèn)題，相信大家都遇到過(guò)，那么怎么區(qū)分深拷貝和淺拷貝這個(gè)問(wèn)題呢？

往簡(jiǎn)單了理解，就是一句話(huà)概括：假設(shè)有一個(gè)變量A，變量B復(fù)制了變量A，如果我們修改變量A，看變量B是否會(huì)發(fā)生改變，如果改變了，那么就是淺拷貝，如果變量A值的變化不影響B(tài)，那么就是深拷貝，估計(jì)用文字說(shuō)這么多，可能大家都會(huì)看懵了。

先概念介紹

• 深拷貝：在堆內(nèi)存中重新開(kāi)辟一個(gè)存儲(chǔ)空間，完全克隆一個(gè)一模一樣的對(duì)象；
• 淺拷貝：不在堆內(nèi)存中重新開(kāi)辟空間，只復(fù)制棧內(nèi)存中的引用地址。

本質(zhì)上兩個(gè)對(duì)象（數(shù)組）依然指向同一塊存儲(chǔ)空間

還看不懂的話(huà)，看下圖：

JavaScript中淺拷貝

淺拷貝： 創(chuàng)建一個(gè)新的對(duì)象，來(lái)接受你要重新復(fù)制或引用的對(duì)象值。如果對(duì)象屬性是基本的數(shù)據(jù)類(lèi)型，復(fù)制的就是基本類(lèi)型的值給新對(duì)象；但如果屬性是引用數(shù)據(jù)類(lèi)型，復(fù)制的就是內(nèi)存中的地址，如果其中一個(gè)對(duì)象改變了這個(gè)內(nèi)存中的地址所指向的對(duì)象，肯定會(huì)影響到另一個(gè)對(duì)象。

首先我們看看一些淺拷貝的方法，如下圖：

JavaScript中淺拷貝

這里只列舉了常用的幾種方式，除此之外當(dāng)然還有其他更多的方式。注意，我們直接使用=賦值不是淺拷貝，因?yàn)樗侵苯又赶蛲粋€(gè)對(duì)象了，并沒(méi)有返回一個(gè)新對(duì)象。

手動(dòng)實(shí)現(xiàn)一個(gè)淺拷貝：

function shallowClone(target) {

    if (typeof target === 'object' && target !== null) {

        const cloneTarget = Array.isArray(target) ? [] : {};

        for (let prop in target) {

            if (target.hasOwnProperty(prop)) {

                cloneTarget[prop] = target[prop];

            }

        }

        return cloneTarget;

    } else {

        return target;

    }

}

// 測(cè)試

const shallowCloneObj = shallowClone(obj)

shallowCloneObj === obj  // false，返回的是一個(gè)新對(duì)象

shallowCloneObj.arr === obj.arr  // true，對(duì)于對(duì)象類(lèi)型只拷貝了引用

從上面這段代碼可以看出，利用類(lèi)型判斷（查看typeof），針對(duì)引用類(lèi)型的對(duì)象進(jìn)行 for 循環(huán)遍歷對(duì)象屬性賦值給目標(biāo)對(duì)象的屬性（for...in語(yǔ)句以任意順序遍歷一個(gè)對(duì)象的除Symbol以外的可枚舉屬性，包含原型上的屬性。查看for…in），基本就可以手工實(shí)現(xiàn)一個(gè)淺拷貝的代碼了。

JavaScript中深拷貝

在日常開(kāi)發(fā)中，深拷貝是一個(gè)常見(jiàn)需求，我們可以通過(guò) JSON 轉(zhuǎn)換、遞歸、 Lodash _.cloneDeep() 等方式實(shí)現(xiàn)。下面小編一一深入剖析

第一種：遞歸方式（推薦，項(xiàng)目中最安全最常用）

使用遞歸的方式進(jìn)行對(duì)象（數(shù)組）的深拷貝，奉上已封裝的深拷貝函數(shù)：

上方函數(shù)的使用方式：

//函數(shù)拷貝
    const copyObj = (obj = {}) => {
            //變量先置空
            let newobj = null;  

            //判斷是否需要繼續(xù)進(jìn)行遞歸
            if (typeof (obj) == 'object' && obj !== null) {
                newobj = obj instanceof Array ? [] : {};
                //進(jìn)行下一層遞歸克隆
                for (var i in obj) {
                    newobj[i] = copyObj(obj[i])
                }
                //如果不是對(duì)象直接賦值
            } else newobj = obj;
            
            return newobj;    
        }

上方函數(shù)的使用方式：

//模擬對(duì)象
let obj = {
  numberParams:1,
  functionParams:() => {
    console.log('歡迎關(guān)注 Echa工程師');
  },
  objParams:{
    a:1,
    b:2
  }
}

const newObj = copyObj(obj); //這樣就完成了一個(gè)對(duì)象的遞歸拷貝

obj.numberParams = 100;  //更改第一個(gè)對(duì)象的指
console.log(newObj.numberParams); //輸出依然是1 不會(huì)跟隨obj去改變

第二種：JSON.stringify() ；(這個(gè)不推薦使用，有坑)

這個(gè)方法有坑，詳細(xì)講解請(qǐng)看我另一篇文章 “使用JSON.stringify進(jìn)行深拷貝的坑” 以下是代碼示例：

let obj = {
  a:1,
  b:"來(lái)今日頭條，歡迎關(guān)注 Echa工程師。后面會(huì)不定期更新干貨和技術(shù)相關(guān)的資訊推薦"
}

//先轉(zhuǎn)為json格式字符，再轉(zhuǎn)回來(lái)
let newObj = JSON.parse(JSON.stringify(obj));

obj.a = 50;
console.log(newObj.a); //輸出 1

普通的對(duì)象也可以進(jìn)行深拷貝，但是！！！當(dāng)對(duì)象內(nèi)容項(xiàng)為 number、string、boolean的時(shí)候，是沒(méi)有什么問(wèn)題的。但是，如果對(duì)象內(nèi)容項(xiàng)為undefined、null、Date、RegExp、function，error的時(shí)候。使用JSON.stringify()進(jìn)行拷貝就會(huì)出問(wèn)題了。

第三種：使用第三方庫(kù)lodash中的cloneDeep()方法

是否推薦使用，看情況吧。如果我們的項(xiàng)目中只需要一個(gè)深拷貝的功能，這種情況下為了一個(gè)功能引入整個(gè)第三方庫(kù)就顯得很不值得了。不如寫(xiě)一個(gè)遞歸函數(shù)對(duì)于項(xiàng)目來(lái)說(shuō)性能更好。

lodash.cloneDeep()代碼示例：

import lodash from 'lodash';

let obj = {
  a: {
      c: 2,
      d: [1, 3, 5],
      e:'Echa工程師'
    },
    b: 4
}

const newObj = lodash.cloneDeep(obj);

obj.b = 20;
console.log(newObj.b); //輸出 4； 不會(huì)改變

實(shí)際上，cloneDeep()方法底層使用的本來(lái)就是遞歸方法。只是在外層又封裝了一層而已。

所以，如果不是原先項(xiàng)目中有使用 lodash 這個(gè)庫(kù)的話(huà)，大可不必為了這一個(gè)功能而去引入它。

文章上方有提供進(jìn)行深拷貝的函數(shù)，推薦使用。大家可自取。

第四種:JQuery的extend()方法進(jìn)行深拷貝（推薦在JQ中使用）

這個(gè)方法僅適用于JQuery構(gòu)建的項(xiàng)目。JQuery自身攜帶的extend()方法可以進(jìn)行深拷貝，不用自己寫(xiě)遞歸也不用引入第三方庫(kù)還沒(méi)什么坑。

在JQuery項(xiàng)目中的使用方式：

let obj = {
  a: {
      c: 2,
      d: [1, 3, 5],
      e:'Echa工程師'
    },
    b: 4
}

let newObj= $.extend(true, {}, obj1);  //拷貝完成

obj.b = 20;

console.log(newObj.b); //輸出 4

第五種：structuredClone（）方法進(jìn)行深拷貝

實(shí)際上，JavaScript 中提供了一個(gè)原生 API 來(lái)執(zhí)行對(duì)象的深拷貝：structuredClone。它可以通過(guò)結(jié)構(gòu)化克隆算法創(chuàng)建一個(gè)給定值的深拷貝，并且還可以傳輸原始值的可轉(zhuǎn)移對(duì)象。本文將深入探討 structuredClone() 函數(shù)的原理、使用方法及注意事項(xiàng)，以幫助開(kāi)發(fā)者更好地應(yīng)用現(xiàn)代 JavaScript 技術(shù)實(shí)現(xiàn)深拷貝。

structuredClone 基本使用

structuredClone() 的實(shí)用方式很簡(jiǎn)單，只需將原始對(duì)象傳遞給該函數(shù)，它將返回具有不同引用和對(duì)象屬性引用的深層副本·：

const originalObject = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "Anystate"
  },
  date: new Date(123),
  
}

const copied = structuredClone(originalObject);

這里 copied 的結(jié)果如下：

可以看到，這里不僅拷貝了對(duì)象，還拷貝了嵌套的對(duì)象和數(shù)組，甚至 Date 對(duì)象。structuredClone() 不僅可以做到這些，還可以：

• 拷貝無(wú)限嵌套的對(duì)象和數(shù)組；
• 拷貝循環(huán)引用；
• 拷貝各種 JavaScript 類(lèi)型，例如Date、Set、Map、Error、RegExp、ArrayBuffer, Blob、File、ImageData等；
• 拷貝同樣，所使用的結(jié)構(gòu)化克隆算法也structuredClone()不能克隆 DOM 元素。將 HTMLElement 對(duì)象傳遞給structuredClone()將導(dǎo)致如上所示的錯(cuò)誤。
• 任何可轉(zhuǎn)移的對(duì)象。

在 JavaScript 中，可轉(zhuǎn)移對(duì)象（Transferable Objects）是指 ArrayBuffer 和 MessagePort 等類(lèi)型的對(duì)象，它們可以在主線(xiàn)程和 Web Worker 線(xiàn)程之間相互傳遞，同時(shí)還可以實(shí)現(xiàn)零拷貝內(nèi)存共享，提高性能。這是由于可轉(zhuǎn)移對(duì)象具有兩個(gè)特點(diǎn)：

1. 可共享：可轉(zhuǎn)移對(duì)象本身沒(méi)有所有權(quán)，可以在多個(gè)線(xiàn)程之間共享，實(shí)現(xiàn)零拷貝內(nèi)存共享。
2. 可轉(zhuǎn)移：調(diào)用 Transferable API 時(shí)，可轉(zhuǎn)移對(duì)象會(huì)從發(fā)送方（發(fā)送線(xiàn)程）轉(zhuǎn)移到接收方（接收線(xiàn)程），不再存在于原始線(xiàn)程中，因此可以避免內(nèi)存拷貝和分配等開(kāi)銷(xiāo)。

要注意的是，使用可轉(zhuǎn)移對(duì)象時(shí)必須小心處理，因?yàn)橐坏?duì)象被轉(zhuǎn)移，原線(xiàn)程將不再擁有該對(duì)象的所有權(quán)，因此在發(fā)送線(xiàn)程中不能再訪(fǎng)問(wèn)該對(duì)象。此外，在接收線(xiàn)程中使用可轉(zhuǎn)移對(duì)象時(shí)，也需要根據(jù)需求進(jìn)行顯式釋放，否則可能會(huì)導(dǎo)致內(nèi)存泄漏和其他問(wèn)題。

例如，對(duì)于以下結(jié)構(gòu)，仍然可以使用structuredClone()進(jìn)行深拷貝：

const originalObject = {
  set: new Set([1, 3, 3]),
  map: new Map([[1, 2]]),
  regex: /foo/,
  deep: { array: [ new File(someBlobData, 'file.txt') ] },
  error: new Error('Hello!')
}
originalObject.circular = originalObject

const copied = structuredClone(originalObject)

當(dāng)對(duì)象中存在循環(huán)引用時(shí)，仍然可以通過(guò) structuredClone() 進(jìn)行深拷貝。

structuredClone 缺點(diǎn)

當(dāng)然，structuredClone() 也并不是完美的，下面就來(lái)看看有哪些 structuredClone() 不能拷貝的數(shù)據(jù)類(lèi)型。

函數(shù)或方法

當(dāng)拷貝函數(shù)時(shí)，就會(huì)拋出異常：

function func() {}

const funcClone = structuredClone(func);

輸出結(jié)果如下：

當(dāng)拷貝方法時(shí)，也會(huì)拋出異常：

const car = {
  make: 'BMW',
  move() {
    console.log('vroom');
  },
};

car.basedOn = car;

const cloned = structuredClone(car);

輸出結(jié)果如下：

DOM 節(jié)點(diǎn)

當(dāng)拷貝 DOM 節(jié)點(diǎn)時(shí)，也會(huì)拋出異常：

const input = document.querySelector('#text-field');

// ? Failed: HTMLInputElement object could not be cloned.
const clone = structuredClone(input);

屬性描述符、setter 和 getter

屬性描述符、setter 和 getter 以及類(lèi)似的元數(shù)據(jù)都不能被克隆。例如，對(duì)于 getter，結(jié)果值被克隆，但 getter 函數(shù)本身沒(méi)有被克隆（或任何其他屬性元數(shù)據(jù)）：

structuredClone({ get foo() { return 'bar' } })

輸出結(jié)果如下：

{ foo: 'bar' }

對(duì)象原型

原型鏈不能被遍歷或拷貝。所以如果克隆一個(gè)實(shí)例 MyClass，克隆的對(duì)象將不再是這個(gè)類(lèi)的一個(gè)實(shí)例（但是這個(gè)類(lèi)的所有有效屬性都將被拷貝）

class MyClass { 
  foo = 'bar' 
  myMethod() { /* ... */ }
}
const myClass = new MyClass()

const cloned = structuredClone(myClass)
// { foo: 'bar' }

cloned instanceof myClass // false

支持拷貝的類(lèi)型

structuredClone() 支持拷貝的類(lèi)型如下：

JS 內(nèi)置對(duì)象

Array（數(shù)組）、ArrayBuffer（數(shù)據(jù)緩沖區(qū)）、Boolean（布爾類(lèi)型）、DataView（數(shù)據(jù)視圖）、Date（日期類(lèi)型）、Error（錯(cuò)誤類(lèi)型，包括下面列出的具體類(lèi)型）、Map（映射類(lèi)型）、Object （僅指純對(duì)象，如從對(duì)象字面量中創(chuàng)建的對(duì)象）、原始類(lèi)型（除symbol外，即 number、string、null、undefined、boolean、BigInt）、RegExp（正則表達(dá)式）、Set（集合類(lèi)型）、TypedArray（類(lèi)型化數(shù)組）。

Error 類(lèi)型

Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

Web/API 類(lèi)型

AudioData、Blob、CryptoKey、DOMException、DOMMatrix、DOMMatrixReadOnly、DOMPoint、DomQuad、DomRect、File、FileList、FileSystemDirectoryHandle、FileSystemFileHandle、FileSystemHandle、ImageBitmap、ImageData、RTCCertificate、VideoFrame。

瀏覽器支持

目前主流瀏覽器都支持 structuredClone API：

為什么不用 JSON.parse(JSON.stringify(x))？

我們平時(shí)可能會(huì)通過(guò) JSON.parse(JSON.stringify(x)) 來(lái)進(jìn)行深拷貝，那它有什么缺點(diǎn)呢？

來(lái)看下面的例子：

const originalObject = {
  title: "hello",
  date: new Date(123),
  attendees: ["Steve"]
}

const copied = JSON.parse(JSON.stringify(originalObject))

通過(guò)這種方式，得到的 copied 值如下：

{
    title: "hello",
    date: "1970-01-01T00:00:00.123Z",
    attendees: [
        "Steve"
    ]
}

可以看到，這里的 date 并不是我們想要的 Date 對(duì)象，而是一個(gè)字符串。發(fā)生這種情況就是因?yàn)?JSON.stringify 只能處理基本對(duì)象、數(shù)組和基本類(lèi)型，而其他類(lèi)型的值在轉(zhuǎn)換之后都可能出現(xiàn)出乎意料的結(jié)果，例如 Date 會(huì)轉(zhuǎn)化為字符串， Set 會(huì)轉(zhuǎn)化為 {}。JSON.stringify甚至完全忽略某些內(nèi)容，比如undefined或函數(shù)。

例如：

const originalObject = {
  set: new Set([1, 3, 3]),
  map: new Map([[1, 2]]),
  regex: /foo/,
  deep: { array: [ new File(someBlobData, 'file.txt') ] },
  error: new Error('Hello!')
}

const copied = JSON.parse(JSON.stringify(originalObject))

這里得到的 copied 值如下：

{
  set: {},
  map: {},
  regex: {},
  deep": {
    array: [
      {}
    ]
  },
  error: {},
}

除此之外，JSON.parse(JSON.stringify(x)) 無(wú)法對(duì)包含循環(huán)引用的對(duì)象進(jìn)行深克隆：

const originalObject = {
  set: new Set([1, 3, 3]),
  map: new Map([[1, 2]]),
  regex: /foo/,
  error: new Error('Hello!')
}
originalObject.circular = originalObject

const copied = JSON.parse(JSON.stringify(originalObject))

當(dāng)執(zhí)行上述代碼時(shí)，就會(huì)報(bào)錯(cuò)：

所以，如果對(duì)象沒(méi)有上面說(shuō)的這些情況，使用 JSON.parse(JSON.stringify(x)) 進(jìn)行深克隆是完全沒(méi)有問(wèn)題的。如果有，就可以使用 structuredClone() 來(lái)進(jìn)行深拷貝。

最后

大家明白看完這篇文章深入剖析JavaScript中深淺拷貝，理解多少了，歡迎在評(píng)論區(qū)討論。