无法阅读null的财产____

Question

作为练习，我经过了本教程，然后尝试创建一个将所有内容都放入自己的类中以清理它的版本，以便我可以添加一些自己的添加。问题是我遇到了似乎没有任何意义的错误。（所有评论的东西都填写在我的最后，但似乎与问题无关）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时会看到错误。