原型对象和对象数组

Question

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

我有两个物体，一个叫区域，一个叫敌人。

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

接下来，我对每个区域原型做了一个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);
}

Answer 2

enemies是一个对象，而不是一个数组，因此您需要遍历keys并从中获取，而不是从索引中获取，只需用它更新您的代码片段，但是代码可能会更好。

​

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);
          var keys = Object.keys(areas[j].enemies);
          for(k=0; k < Object.keys(areas[j].enemies).length; k++){
            alert(areas[j].enemies[keys[k]].name);
          }
        }
      }
    });
    
  }
});

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

​

Answer 3

将敌人作为数组添加，不需要在对象中使用“命名键”。

​

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", [
    new enemy("Bat", "Flying"),
    new enemy("Snake", "Ground"),
]);

var forest = new area ("Forest",[ 
    new enemy("Bear", "Animal"),
    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>

​