如何在对象创建者之外调用对象属性值 [英] How to call on an objects property value outside of the object maker

问题描述

我正在尝试使用玩家的怪物防御作为计算公式来计算玩家的伤害.由于每个怪兽都有不同的防御值，所以我不知道如何根据所选怪兽对其进行编码以使其变化.这是我尝试过的. JSFiddle

I am trying to make an equation for player damage that uses the monsters defense as a calculation. Since each monster has a different defense value I do not know how to code it to change based on the selected monster. Here is what I tried. 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对象的引用.

One way to achieve what you want, is to :
- save a reference to this in the Monster class (as self for example)
- save a reference to each Monster object in a data attribute of the option element.

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;
  }
}

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

When the user click the button, you retrieve the current selected value, and get the data attribute :

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

请参见更新的小提琴

修改

如果有的话，您有一个怪物列表:

You have a list of monsters, if you just do:

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

然后，您不保存怪物，而只保存怪物的名字.

Then you don't save the monster, but just the monster's name.

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

So you have to keep a reference to the monster object in each option element.

一种方法是使用 data-attributes ，其目的是使用一个名称(在这里我选择了monster，但是它可以是任何字符串)，以后可以检索.

One way to do this is to use data-attributes whose purpose are to store an object with a name (here I chose monster but it could be any string), that you could retrieve later.

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

When you create a new monster like var fly = new Monster("fly", 1, 1, 5, 1, 0, 1), this will create an <option data-monster="you monster object"></option> element (the data-monster will not show in the source, but trust me, it's there), containing the Monster object with all its properties (name, hp, exp...).

当您单击按钮时，jQuery将获得选定的选项并使用键monster检索数据:

When you click the button, jQuery will get the selected option and retrieve the data with the key 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函数内部访问它.

You are assigning the playerDam function to the Monster function scope (this).
To access the Monster scope inside the function, you have to use a trick and use a variable (here self, but could be any variable name) to store the Monster scope beforehand. Then you can access it from inside the playerDam function.

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

You could also have used a method on the prototype to save up memory:

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 ，这使您更轻松！

I hope I was clear, this mix a lot of different concepts together, maybe other could explain it better that I did ;) You should take a look at Javascript framework such as Knockout , react, or vue.js which make this easier for you!

编辑2
我重新更新了小提琴以修复playerDam函数中的this.def

Edit 2
I've reupdated the fiddle to fix this.def in the playerDam function

这篇关于如何在对象创建者之外调用对象属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！