Question

我用画布创建了一个简单的移动粒子。

代码：

var c = document.getElementById('game'),
    ctx = c.getContext('2d');
var Particle = function(x, y) {
    this.x = x;
    this.y = y;
    this.color = 'tomato';
}
Particle.prototype.update = function(i) {
    console.log(p.length);
    this.x++;
    this.y++;
    if (this.y > 400) {
        p.splice(i, 1);
    }
}
var p = [];
for (var i = 0; i < 5; i++) {
    p.push(new Particle(i * 10, i * 50));
}
Particle.prototype.render = function() {
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, 3, 0, 2 *
        Math.PI);
    ctx.fill();
    ctx.restore();
}

function draw() {
    ctx.clearRect(0, 0, 400, 400);
    for (var i = 0; i < p.length; i++) {
        p[i].update(i);

        // STATEMENT 1
        p[i].render();
        // STATEMENT 2
        Particle.prototype.render.call(
            p[i]);
    }
}

首先，两个STATEMENT 1 ND STATEMENT 2调用渲染功能。我的问题是STATEMENT 1，它显示一个控制台错误

Uncaught TypeError: Cannot read property 'render' of undefined

但是STATEMENT 2工作正常，没有任何错误。我能知道原因吗？

先谢谢

Answer 1

当你迭代它时，你有更新修改p的内容。这通常是一个坏主意，它会导致你的问题。

由于您将元素拼接出数组，但是数组在绘制函数中完成迭代的时间，对象不再存在。所以，你得到p [i]，它可能不再存在。更糟糕的是，你的更新数组要求索引，你没有传递。

最简单的方法是扭转你在数组中迭代的方式：

for (var i = p.length; i > 0; --i) {
    // cache a copy in case it goes away.
    var pPoint = p[i];
    // still bad form.
    pPoint.update(i);
    pPoint.render();
}

总的来说，我认为你可能会遇到更多问题。

Javascript函数上下文

1 个答案: