es6类方法中的“this”[重复]

Question

出于某种原因，我在es6课上给“这个”取了个奇怪的值...

null

js prettyprint-override">'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>

null

为什么clickers的click方法中的“this”指的是dom节点而不是...本身？

更重要的是，如果我不能使用“this”来做的话，我如何从它的click方法中引用clickers的count属性？

Answer 1

为什么clickers的click方法中的“this”指的是dom节点而不是...本身？

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

当将方法作为要重写this值的回调传递时，可以使用.bind()强制使用this的所需值：

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

说明：

Javascript中的所有函数调用都根据函数的调用方式设置this的新值。有关该基本规则集的进一步信息，请参阅本说明。

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

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

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

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

在此基础上，.addeVentListener()被专门构建为在调用回调时设置自己的this值（将this指向创建事件的元素）。

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

作为参考，您可能会发现在Javascript中为函数调用设置this的六种方式的描述非常有用。

其他选项

我发现.bind()是定义这一点的最清楚的方法，但您也可以使用本地匿名函数：

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

或在ES6中,箭头函数：

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

箭头函数将自动为您保留this的值，以避免需要前面示例中使用的self引用。