JS中如何進行對象的深拷貝

在JS中，一般的=號傳遞的都是對象/數組的引用，並沒有真正地拷貝一個對象，那如何進行對象的深度拷貝呢？如果你對此也有疑問，這篇文章或許能夠幫助到你

一、對象引用、淺層拷貝與深層拷貝的區別

js的對象引用傳遞理解起來很簡單，參考如下代碼：

var a = {name:'wanger'}
var b = a ;
a===b // true
b.name = 'zhangsan'
a.name //'zhangan'

上述代碼中，使用了=進行賦值，於是b指向了a所指向的棧的對象，也就是a與b指向了同一個棧對象，所以在對b.name賦值時，a.name也發生了變化。為了避免上面的情況，可以對對象進行拷貝，代碼如下：

var a = {name:'wanger'}
var b = Object.assign({}, a)
a===b // false
b.name = 'zhangsan'
a.name //'wanger'

上面代碼將原始對象拷貝到一個空對象，就得到了原始對象的克隆，這時候a與b指向的是不同的棧對象，所以對b.name重新復制也不會影響到a.name。但是如果a.name是一個對象的引用，而不是一個字符串，那么上面的代碼也會遇到一些問題，參考如下代碼：

var a = {name:{firstName:'wang',lastName:'er'}}
var b = Object.assign({}, a)
a===b // false
b.name.firstName = 'zhang'
a.name.firstName //'zhang'

b.name.firstName又影響到了a.name.firstName，這是因為Object.assign()方法只是淺層拷貝，a.name是一個棧對象的引用，賦值給b時，b.name也同樣是這個棧對象的引用，很多時候，我們不想讓這種事情發生，所以我們就需要用到對象的深拷貝。

二、使用JSON.parse（）與JSON.stringify（）對對象進行拷貝

通常情況下，我們可以使用JSON.parse（）與 JSON.stringify（）實現對象的深克隆，如下：

var clone = function (obj) {
    return JSON.parse(JSON.stringify(obj));
}

這種方法只適用於純數據json對象的深度克隆，因為有些時候，這種方法也有缺陷，參考如下代碼：

var clone = function (obj) {
    return JSON.parse(JSON.stringify(obj));
}
var a = {a:function(){console.log('hello world')},b:{c:1},c:[1,2,3],d:"wanger",e:new Date(),f:null,g:undefined}
var b = clone(a)

打印如下：

我們發現，上述的方法會忽略值為function以及undefied的字段，而且對date類型的支持也不太友好。

更要緊的是，上述方法只能克隆原始對象自身的值，不能克隆它繼承的值，參考如下代碼：

function Person (name) {
    this.name = name
}
var wanger = new Person('王二')
var newwanger = clone(wanger)
wanger.constructor === Person // true
newwanger.constructor === Object // true

打印如下：

我們發現，克隆的對象的構造函數已經變成了Object,而原來的對象的構造是Person。

三、目前沒有發現bug的對象深拷貝方法

王二在網上參考了不少文章，方法都不盡完美，於是在前人基礎上改造了一下，方法如下，目前沒有發現有什么bug：

var clone = function (obj) { 
    if(obj === null) return null 
    if(typeof obj !== 'object') return obj;
    if(obj.constructor===Date) return new Date(obj); 
    var newObj = new obj.constructor ();  //保持繼承鏈
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {   //不遍歷其原型鏈上的屬性
            var val = obj[key];
            newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; // 使用arguments.callee解除與函數名的耦合
        }
    }  
    return newObj;  
}; 

這里有三點需要注意：
1、用new obj.constructor ()構造函數新建一個空的對象，而不是使用{}或者[],這樣可以保持原形鏈的繼承；
2、用obj.hasOwnProperty(key)來判斷屬性是否來自原型鏈上，因為for..in..也會遍歷其原型鏈上的可枚舉屬性。
3、上面的函數用到遞歸算法，在函數有名字，而且名字以后也不會變的情況下，這樣定義沒有問題。但問題是這個函數的執行與函數名 factorial 緊緊耦合在了一起。為了消除這種緊密耦合的現象，需要使用 arguments.callee。

---

2017-10-03添加，之前沒有考慮正則對象的問題，這里再做一下修改：

var clone = function (obj) { 
    if(obj === null) return null 
    if(typeof obj !== 'object') return obj;
    if(obj.constructor===Date) return new Date(obj); 
    if(obj.constructor === RegExp) return new RegExp(obj);
    var newObj = new obj.constructor ();  //保持繼承鏈
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {   //不遍歷其原型鏈上的屬性
            var val = obj[key];
            newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; // 使用arguments.callee解除與函數名的耦合
        }
    }  
    return newObj;  
}; 

原文地址：王玉略的個人網站