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

How to call on an objects property value outside of the object maker

本文关键字：对象 外部调用 属性      更新时间：2023-09-26

我正在尝试使用怪物防御作为计算来计算玩家伤害的方程式。由于每个怪物都有不同的防御值，我不知道如何编码它以根据所选怪物进行更改。这是我尝试过的。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");
});

实现您想要的一种方法是：
- 在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;
  }
}

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

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元素中保留对怪物对象的引用。

执行此操作的一种方法是使用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函数分配给怪物函数作用域 （ 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
我已经重新更新了小提琴以修复playerDam函数中的this.def

相关文章：