我的画布子类如何处理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();
    }
}

这可使包装纸完全独立且美观。