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 является определяется до строки document.onmousemove.

Если переместить функцию updateMouse() в классе Mouse, и сделать это вместо:

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

затем он работает, однако в самой программы я пытаюсь написать, тем updateMouse() потребности метод для вызова других методов в MainClass, поэтому я не могу этого сделать.

Answer 1

Вы должны использовать

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

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

Попробуйте это. Если вы не привязываете функцию, она увидит это «как» (объект документа).