添加方法，以自定義對象在Javascript

Question

可能重複：
Use of 'prototype' vs. 'this' in Javascript?

我去不同的網站，但無法理解添加方法自定義對象的下列方式之間的區別：

方法1：

function circle(radius){ 
    this.radius = radius; 
    this.area = function(){ return 3.14*this.radius*this.radius;} 
} 

方法2：

function circle(radius){ 
    this.radius = radius; 
} 
circle.prototype.area = function(){ return 3.14*this.radius*this.radius; } 

是否有任何性能或設計問題的方法之一，已經和其他不？

Answer 1

這裏看出區別的一種方法：

var circle1 = circle(1); 
var circle2 = circle(1); 
alert(circle1.area == circle2.area); 

對於方法一，你會看到false而方法2得到的true。這是因爲在第一種情況下，您爲每個創建的對象分配一個新的閉包函數，但兩個對象的功能不同，即使兩者都執行相同的操作。在第二種情況下，對象與其area方法共享相同的原型對象，該方法在兩種情況下當然是相同的。

通常方法2是優選的有以下幾個原因：

1. 對象的創建速度更快，因爲只有自定義屬性需要被初始化。
2. 您不會浪費內存來實例化同一事物的多個副本。
3. 通過調用Object.hasOwnProperty可以輕鬆找出哪些對象屬性具有自定義值。

還有一些缺點要記住。

1. 即使您從不創建任何對象，您也總是花時間設置原型。
2. 屬性訪問速度稍慢，因爲JavaScript引擎需要先檢查對象屬性，然後再檢查原型對象的屬性（現代JavaScript引擎對此進行了優化）。
3. 在原型上放置對象或數組時有一個共同的陷阱，它們將在所有對象實例之間共享。

下面是常見的錯誤的例子：

function NumberCollection() 
{ 
} 
NumberCollection.prototype = { 
    numbers: [], 
    sum: function() 
    { 
     var result = 0; 
     for (var i = 0; i < this.numbers.length; i++) 
      result += this.numbers[i]; 
     return result; 
    } 
} 

var c1 = new NumberCollection(); 
c1.numbers.push(5); 
alert(c1.sum()); // Shows 5 
var c2 = new NumberCollection(); 
c2.numbers.push(6); 
alert(c2.sum()); // Oops, shows 11 because c1.numbers and c2.numbers is the same 

這裏正確的做法是：

function NumberCollection() 
{ 
    this.numbers = []; 
} 
NumberCollection.prototype = { 
    numbers: null, 
    sum: function() 
    { 
     var result = 0; 
     for (var i = 0; i < this.numbers.length; i++) 
      result += this.numbers[i]; 
     return result; 
    } 
} 

Answer 2

第一種方法（我們稱之爲類型1）將area()函數添加到對象本身。每次用new構造一個circle對象時，其主體將被複製到（！）到新實例。

第二種方法（類型2）將area()函數添加到對象原型（原型是層次結構中的「上一層」）。每次創建circle的新實例時，只會複製radius屬性。

現在，當您在第二個對象的實例上調用area()時，JavaScript無法在該對象本身上找到該函數。現在它「上升」了原型鏈，並使用它找到的那個名稱的第一個函數。

現在，這有幾方面的含義：

1. 新的對象實例將會更小（更少的物理代碼）
2. 您可以一次同時改變area實施2型的所有現有對象他們住（通過改變原型），你不能這樣做類型1
3. 你可以覆蓋功能area類型2的單個實例，同時保持功能的「原始實現」