是否有使用成员函数作为事件侦听器的ES6快捷方式？

Question

这不是如何在回调中访问正确的`this`上下文的重复？

一些问题的答案可能是相似的,该问题是不同的.您可以从下面的评论中看到答案中有许多不同的解决方案,因为这是关于ES6而不是旧的JavaScript.这个问题也是关于事件监听器,而不是回调.这样的其他解决方案不适用于普通回调.

---

如果我有一个类,并且我想让某个事件调用该类中的函数,我最终必须编写一堆样板文件

class SomeClass {
  constructor(msg, elem) {
    this.msg = msg;
    elem.addEventListerer('click', (...args) => {  // Can these 
      this._onClickListener(...args);              // three lines
    });                                            // be simpler?
  }
  _onClickListener() {
     console.log(this.msg);
  }
}

使用类方法作为监听器是否有一些ES6语法糖？理想情况下,我希望能够做类似的事情

class SomeClass {
  constructor(msg, elem) {
    this.msg = msg;
    elem.addEventListener('click', this._onClickListener);
  }
  _onClickListener() {
     console.log(this.msg);
  }
}

无论事件如何,都要正确设置this 并传递所有参数.

但这不起作用.没有设置样板this.

class SomeClass {
  constructor(msg, elem) {
    this.msg = msg;
    elem.addEventListener('click', this._onClickListener);
  }
  _onClickListener() {
    console.log(this.msg);  // this is wrong
  }
}

var s = new SomeClass("hello", document.querySelector("button"));

<button>click me</button>

Answer 1

你必须绑定上下文:

class SomeClass {
  constructor(msg, elem) {
    this.msg = msg;
    this._onClickListener = this._onClickListener.bind(this);
    elem.addEventListener('click', this._onClickListener);
  }
  _onClickListener() {
     console.log(this.msg);
  }
}

此解决方案的其他优点是您可以删除侦听器 elem.removeEventListener(this._onClickListener)