addEventListenerが期待通りに動作しない

Question

私はチュートリアルのゲームをより強力なアプリケーションパターンに変換し、イベントリスナーをリファクタリングする問題に遭遇しました。元のコードで

、メイン機能で、私はリスナーを設定していたとコールバックが定義された：

(function() { 
    "use strict"; 
    GAME.init(); 
    function main() { 
     GAME.stopMain = window.requestAnimationFrame(main); 

     GAME.draw(); 

     GAME.update(); 
    } 

    document.addEventListener("keydown", keyDownHandler, false); 
    document.addEventListener("keyup", keyUpHandler, false); 

    function keyDownHandler(e) { 
     if (e.keyCode === 39) { 
      GAME.inputs.rightPressed = true; 
     } else if (e.keyCode === 37) { 
      GAME.inputs.leftPressed = true; 
     } 
    } 

    function keyUpHandler(e) { 
     if (e.keyCode === 39) { 
      GAME.inputs.rightPressed = false; 
     } else if (e.keyCode === 37) { 
      GAME.inputs.leftPressed = false; 
     } 
    } 

    main(); 
})(); 

私はGAME.inputs.init();への呼び出しのための私のリスナーとコールバックをスワップアウトし、GAME.inputsのこのメソッドを作成しました：

GAME.inputs: { 
    keyDownHandler: function(e) { 
     if (e.keyCode === 39) { 
      this.rightPressed = true; 
     } else if (e.keyCode === 37) { 
      this.leftPressed = true; 
     } 
    }, 

    keyUpHandler: function(e) { 
     if (e.keyCode === 39) { 
      this.rightPressed = false; 
     } else if (e.keyCode === 37) { 
      this.leftPressed = false; 
     } 
    }, 

    init: function() { 
     document.addEventListener("keydown", this.keyDownHandler, false); 
     document.addEventListener("keyup", this.keyUpHandler, false); 
    } 
}; 

イベントリスナーが登録を停止しました。私は以前この問題を抱えていましたが、古い方法に戻しましたが、なぜこれが機能しないのか理解したいと思います。

Answer 1

バインドを呼び出す必要があります。したがって、このスコープはドキュメントではありません。

document.addEventListener("keydown", this.keyDownHandler.bind(this), false); 
document.addEventListener("keyup", this.keyUpHandler.bind(this), false); 

、それが初期化された方法に応じて、それが実際にあるかもしれない

私はいくつかの理由を考えることができますが、[MCVE]私は言うことはできません提供していない