Javascript OOP：如何引用对象

Question

I have the following JavaScript object. When the window resizes, I want it to call its own resize() method. However, in the window.onresize function, this refers to window - not the Canvas object. How do I call the Canvas object?

function Canvas(element) {
    this.element = element;
    this.canvas = element.getContext("2d");
    this.width = element.width;
    this.height = element.height;

    this.resize = function () {
        this.width = window.innerWidth;
        this.height = window.innerHeight;

        this.element.width = this.width;
        this.element.height = this.height;
    };

    window.onresize = function () {
        this.resize();
          ^- error
    };
}

Thank you in advance.

Answer 1

Save the value 'this' in the scope of the constructor in the closure of the onresize handler.

var _this = this;
window.onresize = function () {
    _this.resize();
};

Answer 2

window.onresize = this.resize.bind(this);

如果您支持旧版浏览器，请包含Function.prototype.bind() 的MDN兼容性修补程序 。