知識星球作者：鄒潤陽（@jerry蛋蛋哥）
網址：http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/
一年前我曾寫過一篇 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
讓我們來看一下 Underscore 的原始碼：
// 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}]
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
在 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]
透過上面這個例子可以初見端倪，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]’;
藉助 JSON 全域性物件
相比於上面介紹的三個庫的做法，針對純 JSON 資料物件的深複製，使用 JSON 全域性物件的 parse 和 stringify 方法來實現深複製也算是一個簡單討巧的方法。然而使用這種方法會有一些隱藏的坑，它能正確處理的物件只有 Number, String, Boolean, Array, 扁平物件，即那些能夠被 json 直接表示的資料結構。
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(); //
首先定義一個輔助函式，用於在預定義物件的 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]]
});
}
});
}
為了避免和源生方法衝突，我在方法名前加了一個 $ 符號。而這個方法的具體實現很簡單，就是遞迴深複製。其中我需要解釋一下兩個引數：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;
}
});
接下來要針對 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);
}
});
接下來就是 Number, Boolean 和 String 的 $clone 方法，雖然很簡單，但這也是必不可少的。這樣就能防止像單個字串這樣的物件錯誤地去呼叫 Object.prototype.$clone。
/*=====================================*
* 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);
下麵來看看各個實現方法的具體效率如何，我所使用的瀏覽器是 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 |
參考資料
- Underscore – clone
- Stackoverflow – How do you clone an array of objects using underscore?
- jQuery API
- lodash docs #clone
- MDN – JSON.stringify