javascript - 我的代码出于某种原因显示了NaN而不是数字

为什么当我单击按钮NaN时得到的是#plr1button1而不是数字？
就像我不明白它一样，我正在看它大约两个小时，但我仍然无法弄清错误。

class Fighter {
    constructor(atk, def, hp) {
        this.atk = atk;
        this.def = def;
        this.hp = hp;
    }
}
var Fighter1 = new Fighter(40, 5, 100);
var Fighter2 = new Fighter(30, 20, 100);
Fighter1.attack = function() {
    var attack1 = this.atk + (Math.floor(Math.random() * 5) - 5) - Fighter2.def;
    Fighter2.hp = Fighter2.hp - attack1;
    document.getElementById("hp2").innerHTML = Fighter2.hp;
}
Fighter2.attack = function() {
    var attack1 = this.atk + (Math.floor(Math.random() * 5) - 5) - Fighter1.def;
    Fighter1.hp = Fighter1.hp - attack1;
    document.getElementById("hp1").innerHTML = Fighter1.hp;
}
function random() {
    var randomNum =  Math.floor(Math.random() * 6) + 1;
    /*var randomNum2 =  Math.floor(Math.random() * 6) + 1;
    var randomNum3 =  Math.floor(Math.random() * 6) + 1;*/
    if (randomNum === 1) {
        document.getElementById("plr1button1").innerHTML = "Attack";
        $("#plr1button1").bind("click", Fighter1.attack);
        document.getElementById("plr2button1").innerHTML = "Attack";
    }
}

最佳答案

您将失去该事件处理程序的上下文；使用.bind对其进行修复。

$("#plr1button1").bind("click", Fighter1.attack.bind(Fighter1));

很容易检测到它：只需将断点放入attack方法中，并检查与this事件处理程序调用该方法时的click相等。



您的代码还有其他几个问题。

首先，您可以轻松地抽象一个函数，该函数在给定范围内生成一个随机整数-并重复使用它，而不是重复整个Math.floor(Math.random...代码段。

其次，您在attack代码中混合了两个问题，同时更改了（受攻击的Fighter）的状态及其表示形式。通常最好将它们分开。

最后，您不必要地将所有动作硬编码在两个Fighter实例中-而不是使用prototype存储单个函数。

例如，有一种方法可以简化它：

class Fighter {
    constructor(atk, def, hp) {
        this.atk = atk;
        this.def = def;
        this.hp = hp;
    }

    attack(enemy) {
        const hits = this.atk + _randomInRange(0, 5) - enemy.def;
        enemy.hp -= hits;
        enemy.render();
    }

    render() {
        // updates the representation of Fighter
    }
}

function _randomInRange(from, to) {
  return from + Math.floor( Math.random() * (to + 1 - from) );
}

这是该方法在实践中的small (and incomplete) demo。

关于javascript - 我的代码出于某种原因显示了NaN而不是数字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47535480/