深入剖析 JavaScript 的深複製

發表於2015-08-18

一年前我曾寫過一篇 Javascript 中的一種深複製實現，當時寫這篇文章的時候還比較稚嫩，有很多地方沒有考慮仔細。為了不誤人子弟，我決定結合 Underscore、lodash 和 jQuery 這些主流的第三方庫來重新談一談這個問題。

第三方庫的實現

講一句唯心主義的話，放之四海而皆準的方法是不存在的，不同的深複製實現方法和實現粒度有各自的優劣以及各自適合的應用場景，所以本文並不是在教大家改如何實現深複製，而是將一些在 JavaScript 中實現深複製所需要考慮的問題呈獻給大家。我們首先從較為簡單的 Underscore 開始：

Underscore —— _.clone()

在 Underscore 中有這樣一個方法：_.clone()，這個方法實際上是一種淺複製 (shallow-copy)，所有巢狀的物件和陣列都是直接複製引用而並沒有進行深複製。來看一下例子應該會更加直觀：

var x = {
    a: 1,
    b: { z: 0 }
};

var y = _.clone(x);

y === x       // false
y.b === x.b   // true

x.b.z = 100;
y.b.z         // 100

var x = {

a: 1,

b: { z: 0 }

};

var y = _.clone(x);

y === x // false

y.b === x.b // true

x.b.z = 100;

y.b.z // 100

讓我們來看一下 Underscore 的原始碼：

// Create a (shallow-cloned) duplicate of an object.
_.clone = function(obj) {
  if (!_.isObject(obj)) return obj;
  return _.isArray(obj) ? obj.slice() : _.extend({}, obj);
};

// Create a (shallow-cloned) duplicate of an object.

_.clone = function(obj) {

if (!_.isObject(obj)) return obj;

return _.isArray(obj) ? obj.slice() : _.extend({}, obj);

};

如果目標物件是一個陣列，則直接呼叫陣列的slice()方法，否則就是用_.extend()方法。想必大家對extend()方法不會陌生，它的作用主要是將從第二個引數開始的所有物件，按鍵值逐個賦給第一個物件。而在 jQuery 中也有類似的方法。關於 Underscore 中的 _.extend() 方法的實現可以參考 underscore.js #L1006。

Underscore 的 clone() 不能算作深複製，但它至少比直接賦值來得“深”一些，它建立了一個新的物件。另外，你也可以通過以下比較 tricky 的方法來完成單層巢狀的深複製：

var _ = require('underscore');
var a = [{f: 1}, {f:5}, {f:10}];
var b = _.map(a, _.clone);       // <----
b[1].f = 55;
console.log(JSON.stringify(a));  // [{"f":1},{"f":5},{"f":10}]

var _ = require('underscore');

var a = [{f: 1}, {f:5}, {f:10}];

var b = _.map(a, _.clone); // <----

b[1].f = 55;

console.log(JSON.stringify(a)); // [{"f":1},{"f":5},{"f":10}]

jQuery —— $.clone() / $.extend()

在 jQuery 中也有這麼一個叫 $.clone() 的方法，可是它並不是用於一般的 JS 物件的深複製，而是用於 DOM 物件。這不是這篇文章的重點，所以感興趣的同學可以參考jQuery的文件。與 Underscore 類似，我們也是可以通過 $.extend() 方法來完成深複製。值得慶幸的是，我們在 jQuery 中可以通過新增一個引數來實現遞迴extend。呼叫$.extend(true, {}, ...)就可以實現深複製啦，參考下面的例子：

var x = {
    a: 1,
    b: { f: { g: 1 } },
    c: [ 1, 2, 3 ]
};

var y = $.extend({}, x),          //shallow copy
    z = $.extend(true, {}, x);    //deep copy

y.b.f === x.b.f       // true
z.b.f === x.b.f       // false

var x = {

a: 1,

b: { f: { g: 1 } },

c: [ 1, 2, 3 ]

};

var y = $.extend({}, x), //shallow copy

z = $.extend(true, {}, x); //deep copy

y.b.f === x.b.f // true

z.b.f === x.b.f // false

在 jQuery的原始碼 – src/core.js #L121 檔案中我們可以找到$.extend()的實現，也是實現得比較簡潔，而且不太依賴於 jQuery 的內建函式，稍作修改就能拿出來單獨使用。

lodash —— _.clone() / _.cloneDeep()

