javascript - 使此关键字引用实例而不是窗口对象

Question

在下面的代码中，我创建了一个名为 Slates 的对象并向其添加了一些函数。

"use strict";

function Slates() {
    this.canvas;
    this.ctx;
    this.width;
    this.height;
}

Slates.prototype.init = function() {
    this.canvas = document.getElementById("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.resize();
};

Slates.prototype.resize = function() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    console.log("resizing");
};

Slates.prototype.render = function() {
    this.ctx.clearRect(0, 0, this.width, this.height);
    this.ctx.fillStyle = "rgba(0,0,100,.5)";
    this.ctx.fillRect(0, 0, this.width, this.height);
};

window.onload = function() {
    var slates = new Slates();
    slates.init();
    window.onresize = slates.resize;
    window.requestAnimationFrame(slates.render);
};

问题是当我将函数 slates.render 作为回调传递给函数时例如 window.requestAnimationFrame this 关键字指的是 window 对象而不是 Slates 实例，因此我得到一个

Uncaught TypeError: Cannot read property 'clearRect' of undefined

如何解决这个问题，让它引用我的对象实例？这是一个链接 codepen .

Answer 1

例如，您可以使用 Function.prototype.bind，它将返回一个函数，但此值常量:

window.requestAnimationFrame(slates.render.bind(slates))

或将此调用包装到另一个函数中:

window.requestAnimationFrame(function() { slates.render() })