如何在 Javascript 对象中定义方法？

Question

我是 Javascript 新手，我正在开发一个小游戏以更好地处理它。我正在尝试使用方法定义一个字符对象，但由于某种原因，我的 IDE 出现了奇怪的错误，“函数语句上的标签‘updateHealth’，函数声明中缺少名称”。我只是想弄清楚我做错了什么。在我的代码中，display 是角色的生命值在屏幕上的显示方式。

  function Character(display) {
    this.health = 100;
    this.display = display;


    // updates the health on the screen
    updateHealth: function() {
       if(health == 100) {
         this.display.innerText = 'HP: ' + health;
    }
    else if(health > 10 && health < 100) {
      this.display.innerText = 'HP: 0' + health;
    }
    else if(health < 10 && health > 0) {
      this.display.innerText = 'HP: 00' + health;
    }
    else {
      this.display.innerText = 'HP: 000';
    }
  }

  // returns true if character has died
  checkForDeath: function() {
    if(health <= 0) return true;
    else return false;
  }

  // function used when damage is inflicted on
  // a character object
  takeDamange: function(damage) {
    this.health -= damage;
  }

  // handles the four possible moves
  // opponent is null because if player heals
  // then it does not make sense for there to be
  // an opponent
  makeMove: function(move, opponent=null) {
    switch(move) {
      case 'PUNCH':
        opponent.takeDamage(parseInt(Math.random() * 100) % 10);
        opponent.updateHealth();
        break;
      case 'HEAL':
        this.health += 20;
        break;
      case 'KICK':
        opponent.takeDamage(parseInt(Math.random() * 100) % 20);
        opponent.updateHealth();
        break;
      case 'EXTERMINATE':
        opponent.takeDamage(opponent.health);
        opponent.updateHealth();
        break;
    }

    return opponent.checkForDeath();
  }
}

Answer 1

可以通过构造函数（例如 Character() 函数）实例化对象，但是，您需要确保对象方法（例如 updateHealth() 等）“附加”到角色对象的实例。

实现这一目标的一种方法是通过 this 关键字：

/* Attach the checkForDeath() function as a method of "this" Character instance */
this.checkForDeath = function() {

  /* Accessing "this" corresponds to the instance of the character object */
  if (this.health <= 0) return true;
  else return false;
}

通过进行这些更改，checkForDeath() 现在被定义为相应character 实例的成员函数。您需要确保通过this 访问实例上的字段，如if(this.health <= 0) { ... } 这一行所示

您还需要确保通过 new 运算符实例化 Character 的实例，如下所示：

const characterInstance =  new Character( someElement );

这是演示此方法的代码的修订版本：

function Character(display) {
  this.health = 100;
  this.display = display;

  this.updateHealth = function() {
    const health = this.health; /* Add this */
    if (this.health == 100) { 
      this.display.innerText = 'HP: ' + health;
    } else if (health > 10 && health < 100) {
      this.display.innerText = 'HP: 0' + health;
    } else if (health < 10 && health > 0) {
      this.display.innerText = 'HP: 00' + health;
    } else {
      this.display.innerText = 'HP: 000';
    }
  }
  
  this.checkForDeath = function() {
    if (this.health <= 0) return true;
    else return false;
  }

  this.takeDamange = function(damage) {
 
    this.health -= damage;
  }
  
  this.makeMove = function(move, opponent = null) {
    switch (move) {
      case 'PUNCH':
        opponent.takeDamage(parseInt(Math.random() * 100) % 10);
        opponent.updateHealth();
        break;
      case 'HEAL':
        this.health += 20;
        break;
      case 'KICK':
        opponent.takeDamage(parseInt(Math.random() * 100) % 20);
        opponent.updateHealth();
        break;
      case 'EXTERMINATE':
        opponent.takeDamage(opponent.health);
        opponent.updateHealth();
        break;
    }

    return opponent.checkForDeath();
  }
}

const player =  new Character( document.querySelector('p') );
player.takeDamange();
player.updateHealth();

<p></p>

Answer 2

将:更改为=，并将其分配给本地属性，例如

this.updateHealth = function() {
   ...
}

Answer 3

我建议使用class 语法。

class Character {
    constructor(display) {
        this.health = 100;
        this.display = display;
    }

    // updates the health on the screen
    updateHealth() {
        this.display.innerText = `HP: ${Math.max(health, 0).toString().padStart(3, '0')}`;
    }

    // returns true if character has died
    checkForDeath() {
        return health <= 0;
    }

    // function used when damage is inflicted on
    // a character object
    takeDamange(damage) {
        this.health -= damage;
    }

    // handles the four possible moves
    // opponent is null because if player heals
    // then it does not make sense for there to be
    // an opponent
    makeMove(move, opponent = null) {
        switch (move) {
            case 'PUNCH':
                opponent.takeDamage(parseInt(Math.random() * 100) % 10);
                opponent.updateHealth();
                break;
            case 'HEAL':
                this.health += 20;
                break;
            case 'KICK':
                opponent.takeDamage(parseInt(Math.random() * 100) % 20);
                opponent.updateHealth();
                break;
            case 'EXTERMINATE':
                opponent.takeDamage(opponent.health);
                opponent.updateHealth();
                break;
        }

        return opponent.checkForDeath();
    }
}

我还做了一些轻微的重构，这应该更容易理解正在发生的事情。