我的画布子类如何处理 window.resize 事件?

Question

我有一个画布包装器类，当它被调整大小以完全响应时，它需要运行一些代码。当然，HTMLCanvasElement 没有调整大小事件;只有窗口可以。我的代码如下所示：

class CanvasThing {
constructor(whichCanvas) {
...
}
handleResize() {
this.recalculateStuff();
}
}
var foo = new CanvasThing(document.getElementFromID("bar"));

现在，我很想把它放在我的类的构造函数中，以使所有内容自包含：

window.addEventListener("resize", this.handleResize, false);

但是当它调用 handleResize 时，this设置为窗口，而不是实例，因此handleResize()不起作用，因为它无法访问类中的任何其他方法。

好的，好的，初始化foo后，我将在全局级别执行此操作：

window.addEventListener("resize", foo.handleResize, false);

但是this仍然指向窗口，因此没有简单的方法来访问我的类的实例。

当然，我可以通过让 resize 事件遍历页面上的所有类实例并触发它们的 resize 事件来将其硬连接到我周围的代码中，但这似乎很不优雅。设置一个计时器以持续运行以检查画布是否已调整大小似乎更是如此。

有没有一种现代方法来处理这种事情，使我的包装对象尽可能独立？

Answer 1

感谢tmdesigned的评论; .bind 是要走的路：

class CanvasThing {
constructor(whichCanvas) {
this.boundResize = this.handleResize.bind(this);
window.addEventListener("resize", this.boundResize, false);
...
}
handleResize() {
this.recalculateStuff();
}
}

这使得包装器完全独立且优雅。