ES6 类:在方法上应用“addEventListener"访问“this" [英] ES6 Class: access to 'this' with 'addEventListener' applied on method

问题描述

在这个 es6 脚本中，点击事件不起作用，因为 sayHello 方法是用 this.elm (

) 作为 this.

如何在不失去作用域的情况下将事件关联到方法?

类玩家{构造函数(名称){this.name = 名称；this.elm = document.createElement('div');this.elm.addEventListener('click', this.sayHello);}问好() {console.log(this.name + ' say: "hello!"');//'undefined say '你好！"';}杀(){console.log(`RIP ${this.name} :'(`);this.elm.addClass('死');this.elm.removeEventListener('click', this.sayHello);}}

解决方案

这是一个通用的 JS 问题，但它的核心是

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

与

没有什么不同

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

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

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

或者在 ES6 中，使用箭头函数:

this.elm.addEventListener('click', evt => this.sayHello(evt));

但是请注意，这两种解决方案都会破坏您在 kill 中的(已经稍微损坏的)逻辑，因为

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

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

我建议两种选择:

//创建一个新的绑定函数，并给它一个新的名字//这样 'this.sayHello()' 调用仍然有效.this.boundSayHello = evt =>this.sayHello(evt);this.elm.addEventListener('click', this.boundSayHello);this.elm.removeEventListener('click', this.boundSayHello);

或

//绑定同名函数，使用`.bind`代替//箭头函数选项.this.sayHello = this.sayHello.bind(this);this.elm.addEventListener('click', this.sayHello);this.elm.removeEventListener('click', this.sayHello);

In this es6 script, the click event don't works because sayHello method is called with this.elm (<div>) as this.

how to associate a event to a method without loose the scope?

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);
  }
}

解决方案

This is a general JS issue, but the core of it is that

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

is no different than

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

You are passing a function as the event handler, but have not ensured that when fn is called that this will be set to your desired value. The easiest way to do this in ES5 would be

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

or in ES6, using an arrow function:

this.elm.addEventListener('click', evt => this.sayHello(evt));

Note however that both of these solutions will break your (already slightly broken) logic in kill because

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

You don't have any reference to the function that you attached anymore, so you have no way of removing the event handler.

I'd suggest two options:

// 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);

or

// Bind the function with the same name and use `.bind` instead of the
// arrow function option.
this.sayHello = this.sayHello.bind(this);
this.elm.addEventListener('click', this.sayHello);
this.elm.removeEventListener('click', this.sayHello);

这篇关于ES6 类:在方法上应用“addEventListener"访问“this"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！