Question

我有一个包含函数和变量的类，如下面的代码：

class Engine {
    private inputHandler: InputHandler;
    private webGl: WebGLRenderingContext;
    private timeStep: number = 1000 / 60;
    private delta: number = 0;
    private lastFrameTimeMs: number = 0;

    constructor() {
        this.webGl = Canvas.initWebGL(window.innerWidth, window.innerHeight);
        this.inputHandler = new InputHandler();
    }

    private draw() {
        // stuff happening here
    }

    private update(delta: number) {
        // stuff happening here
    }

    public run(timestamp: number) {
        console.log('this: ', this);
        this.delta = timestamp - this.lastFrameTimeMs;
        this.lastFrameTimeMs = timestamp;

        while(this.delta >= this.timeStep) {
            this.update(this.delta);
            this.delta -= this.timeStep;
        }

        this.draw();

        requestAnimationFrame(this.run);
    }
}

window.onload = () => {
    var engine = new Engine();
    engine.init();
    requestAnimationFrame(engine.run);
}

我的问题是，当我在window.onload（）中调用engine.run时，Engine类中的'this'变为“Undefiened”。一种解决方案是使变量和函数保持静态并调用Engine.run（）等，但我觉得这不是可行的方法。

是否有一个特殊的原因，为什么'这'在课堂上变形如果是这样，为什么以及我必须改变什么？

作为旁注：我正在使用npm将我的.ts类转换为.js，并在最后将它们与webpack捆绑在一起。

Answer 1

run函数正在传递给requestAnimationFrame，并且不会被调用作为对象的方法。它被称为run()而不是engine.run()，因此它会失去上下文。

您可以通过传递调用run作为方法的函数来保留上下文：

window.onload = () => {
    var engine = new Engine();
    engine.init();
    requestAnimationFrame(() => engine.run());
}

或致电bind：

window.onload = () => {
    var engine = new Engine();
    engine.init();
    requestAnimationFrame(engine.run.bind(engine));
}

在window.onload中调用engine.run（）时，Class的这个变为未定义

1 个答案: