ES6类：在方法[复制]上应用'addEventListener'访问'this'

Posted 2021-03-29

这个问题在这里已有答案：

• How to access the correct `this` inside a callback? 10个答案

在这个es6脚本中，click事件不起作用，因为使用sayHello（this.elm）调用<div>方法作为this。

如何在不丢失范围的情况下将事件与方法相关联？

class player{
  constructor (name) {
    this.name = name;
    this.elm = document.createElement('div');
    this.elm.addEventListener('click', this.sayHello);
  }
  sayHello() {
    console.log(this.name + ' say: "hello!"'); // 'undefined say 'hello!"';
  }
  kill() {
    console.log(`RIP ${this.name} :'(`); 
    this.elm.addClass('dead');
    this.elm.removeEventListener('click', this.sayHello);
  }
}

答案

这是一个普遍的JS问题，但它的核心是

this.elm.addEventListener('click', this.sayHello);

没有什么不同

var fn = this.sayHello;
this.elm.addEventListener('click', fn);

您正在传递一个函数作为事件处理程序，但是当调用fn时，qzxswpoi将被设置为您想要的值。在ES5中执行此操作的最简单方法是

this

或者在ES6中，使用箭头功能：

this.elm.addEventListener('click', this.sayHello.bind(this));

但请注意，这两种解决方案都会破坏this.elm.addEventListener('click', evt => this.sayHello(evt)); 中的（已经略微破坏）逻辑，因为

kill

您没有任何对您附加的函数的引用，因此您无法删除事件处理程序。

我建议两个选择：

this.elm.removeEventListener('click', /* what? */);

要么

// Create a new function that is bound, and give it a new name
// so that the 'this.sayHello()' call still works.
this.boundSayHello = evt => this.sayHello(evt);
this.elm.addEventListener('click', this.boundSayHello);
this.elm.removeEventListener('click', this.boundSayHello);