Javascript 键入脚本中的KeyListener和；这"；上下文

我正在用TypeScript编写一个蛇游戏，但在定义KeyListener（用于更改蛇方向的箭头键）时遇到了问题

我有一个4层架构，关键事件在Gui类中处理。这将保存Snake对象，绘制Snake并处理关键事件

我试过正常的方法，但在手柄内蛇的物体没有定义

document.addEventListener("keydown", handleEvt)

所以我尝试了fat arrow方法，但现在根本没有调用该函数。我怀疑密钥侦听器更改了上下文，不再处理窗口

document.addEventListener("keydown", () => handleEvt)

谁能解释一下这里有什么问题吗？非常感谢

下面是我的Gui类：

/// <reference path="../model/Snake.ts" />
/// <reference path="../model/Direction.ts" />
/// <reference path="../model/Part.ts" />
/// <reference path="../dao/Dao.ts" />
/// <reference path="../service/Service.ts" />
/// <reference path="../model/IPosObject.ts" />

module gui {

    export class Gui {
        snake:model.Snake;
        canvas:HTMLCanvasElement;
        ctx:CanvasRenderingContext2D;
        loop:any;

        lineWidth:number;
        canvasSize:number;
        loopSpeed:number;
        unitLength:number;

        constructor(snake:model.Snake) {
            // init constants
            this.snake = snake;
            this.lineWidth = 3;
            this.canvasSize = 200;
            this.loopSpeed = 1000/60;
            this.unitLength = 5;

            // init canvas
            this.canvas = document.getElementsByTagName("canvas")[0];
            this.canvas.width = this.canvasSize;
            this.canvas.height = this.canvasSize;
            this.ctx = this.canvas.getContext("2d");

            // Attach key event
//            document.addEventListener("keydown", this.handleEvt);
            document.addEventListener("keydown", () => this.handleEvt);

            // activate game loop
            this.loop = setInterval( () => this.gameLoop(), this.loopSpeed );
        }

        handleEvt(e):void {
            var direction:model.Direction;

            if (e) {
                switch (e.which) {
                    case 37:
                        console.log("left");
                        direction = model.Direction.Left;
                        break;
                    case 38:
                        console.log("up");
                        direction = model.Direction.Up;
                        break;
                    case 39:
                        console.log("right");
                        direction = model.Direction.Right;
                        break;
                    case 40:
                        console.log("down");
                        direction = model.Direction.Down;
                        break;
                }

                this.snake.changeDirection(direction);
            }
        }

        gameLoop():void {
            if (this.snake) {
                this.drawSnake();
            }
        }

        drawSnake() {
          // draw parts
        }
    }

}

//
/// 
/// 
/// 
/// 
/// 
模块图形用户界面{
导出类Gui{
snake:model.snake；
画布：HTMLCanvasElement；
ctx:CanvasRenderingContext2D；
循环：任何；
线宽：数字；
画布尺寸：数量；
循环速度：数字；
单位长度：个数；
构造函数（snake:model.snake）{
//初始常数
这条蛇=蛇；
此参数为0.lineWidth=3；
这个.canvasSize=200；
该速度=1000/60；
这个单位长度=5；
//初始化画布
this.canvas=document.getElementsByTagName（“画布”）[0]；
this.canvas.width=this.canvasSize；
this.canvas.height=this.canvasSize；
this.ctx=this.canvas.getContext（“2d”）；
//附加关键事件
//文件。添加的文件列表器（“向下键”，此。handleEvt）；
document.addEventListener（“keydown”，（）=>this.handleEvt）；
//激活游戏循环
this.loop=setInterval（（）=>this.gameLoop（），this.loopSpeed）；
}
扶手vt（e）：无效{
var方向：模型方向；
如果（e）{
开关（e.which）{
案例37：
控制台日志（“左”）；
方向=model.direction.Left；
打破
案例38：
控制台。登录（“up”）；
方向=model.direction.Up；
打破
案例39：
控制台日志（“右”）；
方向=model.direction.Right；
打破
案例40：
控制台。登录（“关闭”）；
方向=model.direction.Down；
打破
}
这个。蛇。改变方向（方向）；
}
}
gameLoop（）：void{
如果（这条蛇）{
这个。drawSnake（）；
}
}
drawSnake（）{
//画零件
}
}
}

此问题有多种解决方案，您可以在addEventListener端修复它，方法与使用setInterval时相同。在keyDown侦听器中，您没有调用handleEvt，因此将其更改为

（）=>这个.handleEvt（）

您可以像上面那样使用它的另一个解决方案是：

document.addEventListener（“keydown”，this.handleEvt）

然后像这样宣布手牌：

handleEvt = (e) => {
    var direction:model.Direction;
    ...<snip>
}

handleEvt=（e）=>{
var方向：模型方向；
...
}

或其他解决方案：
document.addEventListener（“keydown”，this.handleEvt.bind（this））

正如你所看到的，有不同的解决方案，你可以选择你喜欢的。
此
丢失，因为该函数未在实例上调用，这是正常的（但有时令人困惑）JavaScript行为。
此视频将帮助您：感谢您的帮助。我使用了第一个建议：document.addEventListener（“keydown”，（e）=>this.handleEvt（e））；记住使用事件作为参数，因为handleEvt（）希望事件作为参数。