在lodash中關於複製的方法有兩個，分別是_.clone()和_.cloneDeep()。其中_.clone(obj, true)等價於_.cloneDeep(obj)。使用上，lodash和前兩者並沒有太大的區別，但看了原始碼會發現，Underscore 的實現只有30行左右，而 jQuery 也不過60多行。可 lodash 中與深複製相關的程式碼卻有上百行，這是什麼道理呢？

var $ = require("jquery"),
    _ = require("lodash");

var arr = new Int16Array(5),
    obj = { a: arr },
    obj2;
arr[0] = 5;
arr[1] = 6;

// 1. jQuery
obj2 = $.extend(true, {}, obj);
console.log(obj2.a);                            // [5, 6, 0, 0, 0]
Object.prototype.toString.call(obj2);           // [object Int16Array]
obj2.a[0] = 100;
console.log(obj);                               // [100, 6, 0, 0, 0]

//此處jQuery不能正確處理Int16Array的深複製！！！

// 2. lodash
obj2 = _.cloneDeep(obj);                       
console.log(obj2.a);                            // [5, 6, 0, 0, 0]
Object.prototype.toString.call(arr2);           // [object Int16Array]
obj2.a[0] = 100;
console.log(obj);                               // [5, 6, 0, 0, 0]

var $ = require("jquery"),

_ = require("lodash");

var arr = new Int16Array(5),

obj = { a: arr },

obj2;

arr[0] = 5;

arr[1] = 6;

// 1. jQuery

obj2 = $.extend(true, {}, obj);

console.log(obj2.a); // [5, 6, 0, 0, 0]

Object.prototype.toString.call(obj2); // [object Int16Array]

obj2.a[0] = 100;

console.log(obj); // [100, 6, 0, 0, 0]

//此處jQuery不能正確處理Int16Array的深複製！！！

// 2. lodash

obj2 = _.cloneDeep(obj);

console.log(obj2.a); // [5, 6, 0, 0, 0]

Object.prototype.toString.call(arr2); // [object Int16Array]

obj2.a[0] = 100;

console.log(obj); // [5, 6, 0, 0, 0]

通過上面這個例子可以初見端倪，jQuery 無法正確深複製 JSON 物件以外的物件，而我們可以從下面這段程式碼片段可以看出 lodash 花了大量的程式碼來實現 ES6 引入的大量新的標準物件。更厲害的是，lodash 針對存在環的物件的處理也是非常出色的。因此相較而言，lodash 在深複製上的行為反饋比前兩個庫好很多，是更擁抱未來的一個第三方庫。

/** `Object#toString` result references. */
var argsTag = '[object Arguments]',
    arrayTag = '[object Array]',
    boolTag = '[object Boolean]',
    dateTag = '[object Date]',
    errorTag = '[object Error]',
    funcTag = '[object Function]',
    mapTag = '[object Map]',
    numberTag = '[object Number]',
    objectTag = '[object Object]',
    regexpTag = '[object RegExp]',
    setTag = '[object Set]',
    stringTag = '[object String]',
    weakMapTag = '[object WeakMap]';

var arrayBufferTag = '[object ArrayBuffer]',
    float32Tag = '[object Float32Array]',
    float64Tag = '[object Float64Array]',
    int8Tag = '[object Int8Array]',
    int16Tag = '[object Int16Array]',
    int32Tag = '[object Int32Array]',
    uint8Tag = '[object Uint8Array]',
    uint8ClampedTag = '[object Uint8ClampedArray]',
    uint16Tag = '[object Uint16Array]',
    uint32Tag = '[object Uint32Array]';

/** `Object#toString` result references. */

var argsTag = '[object Arguments]',

arrayTag = '[object Array]',

boolTag = '[object Boolean]',

dateTag = '[object Date]',

errorTag = '[object Error]',

funcTag = '[object Function]',

mapTag = '[object Map]',

numberTag = '[object Number]',

objectTag = '[object Object]',

regexpTag = '[object RegExp]',

setTag = '[object Set]',

stringTag = '[object String]',

weakMapTag = '[object WeakMap]';

var arrayBufferTag = '[object ArrayBuffer]',

float32Tag = '[object Float32Array]',

float64Tag = '[object Float64Array]',

int8Tag = '[object Int8Array]',

int16Tag = '[object Int16Array]',

int32Tag = '[object Int32Array]',

uint8Tag = '[object Uint8Array]',

uint8ClampedTag = '[object Uint8ClampedArray]',

uint16Tag = '[object Uint16Array]',

uint32Tag = '[object Uint32Array]';

藉助 JSON 全域性物件

