如何在对象生成器之外调用对象属性值

Question

我试着用怪物防御来计算玩家的伤害。因为每个怪物都有不同的防御价值，所以我不知道如何根据所选的怪物对其进行编码以进行更改。这是我试过的。JSFiddle

var playerGold = 0;
var playerExp = 0;
var playerLvl = 1;
var expNeeded = 10;
var playerHP = 10;
var playerATK = 1;
var playerDEF = 1;
var playerSPD = 1;


function Monster(name, exp, gold, hp, atk, def, spd) {
    this.name = name;
    this.exp = exp;
  this.gold = gold;
  this.hp = hp;
  this.atk = atk;
  this.def = def;
  this.spd = spd;
  // Method definition
  this.implement = function() {
    var monsterList = document.getElementById('monsterList');
    var opt = document.createElement('OPTION'); // Creating option
    opt.innerText = this.name; // Setting innertText attribute
    monsterList.appendChild(opt); // appending option to select element
  }
  var playerDam = function () {
    var playerDamage = Math.round(playerATK - this.def);
  }
  // Method execution
  this.implement();
}

var fly = new Monster("fly", 1, 1, 5, 1, 0, 1);
var mouse = new Monster("mouse", 2, 3, 10, 2, 0, 2);
var rat = new Monster("rat", 4, 5, 20, 4, 2, 2);
var rabidChihuahua = new Monster("rabid chihuahua", 6, 8, 35, 6, 1, 4);
var bulldog = new Monster("bulldog", 10, 14, 60, 10, 4, 1);

$('#battleButton').click(function() {  
    playerDam();
  $('#dam').html("You have hit the " + $('#monsterList').val() + " for " + playerDamage + " damage");
});

Answer 1

实现你想要的目标的一种方法是：

• 在this类中保存对Monster的引用(例如self )
• 在Monster元素的data属性中保存对每个option对象的引用。

function Monster(name, exp, gold, hp, atk, def, spd) {
  var self = this;
  /* ...*/
  this.implement = function() {
    /* ... */
    // we save the Monster object (self) in the 
    // <option></option> data attribute 'monster'
    $(opt).data('monster', self)
  }

  // and your playerDam function becomes:
  this.playerDam = function () {
    self.playerDamage = Math.round(playerATK - this.def);
    return self.playerDamage;
  }
}

当用户单击该按钮时，您将检索当前选定的值，并获取数据属性：

monsterEl = $('#monsterList option:selected');
// we retrieve the monster selected from the <option></option> data attribute
monster = monsterEl.data('monster')
$('#dam')
  .html("You have hit the " + $('#monsterList').val() + " for " + monster.playerDam() + " damage");

见更新小提琴

编辑

你有一张怪物名单，如果你这么做的话：

var opt = document.createElement('OPTION'); // Creating option
opt.innerText = this.name;

那你就不能拯救怪物，而只救怪物的名字。

因此，您必须在每个option元素中保留对monster对象的引用。

一种方法是使用data-attributes，它的目的是存储一个具有名称的对象(在这里，我选择了monster，但它可以是任何字符串)，您可以稍后检索它。

当您创建一个像var fly = new Monster("fly", 1, 1, 5, 1, 0, 1)这样的新怪物时，它将创建一个<option data-monster="you monster object"></option>元素(这个数据怪物不会显示在源代码中，但相信我，它就在那里)，它包含了包含所有属性(name、hp、exp.)的Monster对象。

单击该按钮时，jQuery将获得所选选项，并使用键monster检索数据：

// get the selected option via CSS selector
monsterEl = $('#monsterList option:selected')
// get the associated Monster via the .data('monster') method
monster = monsterEl.data('monster')
// now you can invoke method on the monster variable
console.log(monster.name ) // 'fly'
console.log(monster.hp ) // 5

现在关于playerDam()函数：

var self = this
this.playerDamage = 0;
this.playerDam = function () {
    self.playerDamage = Math.round(playerATK - self.def);
    return self.playerDamage;
}

您正在将playerDam函数分配给Monster函数作用域(this)。

要访问函数中的Monster作用域，您必须使用一个技巧并使用一个变量(这里是self，但可以是任何变量名)来预先存储Monster作用域。然后您可以从playerDam函数中访问它。

您还可以在原型上使用一个方法来节省内存：

Monster.prototype.playerDam = function() {
    // 'this' is the now the Monster class scope
    this.playerDamage = Math.round(playerATK - this.def);
    return this.playerDamage;
}

我希望我是清楚的，这个混合了许多不同的概念，也许其他人可以更好地解释它，我做了;)您应该看看Javascript框架，如淘汰赛，反应，或vue.js，这使您更容易！

编辑2

我用重新更新小提琴来修复playerDam函数中的this.def