Question

这不是How to access the correct `this` context inside a callback?

的副本

部分答案可能相似，the Question is different。您可以从下面的评论中看到答案中有许多不同的解决方案，因为这是关于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)

Answer 2

class SomeClass {
  constructor(msg, elem) {
    this.msg = msg;
    elem.addEventListener('click', this._onClickListener.bind(this));
  }
  _onClickListener() {
    console.log(this.msg);
  }
}

var s = new SomeClass("hello", document.querySelector("button"));

<button>click me</button>

我可能不完全理解你，但它适用于bind。

基本上，bind 创建绑定函数的副本，this始终设置为指定的引用。（你也可以绑定参数，但在这种情况下这是无关紧要的。）

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

2 个答案: