Javascript 如何在没有全局变量的情况下从html中的不同事件调用类方法

我有一个JS游戏，从body onload开始，然后使用光标位置，在body onmousemove事件中更新光标位置

首先，我在JS文件中有全局变量和单独的函数，我这样调用它们：

它工作得很好，但我想摆脱全局变量。我已经将所有内容都包含在游戏类中，但现在我不知道如何从不同的html事件调用类方法。我能想到的唯一解决方案是全局声明游戏对象，但我仍然必须使用全局变量（这比一大堆变量要好，但仍然…）：

HTML:

---

有没有一种优雅的方法可以在没有全局变量的情况下从不同的html事件调用类方法？

通过html属性添加事件侦听器实际上是一种古老而不受推荐的方法，原因正是您遇到的：您需要全局变量。现代方法是对事件不使用HTML，而是使用JavaScript首先查找所需元素，然后使用函数向其添加事件侦听器。因此，在您的情况下，在您的游戏初始化代码中有如下代码

document.body.addEventListener('mousemove', setMousePosition);

---

这里有一个避免全局性的方法，希望它看起来足够优雅

//自动执行的匿名函数，隐藏其中声明的所有全局变量
空函数（）{
“use strict”；//打开strict模式，这会阻止编写糟糕的JS
班级游戏{
建造师（id）{
this.id=id；
}
设置鼠标位置（e）{
log（this.id，e.clientX，e.clientY）；
}
}
//重载窗口.onload
window.onload=函数（）{
var博弈=新博弈（5）；
/*
要了解其工作原理，了解
Javascript类的工作原理
类只是由两个组件组成，一个构造函数
当您使用“new”调用类时为对象设置属性的
和一个原型对象，把它看作是一组值，所有实例
类股
例如
甲级{
构造函数（）{
}
doThing（）{
}
}
做的事情和
函数A（）{
}
A.原型={
doThing:function（）{
}
};
javascript中的每个函数都有自己的“this”变量
，当类中的函数被调用时，“this”设置为
你调用它的对象。
最后一部分是.bind（），它是一个可以对任何函数调用的方法。
它创建函数的副本，但“this”变量始终设置为
一个特定的对象，在这个游戏中它是“游戏”
*/
window.onmousemove=Game.prototype.setMousePosition.bind（游戏）；
}
}();

JS类是现代的……在html中使用内联事件是不可能的。如果要在html中使用内联事件处理程序，则必须使用全局变量。

class Game {

    constructor() {
        // do the thing
    }

    setMousePosition(e) {
        // do the thing
    }
}

let game;

document.body.addEventListener('mousemove', setMousePosition);