javascript - 如何在对象创建者之外调用对象属性值

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

请参阅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对象及其所有属性(名称、hp、exp...)。

当您单击该按钮时，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 内部访问它功能。

您还可以在原型(prototype)上使用一种方法来节省内存:

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修复this.def在 playerDam功能