Javascript "onmousemove" 事件不适用于类

Question

我真的不知道如何在标题中表达这一点，但我正在尝试制作一个包含所有事件函数的 class，但我运行遇到了奇怪的问题。

这是问题的一些 mock-up 代码。

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

我遇到的主要问题是当我运行它 returns 错误 "Cannot set property 'x' of undefined" 这很奇怪，因为当我单步执行程序时 main.mouse.x被定义，直到 document.onmousemove 行。

如果我将 updateMouse() 函数移动到鼠标中 class，然后改为执行此操作：

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

然后它就可以工作了，但是在我尝试编写的 ACTUAL 程序中，updateMouse() 方法需要调用 MainClass 中的其他方法，所以我不能这样做。

Answer 1

你必须使用

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

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

试试看。如果您不绑定该函数，它将看到 'this' 本身（文档对象）。

Javascript "onmousemove" 事件不适用于类

Javascript "onmousemove" event not working with classes

javascript

mouse

events

undefined

onmousemove

Javascript "onmousemove" 事件不适用于 类

Javascript "onmousemove" event not working with classes

javascript

mouse

events

undefined

onmousemove

Javascript "onmousemove" 事件不适用于类