未定义属性来自导入 Class

Question

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

index.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);

InitGame.js的一部分：

//InitGame.js
export default class InitGame {
    constructor(){
        this.avaliablePoints = 5;
        this.healthPoints = 10;
        this.dmgPoints = 10;
        this.stats = undefined;
}

removeHealthPoints() {
        if (this.healthPoints >= 11) {
            this.avaliablePoints += 1;
            this.healthPoints -= 1;
        }
        else {
            console.log("10 health points is minimum");
        }
        document.getElementById("healthPoints").innerHTML = "Health: " + this.healthPoints;
        document.getElementById("points").innerHTML = "Avaliable points: " + this.avaliablePoints;
}

addHealthPoints() {
        if (this.avaliablePoints == 0) {
            console.log("0 avaliablePoints");
        }
        else {
            this.avaliablePoints -= 1;
            this.healthPoints += 1;
        }
        document.getElementById("healthPoints").innerHTML = "Health: " + this.healthPoints;
        document.getElementById("points").innerHTML = "Avaliable points: " + this.avaliablePoints;
}
getAvaliablePoints() {
        return this.avaliablePoints;
}
getHealthPoints() {
        return this.healthPoints;
}

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

未定义属性来自导入 Class

Undefined property from imported Class

javascript

webpack

es6-modules

未定义 属性 来自导入 Class

Undefined property from imported Class

javascript

webpack

es6-modules

未定义属性来自导入 Class