“这个"在 es6 类方法中 [英] "This" within es6 class method

问题描述

出于某种原因，我在 es6 类中为this"得到了奇怪的值...

For some reason I'm getting weird values for "this" in my es6 class...

'use strict';
class Clicker {
  constructor(element) {
    this.count = 0;
    this.elem = element;
    this.elem.addEventListener('click', this.click);
    
    // logs Clicker { count:0, elem: button#thing} as expected
    console.log(this);
  }

  click() {
    // logs <button id="thing">...</button> as unexpected...
    console.log(this);
    this.count++;
  }
}


var thing = document.getElementById('thing');
var instance = new Clicker(thing);

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

为什么 Clickers 的 click 方法中的this"指的是 dom 节点而不是 ... 本身?

Why is the "this" inside of of the Clickers' click method referring to the dom node rather than ... itself?

更重要的是，如果我不能使用this"来做到这一点，我如何从其点击方法中引用 Clickers 的计数属性?

More importantly, how do I refer to Clickers' count property from within its' click method if I can't use "this" to do it?

推荐答案

为什么 Clickers 的 click 方法中的this"是指dom 节点而不是 ... 本身?

Why is the "this" inside of of the Clickers' click method referring to the dom node rather than ... itself?

因为 .addEventListener() 的规范是将 this 指针设置为捕获事件的 DOM 元素.这就是它的工作原理.

Because the specification for .addEventListener() is to set the this pointer to the DOM element that caught the event. That's how it is designed to work.

当传递一个方法作为回调，你想覆盖this的值时，你可以使用.bind()来强制的期望值这个:

When passing a method as a callback where you want to override the value of this, you can use .bind() to force the desired value of this with it:

this.elem.addEventListener('click', this.click.bind(this));

说明:

Javascript 中的所有函数调用都会根据函数的调用方式设置一个新的 this 值.请参阅此说明，了解有关该基本集的更多信息规则.

All function calls in Javascript set a new value of this according to how the function is called. See this explanation for further info on that basic set of rules.

最重要的是，当你这样做时:

On top of that, when you do this:

this.elem.addEventListener('click', this.click);

您只是获取this.click 方法并将该方法单独传递给addEventListener().this 的值将完全丢失.就好像你在这样做:

You are just getting the this.click method and passing that method alone to addEventListener(). The value of this will be completely lost. It's as if you are doing this:

var m = this.click;     // m here is just a reference to Clicker.prototype.click
this.elem.addEventListener('click', m);

在此之上，.addEventListener() 专门用于在调用回调时设置它自己的 this 值(指向 thiscode> 在创建事件的元素处).

On top of this, .addEventListener() is specifically built to set it's own value of this when it calls the callback (to point this at the element creating the event).

因此，您可以使用如上所示的 .bind() 来强制在调用您的方法时设置 this 的正确值.

So, you can use .bind() as shown above to force the proper value of this to be in place when your method is called.

作为参考，你可以找到这六个的描述this 为 Javascript 中的函数调用设置的方法是有用的.

For reference, you may find this description of the six ways that this is set for a function call in Javascript to be useful.

其他选项

我发现 .bind() 是最清晰的定义方式，但您也可以使用本地匿名函数:

I find .bind() to be the clearest way of defining this, but you could also use either a local anonymous function:

var self = this;
this.elem.addEventListener('click', function() {
    self.click();
});

或者在 ES6 中，一个箭头函数:

or in ES6, an arrow function:

this.elem.addEventListener('click', () => this.click());

箭头函数会自动为你保留this的值，以避免需要前面例子中使用的self引用.

The arrow function will preserve the value of this for you automatically to avoid needing the self reference used in the prior example.

这篇关于“这个"在 es6 类方法中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！