JS原型制作n元法

Question

问题是我有一个 JS class 并且想为其原型创建一个 n 元方法 (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();

所有内容都包含在 $(document).ready(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();
});

JS原型制作n元法

JS prototyping n-ary method

html

javascript

methods

prototyping

canvas