相比於上面介紹的三個庫的做法，針對純 JSON 資料物件的深複製，使用 JSON 全域性物件的 parse 和 stringify 方法來實現深複製也算是一個簡單討巧的方法。然而使用這種方法會有一些隱藏的坑，它能正確處理的物件只有 Number, String, Boolean, Array, 扁平物件，即那些能夠被 json 直接表示的資料結構。

function jsonClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
var clone = jsonClone({ a:1 });

function jsonClone(obj) {

return JSON.parse(JSON.stringify(obj));

}

var clone = jsonClone({ a:1 });

擁抱未來的深複製方法

我自己實現了一個深複製的方法，因為用到了Object.create、Object.isPrototypeOf等比較新的方法，所以基本只能在 IE9+ 中使用。而且，我的實現是直接定義在 prototype 上的，很有可能引起大多數的前端同行們的不適。(關於這個我還曾在知乎上提問過：為什麼不要直接在Object.prototype上定義方法？）只是實驗性質的，大家參考一下就好，改成非 prototype 版本也是很容易的，不過就是要不斷地去判斷物件的型別了。~

這個實現方法具體可以看我寫的一個小玩意兒——Cherry.js，使用方法大概是這樣的：

function X() {
    this.x = 5;
    this.arr = [1,2,3];
}
var obj = { d: new Date(), r: /abc/ig, x: new X(), arr: [1,2,3] },
    obj2,
    clone;

obj.x.xx = new X();
obj.arr.testProp = "test";
clone = obj.$clone();                  //<----

function X() {

this.x = 5;

this.arr = [1,2,3];

}

var obj = { d: new Date(), r: /abc/ig, x: new X(), arr: [1,2,3] },

obj2,

clone;

obj.x.xx = new X();

obj.arr.testProp = "test";

clone = obj.$clone(); //<----

首先定義一個輔助函式，用於在預定義物件的 Prototype 上定義方法：

function defineMethods(protoArray, nameToFunc) {
    protoArray.forEach(function(proto) {
        var names = Object.keys(nameToFunc),
            i = 0;

        for (; i < names.length; i++) {
            Object.defineProperty(proto, names[i], {
                enumerable: false,
                configurable: true,
                writable: true,
                value: nameToFunc[names[i]]
            });
        }
    });
}

function defineMethods(protoArray, nameToFunc) {

protoArray.forEach(function(proto) {

var names = Object.keys(nameToFunc),

i = 0;

for (; i < names.length; i++) {

Object.defineProperty(proto, names[i], {

enumerable: false,

configurable: true,

writable: true,

value: nameToFunc[names[i]]

});

}

});

}

為了避免和源生方法衝突，我在方法名前加了一個 $ 符號。而這個方法的具體實現很簡單，就是遞迴深複製。其中我需要解釋一下兩個引數：srcStack和dstStack。它們的主要用途是對存在環的物件進行深複製。比如源物件中的子物件srcStack[7]在深複製以後，對應於dstStack[7]。該實現方法參考了 lodash 的實現。關於遞迴最重要的就是 Object 和 Array 物件：

/*=====================================*
 * Object.prototype
 * - $clone()
*=====================================*/

defineMethods([ Object.prototype ], {
    '$clone': function (srcStack, dstStack) {
        var obj = Object.create(Object.getPrototypeOf(this)),
            keys = Object.keys(this),
            index,
            prop;

        srcStack = srcStack || [];
        dstStack = dstStack || [];
        srcStack.push(this);
        dstStack.push(obj);

        for (var i = 0; i < keys.length; i++) {
            prop = this[keys[i]];
            if (prop === null || prop === undefined) {
                obj[keys[i]] = prop;
            }
            else if (!prop.$isFunction()) {
                if (prop.$isPlainObject()) {
                    index = srcStack.lastIndexOf(prop);
                    if (index > 0) {
                        obj[keys[i]] = dstStack[index];
                        continue;
                    }
                }
                obj[keys[i]] = prop.$clone(srcStack, dstStack);
            }
        }
        return obj;
    }
});

/*=====================================*
 * Array.prototype
 * - $clone()
*=====================================*/

defineMethods([ Array.prototype ], {
    '$clone': function (srcStack, dstStack) {
        var thisArr = this.valueOf(),
            newArr = [],
            keys = Object.keys(thisArr),
            index,
            element;

        srcStack = srcStack || [];
        dstStack = dstStack || [];
        srcStack.push(this);
        dstStack.push(newArr);

        for (var i = 0; i < keys.length; i++) {
            element = thisArr[keys[i]];
            if (element === undefined || element === null) {
                newArr[keys[i]] = element;
            } else if (!element.$isFunction()) {
                if (element.$isPlainObject()) {
                    index = srcStack.lastIndexOf(element);
                    if (index > 0) {
                        newArr[keys[i]] = dstStack[index];
                        continue;
                    }
                }
            }
            newArr[keys[i]] = element.$clone(srcStack, dstStack);
        }
        return newArr;
    }
});

/*=====================================*

* Object.prototype

* - $clone()

*=====================================*/

defineMethods([ Object.prototype ], {

'$clone': function (srcStack, dstStack) {

var obj = Object.create(Object.getPrototypeOf(this)),

keys = Object.keys(this),

index,

prop;

srcStack = srcStack || [];

dstStack = dstStack || [];

srcStack.push(this);

dstStack.push(obj);

for (var i = 0; i < keys.length; i++) {

prop = this[keys[i]];

if (prop === null || prop === undefined) {

obj[keys[i]] = prop;

}

else if (!prop.$isFunction()) {

if (prop.$isPlainObject()) {

index = srcStack.lastIndexOf(prop);

if (index > 0) {

obj[keys[i]] = dstStack[index];

continue;

}

obj[keys[i]] = prop.$clone(srcStack, dstStack);

}

return obj;

}

});

/*=====================================*

* Array.prototype

* - $clone()

*=====================================*/

defineMethods([ Array.prototype ], {

'$clone': function (srcStack, dstStack) {

var thisArr = this.valueOf(),

newArr = [],

keys = Object.keys(thisArr),

index,

element;

srcStack = srcStack || [];

dstStack = dstStack || [];

srcStack.push(this);

dstStack.push(newArr);

for (var i = 0; i < keys.length; i++) {

element = thisArr[keys[i]];

if (element === undefined || element === null) {

newArr[keys[i]] = element;

} else if (!element.$isFunction()) {

if (element.$isPlainObject()) {

index = srcStack.lastIndexOf(element);

if (index > 0) {

newArr[keys[i]] = dstStack[index];

continue;

}

newArr[keys[i]] = element.$clone(srcStack, dstStack);

}

return newArr;

}

});

接下來要針對 Date 和 RegExp 物件的深複製進行一些特殊處理：

/*=====================================*
 * Date.prototype
 * - $clone
 *=====================================*/

defineMethods([ Date.prototype ], {
    '$clone': function() { return new Date(this.valueOf()); }
});

/*=====================================*
 * RegExp.prototype
 * - $clone
 *=====================================*/

defineMethods([ RegExp.prototype ], {
    '$clone': function () {
        var pattern = this.valueOf();
        var flags = '';
        flags += pattern.global ? 'g' : '';
        flags += pattern.ignoreCase ? 'i' : '';
        flags += pattern.multiline ? 'm' : '';
        return new RegExp(pattern.source, flags);
    }
});

/*=====================================*

* Date.prototype

* - $clone

*=====================================*/

defineMethods([ Date.prototype ], {

'$clone': function() { return new Date(this.valueOf()); }

});

/*=====================================*

* RegExp.prototype

* - $clone

*=====================================*/

defineMethods([ RegExp.prototype ], {

'$clone': function () {

var pattern = this.valueOf();

var flags = '';

flags += pattern.global ? 'g' : '';

flags += pattern.ignoreCase ? 'i' : '';

flags += pattern.multiline ? 'm' : '';

return new RegExp(pattern.source, flags);

}

});

接下來就是 Number, Boolean 和 String 的 $clone 方法，雖然很簡單，但這也是必不可少的。這樣就能防止像單個字串這樣的物件錯誤地去呼叫 Object.prototype.$clone。

/*=====================================*
 * Number / Boolean / String.prototype
 * - $clone()
 *=====================================*/

defineMethods([
    Number.prototype,
    Boolean.prototype,
    String.prototype
], {
    '$clone': function() { return this.valueOf(); }
});

/*=====================================*

* Number / Boolean / String.prototype

* - $clone()

*=====================================*/

defineMethods([

Number.prototype,

Boolean.prototype,

String.prototype

], {

'$clone': function() { return this.valueOf(); }

});

比較各個深複製方法

特性	jQuery	lodash	JSON.parse	所謂“擁抱未來的深複製實現”
瀏覽器相容性	IE6+ (1.x) & IE9+ (2.x)	IE6+ (Compatibility) & IE9+ (Modern)	IE8+	IE9+
能夠深複製存在環的物件	丟擲異常 RangeError: Maximum call stack size exceeded	支援	丟擲異常 TypeError: Converting circular structure to JSON	支援
對 Date, RegExp 的深複製支援	×	支援	×	支援
對 ES6 新引入的標準物件的深複製支援	×	支援	×	×
複製陣列的屬性	×	僅支援RegExp#exec返回的陣列結果	×	支援
是否保留非源生物件的型別	×	×	×	支援
複製不可列舉元素	×	×	×	×
複製函式	×	×	×	×

執行效率

為了測試各種深複製方法的執行效率，我使用瞭如下的測試用例：

var x = {};
for (var i = 0; i < 1000; i++) {
    x[i] = {};
    for (var j = 0; j < 1000; j++) {
        x[i][j] = Math.random();
    }
}

var start = Date.now();
var y = clone(x);
console.log(Date.now() - start);

var x = {};

for (var i = 0; i < 1000; i++) {

x[i] = {};

for (var j = 0; j < 1000; j++) {

x[i][j] = Math.random();

}

var start = Date.now();

var y = clone(x);

console.log(Date.now() - start);

下面來看看各個實現方法的具體效率如何，我所使用的瀏覽器是 Mac 上的 Chrome 43.0.2357.81 (64-bit) 版本，可以看出來在3次的實驗中，我所實現的方法比 lodash 稍遜一籌，但比jQuery的效率也會高一些。希望這篇文章對你們有幫助~

深複製方法	jQuery	lodash	JSON.parse	所謂“擁抱未來的深複製實現”
Test 1	475	341	630	320
Test 2	505	270	690	345
Test 3	456	268	650	332
Average	478.7	293	656.7	332.3

參考資料

深入理解JavaScript之深淺複製
2023-03-07
JavaScript
JavaScript 淺複製和深複製
2023-01-16
JavaScript
JavaScript中的淺複製與深複製
2023-09-22
JavaScript
深入探索JavaScript中的structuredClone：現代深複製的解密指南
2024-05-10
JavaScriptStruct解密
詳談Javascript中的深複製和淺複製
2021-08-19
JavaScript
JavaScript之structuredClone現代深複製
2024-03-04
JavaScriptStruct
js 實現深複製/深複製
2024-03-11
JS
JavaScript 深複製的迴圈引用問題
2022-12-27
JavaScript
go的深複製跟淺複製
2024-06-12
Go
【web前端】用javascript實現物件的深複製
2018-08-06
Web前端JavaScript物件
Java引用複製、淺複製、深複製
2024-04-24
Java
淺複製和深複製的概念與值複製和指標複製（引用複製）有關淺複製 “指標複製深複製值複製
2024-10-11
指標
JS物件複製：深複製和淺複製
2021-08-18
JS物件
js 深複製
2024-07-29
JS
【JavaScript】聊一聊js中的淺複製與深複製與手寫實現
2024-07-13
JavaScriptJS
go slice深複製和淺複製
2021-07-18
Go
c#淺複製與深複製
2012-06-08
C#
python 淺複製、深複製坑
2024-10-23
Python
python 深複製和淺複製
2024-07-25
Python
js 淺拷貝（淺複製、淺克隆）、深拷貝（深複製、深克隆）
2018-12-24
JS
js物件深複製
2021-09-09
JS物件
python深複製和淺複製的區別
2024-10-24
Python
C#中的物件深複製和淺複製
2024-05-09
C#物件
[分享]javascript 陣列以及物件的深拷貝（複製陣列或複製物件）的方法
2018-02-05
JavaScript陣列物件
vue物件的深層複製
2018-08-19
Vue物件
python 的深淺複製
2024-02-27
Python
MySQL複製模式的全面剖析
2017-11-15
MySql模式
淺談JS中物件的淺複製和深複製
2019-07-09
JS物件
Java中物件的深複製和淺複製詳解
2016-01-07
Java物件
JavaScript執行機制深層剖析
2019-02-20
JavaScript
25. 深淺複製
2024-10-30
Python列表的深淺複製
2018-08-20
Python
Java 中的深複製和淺複製你瞭解嗎？
2024-05-21
Java
js 淺複製和深複製的區別和應用
2024-11-08
JS
Day 7.5 資料型別總結 + 複製淺複製深複製
2024-10-08
資料型別
對於複製普通物件深複製和淺複製是否一樣
2024-03-30
物件
Python 列表切片陷阱：引用、複製與深複製
2019-02-14
Python
Golang：deepcopy深複製工具庫
2024-05-10
Golang

深入剖析 JavaScript 的深複製

第三方庫的實現

Underscore —— _.clone()

jQuery —— $.clone() / $.extend()

lodash —— _.clone() / _.cloneDeep()

藉助 JSON 全域性物件

擁抱未來的深複製方法

比較各個深複製方法

執行效率

參考資料

相關文章