2013-03-08 102 views
2

我在這裏有一個很好的問題。我需要了解這個原型對象的數組

Foo = function(){ 
}; 


Foo.prototype = { 
buttons: new Array(), 
index:'', 
add: function(value) 
{ 
    this.buttons.push(value); 
}, 
clear:function(){ 
    this.buttons=new Array(); 
}, 
count:function(){ 
    return(this.buttons.length); 
}, 
setIndex:function(index){ 
    this.index; 
}, 
getIndex:function(index){ 
    return this.index; 
} 
}; 

var A= new Foo(); 
var B= new Foo(); 

A.add('toto'); 
B.add('tata'); 

A.setIndex(8); 
B.setIndex(44); 

alert(A.count()+"---"+A.getIndex()); 

該代碼給我:「2 --- 8」!

所以A.count()返回給我A.count()+ B.count()。與B.count()一樣!

任何人都可以解釋我這個,已經有這個問題嗎?怎麼做 ?我只需要數組「按鈕」是唯一的,適合每個對象。

回答

5

這不是典型的是如何繼承的作品,AB具有相同的原型,這意味着它們具有相同的buttons陣列。

在JavaScript中繼承爲原形,你想是每個「富」的對象有一個單獨的按鈕排列,但因此它在其所有實例共享你將它添加到Foo的原型。

你可以改變這一點:

var Foo = function(){ 
}; 

Foo = function(){ 
    this.buttons = []; //add an empty buttons array to every foo element. 
}; 

這將使它發揮作用,另一種方法是首先調用clear方法,它將實例化一個新buttons陣列。

請注意,原型繼承主要是關於共享功能而不是屬性。您希望每個Foo實例具有相同的功能,但每個實例都有自己的buttons陣列。

一些資源,幫助您:

Here is a good tutorial about how the prototypical chain works on MDN

Here is Addy Osmani's (Google) chapter about the constructor pattern從他的JavaScript模式一書中

您的代碼的一些其他提示:

語法new Array()可縮短到[]。在setIndex你實際上並沒有將索引分配給任何東西。 index也可能在Foo的構造函數中更好地聲明。

請注意,當您在原型鏈上存在此類屬性時設置對象的屬性時,會在對象上創建新屬性,而不是修改原型上的屬性。

+1

知識缺失!非常感謝你 – Flozza 2013-03-08 19:51:07

1

當您在原型中定義變量時,它將在Foo的所有實例中共享。您必須定義對象(函數)Foo中的行爲,以便爲Foo的每個實例都創建一個陣列實例。