Question

这是我第一次使用Webpack和ES6模块。捆绑模块之后，一开始脚本看起来像是正确加载了所有内容，因为get方法正确返回了类属性，例如：可用点：5。但是当我单击“ +”按钮init.getAvaliablePoints()和{{1时}}方法返回init.getHealthPoints()，当我单击“-”时返回NaN。因此，似乎undefined属性是InitGame()。为什么？

index.js的一部分：

undefined

InitGame.js的一部分：

//index.js
'use strict';
import InitGame from './InitGame.js';
import Game from './Game.js';

let init = new InitGame();

const creator = document.getElementById("creator");
const mainMenu = document.getElementById("main");

creator.innerHTML =
        `<h1>Create Character:</h1>
        <h3 id="points">Avaliable points: ${init.getAvaliablePoints()}</h3>
        <div class="stats">
            <div class="health">
                <button id="minusH" type="button">-</button>
                <span id="healthPoints">Health: ${init.getHealthPoints()}</span>
                <button id="plusH" type="button">+</button>
            </div>     
        </div>`;

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

Answer 1

问题不是这些属性未定义，而是单击按钮时this设置不正确。您只是将方法函数传递给addEventListener，而没有将其绑定到init对象。结果，在功能this中将事件目标设置为

。

您可以使用bind()方法将其绑定到init对象。

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

导入类的未定义属性

1 个答案: