聚合物2.0：为什么我们需要一个匿名函数时势在必行添加的侦听

Question

在新文档的聚合物2.0（https://www.polymer-project.org/2.0/docs/devguide/events#imperative-listeners），它提供了以下例子：

ready() { 
    super.ready(); 
    this.addEventListener('click', e => this._myClickListener(e)); 
} 

命令式添加事件侦听器。如果你想删除一个监听器，我们就必须做到以下几点（按文档）：

constructor() { 
    super(); 
    this._boundListener = this._myLocationListener.bind(this); 
} 

connectedCallback() { 
    super.connectedCallback(); 
    window.addEventListener('hashchange', this._boundListener); 
} 

disconnectedCallback() { 
    super.disconnectedCallback(); 
    window.removeEventListener('hashchange', this._boundListener); 
} 

这个意义，我表面上;我们需要确保对该函数的相同引用同时传递给remove和add事件侦听器，因为这是它为不同侦听器建立索引的方式。

但是，为什么我们必须使用.bind（this）？我明白它会返回一个将函数绑定到“this”的新函数，因此对保存的函数进行新的引用会很有用，因此我们可以添加和删除相同的函数引用。

但是为什么我们不能用第一个例子来做到这一点？第一段代码中的this._myClickListener（e）是否也有一个唯一的函数引用，不会改变我们可以引用来添加和删除侦听器？为什么我们首先需要将其包装在一个匿名函数中？我觉得这样可以解决在代码的第二部分中已经解决的问题，但显然这样做是出于某种原因。

感谢您的任何帮助或建议提前！

Answer 1

如果你想通过this._myClickListener回调，那么它不会有你想要的this值调用，因为它是DOM实现触发调用它，它也不会知道你的this：this会只是全局对象（或严格模式下的undefined）。

然后，您可以说，好吧，我将绑定this与this._myClickListener.bind(this)，但现在您没有对该功能的引用，该功能是在现场创建的。当试图呼叫removeEventListener时，您不能通过this._myClickListener.bind(this)获得对它的访问权限，因为它只是再次创建一个新函数，这不是您以前使用的函数。

那么，还有比分配绑定功能给一个变量，并使用该变量在这两个addEventListener和removeEventListener没有其他办法：这是为了满足在同一时间两个条件的唯一途径：

• 你有参考作用被绑定到正确的this

功能

Answer 2

当您将对象的方法作为参数传递给函数/方法时，它超出了其自然上下文（this未附加到原始对象），这就是为什么仍然使用它，好像它是一个定期调用该对象上的方法，您使用bind明确地绑定上下文并返回绑定到该上下文的函数。