typescript：requestAnimationFrame和eventlistener：keyup / keydown

Question

这很奇怪？我无法使requestAnimationFrame与eventlisteners keyup / down一起工作，当它在typescript类中时 - 但如果我在课外，它可以正常工作吗？帮我解决这个问题，或者告诉我为什么它永远不会在课堂上工作....

  class GameEngine
{
    private aKey:boolean
    private canvas:HTMLCanvasElement;
    private ctx:CanvasRenderingContext2D;

    constructor()
    {
        this.canvas = <HTMLCanvasElement> document.getElementById("canvas");
        this.ctx = this.canvas.getContext("2d");

        document.addEventListener('keyup', this.keyUp, false);
        document.addEventListener('keydown', this.keyDown, false);

        this.loop();
    }

    private keyDown(event:KeyboardEvent): void
    {
        if (event.repeat) {return};
        console.log("KeyDown");
        console.log(this.aKey);
        if (event.key == 'a')
        {
            this.aKey = true;
            console.log(this.aKey);
        }
    }

    private keyUp(event: KeyboardEvent): void
    {
        if (event.key == 'a')
        {
            this.aKey = false;
        }   
    } 


    private loop()
    {
        console.log(this.aKey);
        if (this.aKey == true) this.ctx.fillRect(10,10,10,10);
        window.requestAnimationFrame(this.loop.bind(this));

    }
}

new GameEngine();

当我按下'a'键时，它会在控制台中按预期写入true / false，但循环会不断打印'undefined'？

Answer 1

如果使用addEventListener（）将处理函数附加到元素，则处理程序内部的值是对元素的引用。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler

在您的示例中，this是文档对象。

只需为你的听众使用bind方法，它应该工作正常。您可以在我上面发布的链接中阅读更多相关信息。

document.addEventListener('keyup', this.keyUp.bind(this));
document.addEventListener('keydown', this.keyDown.bind(this));