"这"在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的count属性？

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的点击方法中的this指的是
dom节点而不是......本身？

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

因为 .addEventListener（）是设置这个指向捕获该事件的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.

当一个方法作为回调传递时，你要覆盖<的值code>这个，你可以用 .bind（）强制所需的这个 with it：

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中的所有函数调用都设置了这个的新值。有关该基本设置的详细信息，请参见此说明规则。

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（）。 此的值将完全丢失。就像你这样做：

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 事件）。

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（），如上所示强制适当的值调用方法时此。

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

作为参考，您可以找到这六种方式的描述此已设置，以便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());

箭头函数将保留的值为您自动避免需要前面示例中使用的 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屋！