Javascript 来自导入类的未定义属性

这是我第一次使用Webpack和ES6模块。绑定模块后，在开始时，脚本似乎正确地加载了所有内容，beacouse get方法正确地返回class属性，例如：available points:5。但是当我单击“+”按钮

init.getAvailablePoints（）

和

init.getHealthPoints（）

方法返回

NaN

，当我单击“-”返回

未定义的

。因此，

InitGame（）

属性似乎是未定义的。为什么?

index.js的一部分：

//index.js
"严格使用",；
从“./InitGame.js”导入InitGame；
从“./Game.js”导入游戏；
让init=new InitGame（）；
const creator=document.getElementById（“创建者”）；
const main menu=document.getElementById（“main”）；
creator.innerHTML=
`创建角色：
可用点：${init.getAvailablePoints（）}
-
运行状况：${init.getHealthPoints（）}
+
`;
document.querySelector（“#minsh”）.addEventListener（'click'，init.removeHealthPoints）；
document.querySelector（“#plusH”）.addEventListener（'click'，init.addHealthPoints）；

InitGame.js的一部分：

//InitGame.js
导出默认类初始化游戏{
构造函数（）{
这1.availablepoints=5；
这1.healthPoints=10；
此值为0.dmgPoints=10；
this.stats=未定义；
}
removeHealthPoints（）{
如果（this.healthPoints>=11）{
此.availablepoints+=1；
此值为0.1分-=1；
}
否则{
console.log（“至少10个健康点”）；
}
document.getElementById（“healthPoints”）.innerHTML=“Health:”+this.healthPoints；
document.getElementById（“points”）.innerHTML=“Available points:”+this.AvailablePoints；
}
addHealthPoints（）{
如果（this.availablepoints==0）{
控制台日志（“0个可用点”）；
}
否则{
此.availablepoints-=1；
此参数为1.healthPoints+=1；
}
document.getElementById（“healthPoints”）.innerHTML=“Health:”+this.healthPoints；
document.getElementById（“points”）.innerHTML=“Available points:”+this.AvailablePoints；
}
GetAvailablePoints（）{
返回此.availablepoints；
}
getHealthPoints（）{
返回此文件。healthPoints；
}

问题不在于属性未定义，而是当您单击按钮时，

此

未正确设置。您只是将方法函数传递给

addEventListener

，但没有将其绑定到

init

对象。因此，在函数

中，此

设置为事件目标

您可以使用

bind（）

方法将其绑定到

init

对象

document.querySelector("#minusH").addEventListener('click', init.removeHealthPoints.bind(init));
document.querySelector("#plusH").addEventListener('click', init.addHealthPoints.bind(init));

---

问题不在于属性未定义，而是当您单击按钮时，

this

未正确设置。您只是将方法函数传递给

addEventListener

，但没有将其绑定到

init

对象。因此，在函数中，

this

被设置为事件目标

您可以使用

bind（）

方法将其绑定到

init

对象

document.querySelector("#minusH").addEventListener('click', init.removeHealthPoints.bind(init));
document.querySelector("#plusH").addEventListener('click', init.addHealthPoints.bind(init));