在单击事件的类中调用 Javascript 函数 [重复]

Question

我正在尝试使用类在纯 javascript 中编写一些代码。我可以在 React 和 JQuery 中轻松做到这一点，并且无需类，但我真的很难理解我在纯 javascript 类中遇到的问题。

这是我的代码：

class Game {
  constructor() {
    this.balls = []
    for (let i = 1; i <= 80; i++) {
      this.balls.push(i)
    }
  }
  getBall() {
    // https://stackoverflow.com/a/4960020/3482632
    const ball = Math.floor(Math.random() * 80) + 1
    this.balls = this.balls.filter(n => n !== ball)
    return ball
  }
  drawBall(e) {
    const ball = this.getBall()
    console.log("ball drawn: " + ball)
  }
}

let g = new Game()
g.drawBall()
//const drawBallButton = document.getElementById("draw_ball")
//drawBallButton.onclick = g.drawBall

编写的代码工作正常，但我希望 drawBall 在按钮单击时触发。如果我注释掉 g.drawBall 代码并取消注释最后两行，drawBall 触发就好了，但是我得到以下错误：

未捕获的类型错误：this.getBall 不是函数 在 HTMLButtonElement.drawBall

我尝试将点击处理程序放在构造函数中，但没有任何区别。我做错了什么？

TIA

Answer 1

您将 drawBall 作为常规函数调用，因此缺少 this 上下文。

试试这个：

const drawBallButton = document.getElementById("draw_ball");
drawBallButton.onclick = () => g.drawBall();