JS原型設計n-ary方法

Question

事情是我有一個JS類，並且想要創建一個n-ary方法到它的原型（Whisp.prototype.draw），所以它不會一遍又一遍地實例化。我什麼瀏覽器控制檯告訴我是

Uncaught TypeError: w.draw is not a function

我可能誤解了一些有關JS原型，所以這裏是代碼的相關部分：

// Random generators 

function randomInt(min, max) 
{ 
    return Math.floor(Math.random() * (max - min)) + min; 
} 

// Whisp object + its methods 

var WHISP_TURN_CAP = 10, WHISP_WANDER_CAP = 2, WHISP_SIZE = 2, 
    WHISP_COUNT = 4; 

var Whisp = function(position) 
{ 
    this.rotation = []; 
    this.position = position; 

    for (var i = 0; i < 3; i++) 
     this.rotation.push(randomInt(-WHISP_TURN_CAP, WHISP_TURN_CAP)) 
    this.rotation.push(1) 
} 

Whisp.prototype.wander = function() 
{ 
    var angle; 
    for (var i = 0; i < 3; i++) 
    { 
     angle = randomInt(-WHISP_WANDER_CAP, WHISP_WANDER_CAP+1); 
     while (Math.abs(this.rotation[i] + angle) > WHISP_TURN_CAP) 
      angle = randomInt(-WHISP_WANDER_CAP, WHISP_WANDER_CAP+1); 
     this.rotation[i] += angle; 
     this.position = matrixProduct(this.position, i, this.rotation[i]); 
    } 
}; 

Whisp.prototype.draw = function(center) 
{ 
    context.setFill('#60FF55'); 
    context.fillOval(
      center[0]+this.position[0]-WHISP_SIZE, 
      center[1]+this.position[1]-WHISP_SIZE, 
      center[0]+this.position[0]+WHISP_SIZE, 
      center[1]+this.position[1]+WHISP_SIZE 
     ); 
}; 

// Generate actual whisps 

var whisps = []; 
for (var i = 0; i < WHISP_COUNT; i++) 
    whisps.push(new Whisp([800,400,0,1])); 

// Update function (drawing onto canvas) 

var canvas = $('#backgroundCanvas')[0], context = canvas.getContext('2d'); 

function update() 
{ 
    for (var w in whisps) 
    { 
     w.draw([800,450]); 
     w.wander(); 
    } 
    console.log('update();'); 
    window.setTimeout(update, 20); 
} 
var whisps = []; 
for (var i = 0; i < WHISP_COUNT; i++) 
    whisps.push(new Whisp([800,400,0,1])); 

// Update function (drawing onto canvas) 

var canvas = $('#backgroundCanvas')[0], context = canvas.getContext('2d'); 

function update() 
{ 
    for (var w in whisps) 
    { 
     w.draw([800,450]); 
     w.wander(); 
    } 
    console.log('update();'); 
    window.setTimeout(update, 20); 
} 

update(); 

它的所有包裹在$（文件）。就緒（function（）{...}）。感謝您的答案:)。

Answer 1

您應該避免對數組使用for ...in，因爲它不會迭代未定義的索引，也不能保證按順序迭代數組。
見：Why is using "for...in" with array iteration a bad idea?

但是這裏的問題是，w存儲在陣列中的項目的關鍵：

for (var w in whisps) 
{ 
    w.draw([800,450]); 
    w.wander(); 
} 

，它應該是：

for (var w in whisps) 
{ 
    whisps[w].draw([800,450]); 
    whisps[w].wander(); 
} 

甚至更​​好：

for (var i = 0; i < whisps.length; i++) { 
    whisps[i].draw([800,450]); 
    whisps[i].wander(); 
} 

這也是通常更快：Javascript for..in vs for loop performance

我注意到你正在使用canvas所以不關心IE8，在這種情況下Array.prototype.forEach()是另一種解決辦法，我喜歡，因爲它創造了迭代一個新的範圍：

whisps.forEach(function(w) { 
    w.draw([800,450]); 
    w.wander(); 
});