javascript - 原型(prototype)对象和对象数组

Question

如果这个标题没有意义，让我详细说明。

我有两个对象，一个称为区域，一个称为敌人。

每个区域都有自己的敌人，所以我为每个区域制作了敌人原型(prototype)。

接下来，我在每个区域原型(prototype)上执行了一个 array.push(); 函数，因此，如果用户单击按钮，他们将看到一个他们可以本质上探索的“区域”列表。

给我带来错误的主要部分是如果我尝试像 alert(areas[0].enemies[0].name); 这样的函数；

如何使用按钮来显示特定敌人的名称？

请不要使用 jQuery

function area(name, enemies) {
  this.name = name;
  this.enemies = enemies;
}

function enemy(name, type) {
  this.name = name;
  this.type = type;
}

var cave = new area("Cave", {
  bat: new enemy("Bat", "Flying"),
  snake: new enemy("Snake", "Ground"),
});

var forest = new area("Forest", {
  bear: new enemy("Bear", "Animal"),
  coyote: new enemy("Coyote", "Wolf"),
});

areas = [];
areas.push(cave, forest);

var thatBtn = document.getElementById('thatBtn'),
    display = document.getElementById('display');

thatBtn.addEventListener('click', function() {
  for (i = 0; i < areas.length; i++) {
    var li = document.createElement('li'),
      liBtn = document.createElement('button');
    liBtn.textContent = areas[i].name;
    li.appendChild(liBtn);
    display.appendChild(li);
    liBtn.addEventListener('click', function() {
      for (j = 0; j < areas.length; j++) {
        if (areas[j].name == event.target.textContent) {
          alert(areas[j].name);
          for (k = 0; k < Object.keys(areas[j].enemies).length; k++) {
            alert(areas[j].enemies[k].name);
          }
        }
      }
    });
  }
});

<button id="thatBtn">click here</button>
  <ul id="display">
</ul>

Answer 1

它会给你一个错误，因为 areas[0].enemies 不是一个数组 - 它是一个对象。

{
    bat: new enemy("Bat", "Flying"),
    snake: new enemy("Snake", "Ground"),
}

更改为

for(var key in areas[j].enemies) {
    alert(areas[j].enemies[key].name);
}