快捷導(dǎo)航

淺談Javascript中深復(fù)制

更新時間：2014年12月01日 09:23:31 投稿：hebedich

本文主要給大家介紹了javascript中深復(fù)制的實現(xiàn)方式，這里推薦給有需要的小伙伴參考下。

在javascript中，所有的object變量之間的賦值都是傳地址的，可能有同學(xué)會問哪些是object對象。舉例子來說明可能會比較好：

typeof(true)    //"boolean"

typeof(1)       //"number"

typeof("1")     //"string"

typeof({})      //"object"

typeof([])      //"object"

typeof(null)    //"object"

typeof(function(){})  //"function"

所以其實我們深復(fù)制主要需要處理的對象就是object對象，非object對象只要直接正常的賦值就好。我實現(xiàn)js深復(fù)制的思路就是：

遍歷所有該對象的屬性，
如果該屬性是"object"則需要特殊處理，
如果這個object對象比較特殊，是一個數(shù)組，那就創(chuàng)建一個新的數(shù)組并深復(fù)制數(shù)組里的元素
如果這個object對象是個非數(shù)組對象，那直接再對它遞歸調(diào)用深復(fù)制方法即可。
如果不是"object"，則直接正常復(fù)制就行。

下面就是我的實現(xiàn)了：

復(fù)制代碼代碼如下:

Object.prototype.DeepCopy = function () {
var obj, i;
obj = {};

for (attr in this) {
    if (this.hasOwnProperty(attr)) {
      if (typeof(this[attr]) === "object") {
        if (this[attr] === null) {
          obj[attr] = null;
        }
        else if (Object.prototype.toString.call(this[attr]) === '[object Array]') {
          obj[attr] = [];
          for (i=0; i<this[attr].length; i++) {
            obj[attr].push(this[attr][i].DeepCopy());
          }
        } else {
          obj[attr] = this[attr].DeepCopy();
        }
      } else {
        obj[attr] = this[attr];
      }
    }
}
return obj;
};

如果瀏覽器支持ECMAScript 5的話，為了深復(fù)制對象屬性的所有特性，可以使用

復(fù)制代碼代碼如下:

Object.defineProperty(obj, attr, Object.getOwnPropertyDescriptor(this, attr));

來替代

復(fù)制代碼代碼如下:

obj[attr] = this[attr];

直接在Object.prototype上實現(xiàn)該方法的好處是，所有對象都會繼承該方法。壞處是某些庫也會改寫Object對象，所以有時會發(fā)生沖突。這是需要注意的。具體使用方法如下：

復(fù)制代碼代碼如下:

Object.prototype.DeepCopy = function () { ... }

var a = { x:1 };

var b = a;

var c = a.DeepCopy();

a.x = 2;

b.x = 3;

console.log(a.x);   //3

console.log(b.x);   //3

console.log(c.x);   //1

以上就是關(guān)于深復(fù)制的講解了，不過今天既然我們講了深復(fù)制，那么想對應(yīng)的還有淺復(fù)制，我們就來簡單總結(jié)下他們之間的異同吧。

淺復(fù)制(影子克隆):只復(fù)制對象的基本類型,對象類型,仍屬于原來的引用.
深復(fù)制(深度克隆):不緊復(fù)制對象的基本類,同時也復(fù)制原對象中的對象.就是說完全是新對象產(chǎn)生的.

您可能感興趣的文章: