Javascript 密钥处理程序

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));

注意bind 方法在一些旧浏览器中不受支持，例如 IE8 和更旧的浏览器，所以如果你需要支持它们，你需要一个“polyfill”。我在上面链接到的文档中有一个。

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

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