如何在对象制造者之外调用对象属性值

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

实现您想要的一种方法是：
- 在Monster 类中保存对this 的引用（例如self）
- 在option 元素的data 属性中保存对每个Monster 对象的引用。

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");

见updated fiddle

编辑

你有一个怪物列表，如果你这样做的话：

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

那么你不保存怪物，而只是怪物的名字。

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

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

当你创建一个像 var fly = new Monster("fly", 1, 1, 5, 1, 0, 1) 这样的新怪物时，这将创建一个 <option data-monster="you monster object"></option> 元素（数据怪物不会显示在源中，但相信我，它就在那里），其中包含 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 框架，例如 Knockout、react 或 vue.js，它们会让您更轻松！

编辑 2
我已经 reupdated the fiddle 在 playerDam 函数中修复 this.def