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

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

但是，为什么我们必须使用.bind（this）？我理解它会返回一个新函数，将函数绑定到任何＆＃34;这个＆＃34;是的，因此对保存的函数进行新的引用非常有用，这样我们就可以添加和删除相同的函数引用。

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

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

Answer 1

当您将对象的方法作为参数传递给函数/方法时，它超出了它的自然上下文（this没有附加到原始对象），这就是为什么仍然使用它就像它是对该对象上的方法的常规调用，您使用bind显式绑定上下文并返回绑定到该上下文的函数。

Answer 2

如果您将L={} for ct = 1:length(cell) w=whos(cel{ct}); L{ct} = w.size; end作为回调传递，则不会使用您想要的this._myClickListener值调用它，因为它是触发对它的调用的DOM实现，并且它不会了解您的this：this只是全局对象（或严格模式下的this）。

然后你可以说，好吧，我会用undefined将this绑定到它，但现在你没有对该功能的引用，该功能是在现场创建的。尝试拨打this._myClickListener.bind(this)时，您无法使用removeEventListener访问它，因为这只会再创建一个新功能，而不是之前使用过的功能。

因此，除了将绑定函数赋值给变量之外别无他法，并在this._myClickListener.bind(this)和addEventListener中使用该变量：这是满足这两个条件的唯一方法。同一时间：

您可以参考该功能
该函数绑定到正确的removeEventListener

Polymer 2.0：为什么在强制添加监听器时我们需要一个匿名函数

2 个答案: