Polymer 2.0: why do we need an anonymous function when imperatively adding listener

Question

In the new docs for Polymer 2.0 ( https://www.polymer-project.org/2.0/docs/devguide/events#imperative-listeners ), it gives the following example:

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

to add an event listener imperatively. If you wanted to remove a listener, we would have to do the following (according to the docs):

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

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

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

This make sense to me on the surface; we need to make sure the same reference to the function is passed for both remove and add event listener since that's the way it indexes different listeners.

However, why do we have to use .bind(this)? I understand it returns a new function that binds the function to whatever "this" is, so it's useful to make a new reference to a function that's saved so we can add and remove the same function reference.

But why can't we do that with the first example? Doesn't this._myClickListener(e) in the first segment of code also have a unique function reference that doesn't change that we can reference to add and remove a listener? Why do we need to wrap it in an anonymous function in the first place? I feel like that would solve the problem that was solved verbosely in the second segment of code, but it's clearly done this way for a reason.

Thanks for any help or suggestions in advance!

Answer 1

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

Answer 2

If you would pass this._myClickListener as callback, then it wouldn't be called with the this value you want, since it is the DOM implementation that triggers the call to it, and it will not know about your this : this will just be the global object (or undefined in strict mode).

You could then say, OK, I will bind this to it with this._myClickListener.bind(this) , but now you don't have the reference to that function, which is created on the spot. When trying to call removeEventListener you cannot get an access to it with this._myClickListener.bind(this) as that just creates a new function again, which is not the one you used before.

So, there is no other way than to assign the bound function to a variable, and use that variable in both addEventListener and removeEventListener : this is the only way to satisfy the two conditions at the same time:

• You have the reference to the function
• The function is bound to the correct this