Javascript如何使用onclick事件在类方法上调用另一个类方法？

Question

如何使用onclick事件调用另一个类方法？

当我尝试这样做时，会出现以下错误：

Uncaught TypeError: this.method1不是函数 at HTMLButtonElement.document.getElementById.onclick (example.html:24)

我怀疑onclick事件只接受回调函数而不是方法。

有没有解决方法？

以下是示例代码：

class Example {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.method2();
  }
  method1(evt) {
    console.log(evt)
    alert("Example Rendered")
  }

  method2() {
    document.getElementById("button").onclick = function() {
      this.method1(event);
    }
  }

}

new Example('alexander', '23');

<button id="button"> Click me </button>

- xaander1

Answer 1

关键字this在函数内部使用时具有不同的绑定方式。在这种情况下，它被重新绑定以引用按钮。由于您已经在使用ES6类，因此可以使用ES6箭头函数符号创建一个不会重新绑定this的函数：

document.getElementById("button").onclick = event => {
  this.method1(event);
}

为了完整回答这个问题，在ES5中，您可以像下面这样做：

document.getElementById("button").onclick = this.method1.bind(this);

这样可以确保在函数运行时this绑定到类，而不是按钮元素。

- IceMetalPunk

---

它对我有用。非常感谢。 - Gabriel Marcondes

Answer 2

document.getElementById("button").onclick = this.method1; 或者你可以使用旧的 var _this = this; 然后调用 _this.method1(event);

class Example {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.method2();
  }
  method1(evt) {
    console.log(evt)
    alert("Example Rendered")
  }

  method2() {
    document.getElementById("button").onclick = this.method1;
  }

}

new Example('alexander', '23');

<button id="button"> Click me </button>

- Chris Hemmens