Javascript函数上下文

Javascript function context

本文关键字：上下文 函数 Javascript      更新时间：2023-09-26

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

代码:

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和STATEMENT 2都调用render函数。我的问题是对于STATEMENT 1，它显示控制台错误

Uncaught TypeError: Cannot read property 'render' of undefined

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

Thanks in Advance

当你遍历p的时候，你已经修改了p的内容。这通常是个坏主意，正是它导致了你的问题。

由于您正在将元素拼接出数组，但是当数组在draw函数中完成迭代时，对象不再存在。得到p[i]，它可能已经不存在了。更糟糕的是，你的update数组正在请求一个索引，而你没有传递这个索引。

最简单的方法是反转遍历数组的方式:

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

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

相关文章：