title: Add/remove eventListeners while keeping instance context of "this"
body: <p>I am trying to use the vanilla JS event system to send events between different components of my browser application (no NodeJS involved), by dispatching events to the <code>window</code> object.</p>
  <pre class="lang-js prettyprint-override"><code>// method in Class A
  sendDone() {
    window.dispatchEvent(new Event('done');
  }
  </code></pre>
  <p>In another class, I have a method which handles the <em>optional</em> listener to this event, which can be enabled/disabled by the user.</p>
  <pre class="lang-js prettyprint-override"><code>// method in Class B
  setOption(shouldListen) {
    if (shouldListen) {
      window.addEventListener('done', this.doneHandler);
    } else {
      window.removeEventListener('done', this.doneHandler);
    }
  }
  </code></pre>
  <p>However, the handler gets the <code>window</code> context instead of the instance context, and the <code>this</code> keyword doesn't work as I would like it to:</p>
  <pre class="lang-js prettyprint-override"><code>// method in Class B
  doneHandler() {
    this.someMethod(this.someValue);  // doesn't work
  }
  </code></pre>
  <p>I can't pass <code>this</code> to the handler with an anonymous function, because I can't remove an anonymous function from the listeners list. For the same reason, I can't include the handler code inside the function definition, like this:</p>
  <pre class="lang-js prettyprint-override"><code>const self = this;
  window.addEventListener('done', function() {
    // can use self here instead
    // but listener still can't be removed
  });
  </code></pre>
  <p>I'm new to JS and I'm wondering how this sort of scenario is usually handled.</p>
  <p>Thanks.</p>