打字稿：私人成员突然未定义

Question

因此，我有一个基本的Typescript应用程序，它实际上不会引起任何重大问题，但是看来这里出了点问题，我也不知道是什么。

我的班级确实有这个私有成员minUpdateRate，该成员在GameContainer构造函数中初始化。这似乎进展顺利，因为在GameContainer.start()调用时，该console.log()方法将打印出来1。

但是，当GameContainer.render()调用该方法时，似乎超出了范围之类，log方法undefined在那里输出。

我是TypeScript的新手，对JavaScript也没有那么深入（特别是在范围方面，这对我来说是令人困惑的：/）。但是，我该如何解决呢？

主班：

class TwoDGame extends Game {
    public static main(context:CanvasRenderingContext2D) {
        var game:Game = new TwoDGame();
        var container:GameContainer = new GameContainer(context, game);

        container.start();

        return game;
    }
}

游戏容器类：

class GameContainer {
    ...
    private minUpdateRate:number;
    private game:Game;
    private time:number;
    ...

    constructor(context:CanvasRenderingContext2D, game:Game) {
        ...
        this.minUpdateRate = 1;
        this.game = game;
    }

    public start() {
        ...
        console.log(this.minUpdateRate);
    }

    public render() {
        var now:number = new Date().getMilliseconds();
        var delta:number = now - this.time;
        console.log(this.minUpdateRate);

        if (delta > this.minUpdateRate) {
            ...
        }
    }
}

通过脚本区域中的setInterval调用渲染：

var game = TwoDGame.main(context);

setInterval(game.getGameContainer().render, 16);

Answer 1

当您setInterval()以这种方式传递对“ render”方法的引用时，您将丢失对象上下文。

setInterval(function() { game.getGameContainer().render(); }, 16);

函数和通过属性值引用它的对象之间没有内在联系。通过使用匿名函数，可以确保“容器”对象将是this“渲染”内部的值。

您也可以使用.bind()Function原型的方法执行此操作：

setInterval(game.getGameContainer().render.bind(game.getGameContainer()), 16);

但这在这种情况下似乎有点丑陋。