Question

在ES6课程中，如果我添加和删除这样的事件：

viewer.addEventListener(
    SELECTION_CHANGED_EVENT,
    (e) => this.onFoo(e));

viewer.removeEventListener(
    SELECTION_CHANGED_EVENT,
    (e) => this.onFoo(e));

该事件已添加，但未删除，但如果添加如下事件：

在构造函数中：

   this.onFooHandler = (e) => this.onFoo(e);

并添加和删除它们：

viewer.addEventListener(
    SELECTION_CHANGED_EVENT,
    this.onFooHandler);

viewer.removeEventListener(
    SELECTION_CHANGED_EVENT,
    this.onFooHandler);

他们被添加和删除就好了，但为什么呢？有什么区别？

注意：

我使用Babel来传输代码。

viewer是一个有事件的对象。

Answer 1

您需要将您在addEventListener中注册的确切的回调函数再次传递给removeEventListener。它必须是确切的函数，不仅仅是一个看起来像它的函数。由于您使用的是匿名回调，因此每个函数都是不同的函数。如果您只创建一次函数并将其分配给变量，那么您在两种情况下都使用相同的函数。

Answer 2

(e) => this.onFoo(e)是一个始终创建新函数的表达式。

((e) => this.onFoo(e)) === ((e) => this.onFoo(e)) // false

您需要维护原始函数的句柄。

const foo = (e) => this.onFoo(e);
foo === foo; // true

在ES6中添加和删除事件和方法

2 个答案: