javascript - 添加/删除 eventListeners，同时保持 "this"的实例上下文

Question

我正在尝试使用 vanilla JS 事件系统在我的浏览器应用程序的不同组件之间发送事件(不涉及 NodeJS)，方法是将事件分派(dispatch)到 window 对象。

// method in Class A
sendDone() {
  window.dispatchEvent(new Event('done');
}

在另一个类中，我有一个方法可以处理此事件的可选 监听器，用户可以启用/禁用该监听器。

// method in Class B
setOption(shouldListen) {
  if (shouldListen) {
    window.addEventListener('done', this.doneHandler);
  } else {
    window.removeEventListener('done', this.doneHandler);
  }
}

但是，处理程序获取的是 window 上下文而不是实例上下文，并且 this 关键字没有像我希望的那样工作:

// method in Class B
doneHandler() {
  this.someMethod(this.someValue);  // doesn't work
}

我无法将 this 传递给具有匿名函数的处理程序，因为我无法从监听器列表中删除匿名函数。出于同样的原因，我不能在函数定义中包含处理程序代码，如下所示:

const self = this;
window.addEventListener('done', function() {
  // can use self here instead
  // but listener still can't be removed
});

我是 JS 的新手，我想知道通常如何处理这种情况。

谢谢。

Answer 1

您需要使用 Function.prototype.bind()在你的类的构造函数中:

constructor() {
    this.doneHandler = this.doneHandler.bind(this);
}

其余代码不会更改，所以现在您可以添加和删除事件监听器。