Как определить методы в объектах 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) { ... }

Вам также необходимо убедиться, что вы создаете экземпляры Character с помощью оператора new, например:

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

Я бы порекомендовал использовать синтаксис 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();
    }
}

Я также провел небольшой рефакторинг, который должен облегчить понимание происходящего.

Answer 3

измените : на = и назначьте его локальному свойству, например

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