时间戳

首页 > 解决方案 > 修改类的一个实例的属性时，该类的所有实例上的该属性都会更改

javascript - 修改类的一个实例的属性时，该类的所有实例上的该属性都会更改

问题描述

我的背景主要是 Python 和 C#，但我正在帮助一位正在学习 JavaScript 初级课程的朋友学习编码。这节课本周结束了，但它从未涉及如何在 JavaScript 中进行类，所以我想我应该快速拼凑一个例子来说明它们是如何工作的。唯一的问题是，每当我更改类的一个实例的属性值时，该属性在所有实例上都会更改。有没有办法使这项工作？

基本上当我对巨魔 1 造成伤害时，巨魔 2 的生命值仍应为 10（反之亦然）。相反，如果我对巨魔 1 造成 3 点伤害，巨魔 2 和巨魔 3 的生命值也会变为 7。

我已经尝试在构造函数之外设置健康，但是当我调用类方法时我得到错误，说健康没有定义（不管我是使用 this.health 还是只使用健康）。

这是我制作的示例的html和js：

class trollEnemy {

  constructor() {
    this.health = 10;
  }


  takeDamage(damageAmount) {
    this.health = this.health - damageAmount;
    if (this.health > 0) {
      document.getElementById("outputDiv").innerHTML = "Dealt " + damageAmount + " damage to the troll, the troll now has " + this.health + " health left";
    } else {
      document.getElementById("outputDiv").innerHTML = "Dealt " + damageAmount + " damage to the troll, the troll is now dead";
    }
  }

  getHealth() {
    if (this.health > 0)
      document.getElementById("outputDiv").innerHTML = "The troll has " + this.health + " health left";
    else
      document.getElementById("outputDiv").innerHTML = "The troll is dead";
  }

}

var troll1 = new trollEnemy();
var troll2 = new trollEnemy();
var troll3 = new trollEnemy();

function generateNewTroll(trollNumber) {
  switch (trollNumber) {
    case 1:
      troll1 = new trollEnemy();
    case 2:
      troll2 = new trollEnemy();
    case 3:
      troll3 = new trollEnemy();
  }
}

function damageTroll(trollNumber) {
  switch (trollNumber) {
    case 1:
      troll1.takeDamage(document.getElementById("trollDamageAmount").value);
    case 2:
      troll2.takeDamage(document.getElementById("trollDamageAmount").value);
    case 3:
      troll3.takeDamage(document.getElementById("trollDamageAmount").value);
  }
}

function checkTrollHealth(trollNumber) {
  switch (trollNumber) {
    case 1:
      troll1.getHealth();
    case 2:
      troll2.getHealth();
    case 3:
      troll3.getHealth();
  }
}
<button onclick="generateNewTroll(1)">Generate New Troll #1</button><button onclick="damageTroll(1)">Deal Damage To Troll #1</button> <button onclick="checkTrollHealth(1)">Check Troll #1 Health</button><br>
<button onclick="generateNewTroll(2)">Generate New Troll #2</button><button onclick="damageTroll(2)">Deal Damage To Troll #2</button> <button onclick="checkTrollHealth(2)">Check Troll #2 Health</button><br>
<button onclick="generateNewTroll(3)">Generate New Troll #3</button><button onclick="damageTroll(3)">Deal Damage To Troll #3</button> <button onclick="checkTrollHealth(3)">Check Troll #3 Health</button> Enter the amount of damage you want to deal to a
troll: <input type="text" id="trollDamageAmount">

<br>

<div id="outputDiv">Test</div>

标签： javascriptclassproperties

解决方案

您需要将break语句放在switch语句中，否则它们都会被调用：

switch(trollNumber)
    {
        case 1:
            troll1.getHealth();
            break
        case 2:
            troll2.getHealth();
            break
        case 3:
            troll3.getHealth();
            break
    }

没有休息，事情就会通过，例如：

let trollNumber = 1
switch(trollNumber)
    {
        case 1:
            console.log(1)
        case 2:
           console.log(2)
        case 3:
           console.log(3)
    }

如果您将巨魔存储在数组中，您可能会更快乐。这将简化一切。例如，您可以编写如下函数：

function damageTroll(trollNumber){
   trolls[trollNumber].getHealth()
}

推荐阅读