JavaScript key 处理程序

Question

我有一个 Javascript 键处理函数，我试图在我正在开发的游戏中使用它，但它似乎不太有效，我不确定它是编辑器还是代码有错误。我的代码如图:

var myKey = {
    pressedKeys: [],
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40,
    isPressed: function(zKey){
        return this.pressedKeys[zKey];
    },
    onkeyDown: function(event){
        this.pressedKeys[event.keyCode] = true;
    },
    onkeyUp: function(event){
        this.pressedKeys[event.keyCode] = false;   
    },
};

window.addEventListener("keydown", myKey.onkeyDown);
window.addEventListener("keyup", myKey.onkeyUp);

var checkInput = function(){
    if(myKey.pressedKeys[myKey.LEFT]){
        confirm("Pressed Left");
    }
}

var gameLoop = function(){
    checkInput();
    window.requestAnimationFrame(gameLoop);
}

游戏循环动画帧在此处未显示的主函数中首次调用。我不明白可能出了什么问题。我尝试对数字进行硬编码，但仍然一无所获，但它很可能是我的编辑器。

Answer 1

当您获得对方法的引用并将其用作事件处理程序时，该函数不再与该对象关联。函数内的 this 不是对 myKey 对象的引用，而是对 window 对象的引用(因为这是事件所在的对象)发生)。

您可以使用bind method指定函数的上下文:

window.addEventListener("keydown", myKey.onkeyDown.bind(myKey));
window.addEventListener("keyup", myKey.onkeyUp.bind(myKey));

请注意，某些较旧的浏览器(例如 IE8 及更早版本)不支持 bind 方法，因此如果您需要支持它们，则需要“polyfill”。我在上面链接到的文档中有一个。

您还可以使用函数包装器来调用方法:

window.addEventListener("keydown", function(e){ myKey.onkeyDown(e); });
window.addEventListener("keyup", function(e){ myKey.onkeyUp(e); });