Javascriptの "onmousemove"イベントがクラスで動作しない

Question

タイトルでどのようにフレーズするか分かりませんが、すべてのイベント関数を含むクラスを作成しようとしていますが、奇妙な問題が発生しています。

問題のモックアップコードを次に示します。

class Mouse{ 
    constructor(){ 
     this.x = 0; 
     this.y = 0; 
    } 
} 

class MainClass{ 
    constructor(){ 
     this.mouse = new Mouse(); 
    } 

    updateMouse(event){ 
     this.mouse.x = event.clientX; 
     this.mouse.y = event.clientY; 
    } 
} 

var mouse; 
var main; 

window.onload = function(){ 
    main = new MainClass(); 

    document.onmousemove = main.updateMouse; 
} 

私が午前主な問題は、私はそれを実行したとき、それは私がプログラムmain.mouse.xをステップするときであるため、奇妙である「『X』未定義のプロパティを設定できません」というエラーを返すということです定義されていて、document.onmousemove行までです。

私は、マウスのクラスにupdateMouse（）関数を移動し、代わりにこれを行う場合は、次の

mouse = new Mouse(); 
document.onmousemove = mouse.updateMouse(); 

を、それはしかし、私は、updateMouse（）メソッドのニーズを記述しようとしています実際のプログラムでは、動作しますMainClass内の他のメソッドを呼び出すためにはできません。あなたは

window.onload = function(){ 
    main = new MainClass(); 

    document.onmousemove = main.updateMouse.bind(main); // bound function 
}; 

を使用する必要が

Answer 1

はそれを試してみてください。関数をバインドしないと、 'this'がそれ自体（ドキュメントオブジェクト）として表示されます。