javascript - polymer 2.0 : why do we need an anonymous function when imperatively adding listener

Question

在 Polymer 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);
}

表面上这对我来说是有道理的；我们需要确保为删除和添加事件监听器传递对函数的相同引用，因为这是它索引不同监听器的方式。

但是，为什么我们必须使用.bind(this)呢？我知道它返回一个新函数，该函数将该函数绑定(bind)到任何“this”，因此对已保存的函数进行新引用很有用，以便我们可以添加和删除相同的函数引用。

但是为什么我们不能用第一个例子来做到这一点呢？第一段代码中的 this._myClickListener(e) 是否也有一个不会改变的唯一函数引用，我们可以引用它来添加和删除监听器？为什么我们首先需要将它包装在匿名函数中？我觉得这可以解决第二段代码中详细解决的问题，但这样做显然是有原因的。

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

Answer 1

如果您将 this._myClickListener 作为回调传递，则不会使用您想要的 this 值来调用它，因为它是触发 DOM 实现的调用它，它不会知道您的 this:this 将只是全局对象(或严格模式下的 undefined)。

然后您可以说，好的，我将使用 this._myClickListener.bind(this) 将 this 绑定(bind)到它，但现在您没有对该函数是当场创建的。当尝试调用 removeEventListener 时，您无法使用 this._myClickListener.bind(this) 访问它，因为这只是再次创建一个新函数，这不是您想要的函数以前用过。

因此，除了将绑定(bind)函数分配给变量，并在 addEventListener 和 removeEventListener 中使用该变量之外，没有其他方法:这是唯一的方法同时满足两个条件:

• 您拥有该函数的引用
• 该函数已绑定(bind)到正确的 this