javascript - 当使用命名函数会阻碍对上下文状态的访问时如何处理事件删除

Question

我正在监听文件输入的更改，每次监听器“听到”某些内容后我都需要将其删除。

问题是，使用命名函数(无法删除匿名函数上的监听器)我会丢失上下文，因此无法访问状态。这是一个基本版本:

$ImgEl.on('change', () => {
  const reader = new FileReader();
    reader.onloadend = (e) => {
        // Do some stuff with state
        this.state.whatever;
    }
}

使用带有箭头函数的代码，我可以维护上下文，从而可以访问我的状态。但是，如果我使用命名函数，我就能够删除监听器，但会丢失上下文。

还有其他人处理过这个问题吗？

Answer 1

这与命名函数和匿名函数无关。重要的是您是否有对该函数的引用。

如果您想删除 change 处理程序，例如:

// *** Create the function and remember a reference to it
const handler = () => {
  const reader = new FileReader();
    reader.onloadend = (e) => {
        // Do some stuff with state
        this.state.whatever;

        // Remove it
        $ImgEl.off('change', handler); // *** Remove the handler
    }
};
$ImgEl.on('change', handler); // *** Hook up the handler

恰好does create a named function ，但即使它创建了一个匿名的，也没关系，因为您可以引用它。

您似乎正在使用 jQuery，因此我也将使用 event namespaces 来提及这一点。 ，您不需要对该函数的引用来删除它，请参阅以下内容中的 .foo:

$ImgEl.on('change.foo', () => {
  const reader = new FileReader();
    reader.onloadend = (e) => {
        // Do some stuff with state
        this.state.whatever;

        // Remove the handler
        $ImgEl.off('change.foo');
    }
});

我会使用带有函数引用的版本，但你有选择。 :-)