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(); 
});