Question

作为练习，我经历了this tutorial，然后尝试创建一个版本，将所有内容放入自己的类中进行清理，以便我可以添加一些自己的添加内容。问题是我遇到了一个似乎没有任何意义的错误。（所有评论的内容都填写在我的最后，但它似乎与问题无关）Uncaught TypeError: Cannot read property 'lastRender' of null at loop (game-loop.js:13)

class GameLoop {
  constructor(player, canvas) {
    // Set other variables
    this.lastRender = 0;
    window.requestAnimationFrame(this.loop);
  }

  loop(timestamp) {
    let progress = timestamp - this.lastRender; // This is ln. 13 in the actual program

    this.update(progress);
    this.draw();

    this.lastRender = timestamp;
    window.requestAnimationFrame(this.loop);
  }

  update(progress) {
    // Update function
  }

  draw() {
    // Draw function
  }

}

此外，当我从类中删除lastRender变量时，它会停止向我提供该错误，而是说Uncaught TypeError: Cannot read property 'update' of null at loop (game-loop.js:15)

Answer 1

您需要使用.bind()使this具有正确的值。改变这个：

window.requestAnimationFrame(this.loop);

到此：

window.requestAnimationFrame(this.loop.bind(this));

当您使用this.loop时将方法作为回调传递时，this的值不会传递，只会传递给方法。因此，当window.requestAnimationFrame()调用loop()时，它不会以使this在方法中具有正确值的方式调用它，因此您会收到您在尝试使用this.anything。

无法读取属性____的null

1 个答案: