在 Click 事件中调用 class 中的 Javascript 函数

Question

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

这是我的代码：

class Game {
  constructor() {
    this.balls = []
    for (let i = 1; i <= 80; i++) {
      this.balls.push(i)
    }
  }
  getBall() {
    // 
    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();

在 Click 事件中调用 class 中的 Javascript 函数

Calling Javascript function in class on Click event

javascript

es6-class