javascript - 我在使用 setInterval 和类方法时遇到了很多麻烦

Question

我一直遇到奇怪的问题。在做了一些研究之后，我一直找不到关于它们的任何东西，所以我想我应该来这里展示它们。我有一个相当长的类(class)，但我会包括相关的部分:

class AnimatedSnake {

constructor(canvasId, coordinates) {

    this.coordinates = coordinates;
    this.direction = 2;

    this.ctx = document.getElementById(canvasId).getContext("2d");

    // 0 - .99, describes how far along snake is between coordinates
    this.progress = 0;
}

erase() {
    for (let i = 0; i < this.coordinates.length; i++) {
        let c1 = this.coordinates[i][0],
            c2 = this.coordinates[i][1];
        this.ctx.clearRect(c1 * 31, c2 * 31, 31, 31);
    }
}

next() {
    this.progress += 0.01;

    if (this.progress >= 1) {
        this.progress %= 1;

        let nextCoord = this.coordinates[4].slice();
        nextCoord[0] += ((this.direction % 2) * this.direction);
        nextCoord[1] += ((!(this.direction % 2) * (this.direction / 2)));
        this.coordinates.push(nextCoord);
        this.coordinates.shift();
    }
    console.log(this.erase);
    this.erase();
    this.draw();

}

}

到目前为止，如果我手动调用(即从控制台)，我可以无限期地调用 AnimatedSnake.next()。但是，当我将函数置于间隔或超时时 - setInterval(AnimatedSnake.next, 100) - 突然间，在第一次运行时，声称 AnimatedSnake.erase 不是一个函数。我尝试将 AnimatedSnake.erase() 直接放在间隔中，当我这样做时，由于某些荒谬的原因它告诉我它不能采用 AnimatedSnake.coordinates< 的 length 属性，它声称未定义。在我的代码中没有任何地方可以重新定义这些东西。 coordinates 已更改，但在任何时候都不应未定义。而erase当然是我从来不改的方法。有没有人知道为什么，当用 setInterval 或 setTimeout 调用这些时会发生奇怪的事情，但是如果我重复调用这些函数(即使在 for 循环中)而没有JavaScript 计时函数一切正常吗？我真的很难过。

Answer 1

考虑这两个片段:

animatedSnake.next()

和:

let method = animatedSnake.next;
method();

在第一个片段中 next被称为 animatedSnake 的成员对象，所以 this在 next 的范围内方法引用animatedSnake对象。

在第二个片段中 next方法与对象分离，所以 this不再指代 animatedSnake当 method 时的实例函数被调用。这就是将方法传递给另一个函数的方式，例如 setInterval作品。您可以使用 Function.prototype.bind手动设置上下文的方法:

setInterval(animatedSnake.next.bind(animatedSnake), 100)

或者用另一个函数包装语句:

setInterval(() => animatedSnake.next(), 100)