Javascript &引用；这"；es6类内方法

出于某种原因，我在es6课程中得到了奇怪的“this”值

“严格使用”；
类点击器{
构造函数（元素）{
此值为0.count；
this.elem=元素；
this.elem.addEventListener（'click'，this.click）；
//按预期记录点击器{count:0，elem:button#thing}
console.log（this）；
}
单击（）{
//日志…作为意外事件。。。
console.log（this）；
这个.count++；
}
}
var thing=document.getElementById（'thing'）；
var实例=新的点击器（对象）
单击我
为什么点击器点击方法中的“this”指的是
dom节点而不是。。。本身

因为
.addEventListener（）
的规范是将
这个
指针设置为捕获事件的DOM元素。这就是它的工作原理


将方法作为回调传递时，如果要覆盖
this
的值，可以使用
.bind（）
强制使用
this
的所需值：

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

说明：

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

除此之外，当您执行此操作时：

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

您刚刚获得了
这个。单击
方法并将该方法单独传递给
addEventListener（）
。
此
的值将完全丢失。就好像你在这样做：

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

除此之外，
.addEventListener（）
是专门构建的，用于在调用回调时设置自己的
this
值（指向创建事件的元素）

因此，您可以使用如上所示的
.bind（）
，在调用方法时强制执行
this
的正确值


作为参考，您可能会发现Javascript中的函数调用非常有用


其他选项

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

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

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

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

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

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

箭头函数将自动为您保留
此
的值，以避免需要前面示例中使用的
self
引用。
我知道这很简单。希望您的解决方案在大约12分钟内被接受。@AndrewLuhring-注意，我添加了更多的解释。在这个答案之上，您还可以使用
this.elem.addEventListener（'click'，（）=>this.click（））来解决它Ibelieve@sniels-我在回答中添加了您的选项和另一个选项。好主意。看起来像这样
this.elem.addEventListener（'click'，this.click.bind（this））语法不允许我们删除侦听器，就像它是另一个函数一样。但我真的不明白。谁能解释一下为什么会这样？