javascript - "that"变量未引用正确的对象

Question

当我在对象上使用方法时，我的“that”变量没有引用正确的对象。

例如，isaac.healthItem.use() 在控制台中显示“Mia”，而不是“Isaac”。

为什么“this”不是指调用对象？

var get = function(id) {
    return document.getElementById(id);
}

var that;
var divider = "\n-----------------------";

var Adventurer = function(name, weapon, health, mana) {
    this.name = name;
    this.health = health;
    this.maxHealth = health;
    this.maxOverheal = this.maxHealth * 2;
    this.mana = mana;
    this.inventory = [];
    this.spells = [];
    this.weapon = weapon;
    that = this;
}

Adventurer.prototype.addToInventory = function(item) {
    this.inventory.push(item);
}

Adventurer.prototype.addSpell = function(spell) {
    this.spells.push(spell);
}

Adventurer.prototype.setWeapon = function(weapon) {
    this.weapon = weapon;
}

var HealthItem = function() {
    this.healthItemName = "";
    this.healAmount = 0;

    this.use = function() {
        console.log(that.name);
        for (var x = 0; x < that.inventory.length; x++) {
            if (that.inventory[x] == "HP Pot") {
                this.healthItemName = "HP Pot";
                this.healAmount = 30;
                that.health += this.healAmount;
                console.log(that.name + " Has Used " + this.healthItemName + " For " + this.healAmount + divider);
                if (that.health > that.maxHealth && that.health < that.maxOverheal) {
                    var overheal = that.health - that.maxHealth;
                    console.log("Overhealed by " + overheal + "!");
                } else if (that.health > that.maxOverheal) {
                    console.log(that.name + " cannot " + "be " + "overhealed " + "anymore!");
                    that.health = that.maxOverheal;
                }
                that.inventory[x] = "";
                return;
            }
        }
        console.log("No Health Items in Inventory" + divider);
    }
}

Adventurer.prototype.healthItem = new HealthItem();

Adventurer.prototype.adventurerData = function() {
    console.log(this.name + divider);
    console.log("Health: " + this.health + divider);
    console.log("Mana: " + this.mana + divider);
}

Adventurer.prototype.viewSpells = function() {
    for (var i = 0; i < this.spells.length; i++) {
        console.log(this.spells[i] + divider);
    }
}

Adventurer.prototype.useSpell = function(spell) {
    for (var i = 0; i < this.spells.length; i++) {
        if (this.spells[i] == spell) {
            console.log(this.name + " Used " + this.spells[i] + " For" + " 30 Damage!" + divider);
            return;
        }
    }
    console.log("You don't know how to do that..." + divider);

}

Adventurer.prototype.viewInventory = function() {
    for (var x = 0; x < this.inventory.length; x++) {
        console.log(this.inventory[x] + divider);
    }
    if (this.inventory.length == 0) {
        console.log("Your bag is empty");
    }
}

Adventurer.prototype.lotOfPots = function() {
    for (var i = 0; i < 50; i++) {
        this.addToInventory("HP Pot");
    }
}

var isaac = new Adventurer("Isaac", "Ragnarok", 100, 50);

var mia = new Adventurer("Mia", "Celestial Staff of Water", 80, 90);

isaac.addSpell("Earthquake");
isaac.addSpell("Push");
isaac.addSpell("Healing Wave");

mia.addSpell("Soothing Waters");
mia.addSpell("Sleet");
mia.addSpell("Waterfall");

mia.adventurerData();

Answer 1

问题是

var that; // Global variable

var Adventurer = function(name, weapon, health, mana) {
    ....
    that = this; // Assign the calling object to global variable
}

var isaac = new Adventurer("Isaac", "Ragnarok", 100, 50);
var mia = new Adventurer("Mia", "Celestial Staff of Water", 80, 90);

所以 that 被 isaac 覆盖，然后被 mia 覆盖，所以当 HealthItem 调用 console.log 时(that.name)，that 指的是 mia