DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 淺談Javascript中深復制
淺談Javascript中深復制
編輯:JavaScript基礎知識     

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

復制代碼 代碼如下:
typeof(true)    //"boolean"
typeof(1)       //"number"
typeof("1")     //"string"
typeof({})      //"object"
typeof([])      //"object"
typeof(null)    //"object"
typeof(function(){})  //"function"

所以其實我們深復制主要需要處理的對象就是object對象,非object對象只要直接正常的賦值就好。我實現js深復制的思路就是:

遍歷所有該對象的屬性,
如果該屬性是"object"則需要特殊處理,
如果這個object對象比較特殊,是一個數組,那就創建一個新的數組並深復制數組裡的元素
如果這個object對象是個非數組對象,那直接再對它遞歸調用深復制方法即可。
如果不是"object",則直接正常復制就行。

下面就是我的實現了:

復制代碼 代碼如下:
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的話,為了深復制對象屬性的所有特性,可以使用

復制代碼 代碼如下:
Object.defineProperty(obj, attr, Object.getOwnPropertyDescriptor(this, attr));

來替代

復制代碼 代碼如下:
obj[attr] = this[attr];

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

復制代碼 代碼如下:
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

以上就是關於深復制的講解了,不過今天既然我們講了深復制,那麼想對應的還有淺復制,我們就來簡單總結下他們之間的異同吧。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved