Почему не получаю ожидаемый результат в данном примере?

Question

[Максим]

Привет!
Изучаю js, делаю консольную рпг в качестве обучения.
Прошу посмотреть данный код:

// Create global object class
let Obj = function (	name, 
						power,)  {   	      
	this.name = name;
	this.power = power;

};

// Create character class
let Char = function (	name, 
						power, weapon ) {  
	Obj.apply(this, arguments);

	this.weapon = weapon;

	this.x_power  = power + weapon.power;
}

// Create weapon
									
let Club = new Obj("Дубина",  2 ); // 

// Create character 
// 
let Player = new Char("Char", 1,  Club);

console.log(Player.power); // Ожидаю получить 1 - Получаю!
console.log(Player.x_power); // Ожидаю получить 3 - Получаю!
Player.power = 5; // Изменяю power 
console.log(Player.power); // Ожидаю получить 5 - Получаю!
console.log(Player.x_power); // Ожидаю получить 7 (как power + weapon.power), но мои ожидания не оправдываются: Получаю 3.

Почему x_power больше не пересчитывается?
Изначально ведь все работает и x_power получает значение как сумма power и weapon.power.
Power пересчитывается ведь.

Answer 1

[Роман]

для таких задач принято использовать getter-ы и setter-ы

https://learn.javascript.ru/getters-setters
https://learn.javascript.ru/descriptors-getters-setters

вот немного кривоватый но рабочий вариант:

// Create global object class
let Obj = function (	name,  power )  {   	      
  this.name = name;
  this.power = this._power = power;
};



// Create character class
let Char = function (	name, power, weapon ) {  
  Obj.apply(this, arguments);

  this.weapon = weapon;

  this.x_power  = power + weapon._power;
  
  Object.defineProperty(this, "power", {
    set: function(value) {
    /* console.log("!!!!!") */
        this._power = value;
        this.x_power  = this._power + this.weapon._power;
    },
    get: function(){
    	  return this._power;
    }

  });  
}



// Create weapon
                  
let Club = new Obj("Дубина",  2 ); // 

// Create character 
// 
let Player = new Char("Char", 1,  Club);

console.log(Player.power); // Ожидаю получить 1 - Получаю!

console.log(Player.x_power); // Ожидаю получить 3 - Получаю!

Player.power = 5; // Изменяю power 
console.log(Player.power); // Ожидаю получить 5 - Получаю!
console.log(Player.x_power); // Ожидаю получить 7 (как power + weapon.power), но мои ожидания не оправдываются: Получаю 3.

Comments

[Максим]

Спасибо! Просто с геттерами и сеттерами код увеличивается в два раза!
А что если у меня свойств в 10 раз больше?
У меня их и есть на самом деле в 10 раз больше, просто я вырезал все, для примера они не нужны.
Неужели без геттеров и сеттеров это не сделать?
Мне же не нужна инкапсуляция по сути. Я просто хочу чтобы работало...

[Роман]

max_shane, а по другому только используя методы. например так:

код

// Create global object class
let Obj = function (	name,  power )  {   	      
  this.name = name;
  this.power = power;
};



// Create character class
let Char = function (	name, power, weapon ) {  
  Obj.apply(this, arguments);

  this.weapon = weapon;

  this.x_power  = power + weapon.power;

}

Char.prototype.setPower = function(power){
   this.power = power;
   this.x_power  = power + this.weapon.power;
}

// Create weapon
                  
let Club = new Obj("Дубина",  2 ); // 

// Create character 
// 
let Player = new Char("Char", 1,  Club);

console.log(Player.power); // Ожидаю получить 1 - Получаю!

console.log(Player.x_power); // Ожидаю получить 3 - Получаю!

Player.setPower(5); // Изменяю power 
console.log(Player.power); // Ожидаю получить 5 - Получаю!
console.log(Player.x_power); // Ожидаю получить 7 (как power + weapon.power), но мои ожидания не оправдываются: Получаю 3.

[Максим]

Хорошо, я понял, ты решил мою задачу спасибо. Но меня больше интересует вопрос ПОЧЕМУ, не работает так как у меня?
Что происходит, можешь объяснить? Почему он не хочет пересчитывать сумму x_power ?
Почему он берет старые не актуальные данные?
Первый раз он же выводит x_power как сумму и мы видим что он может складывать, и он складывает.
Но второй раз после изменения power , в x_power до сих пор в уравнении старое значение power.
Почему? Объясни пожалуйста чтобы я понял. В учебнике я такое не вычитаю.

[Роман]

max_shane, если честно, то я все сделал бы совершенно иначе. Идея с Obj.apply(this, arguments); так себе, это может в последствии привести к куче проблем. не понимаю для чего вы привязываете контекст игрока к оружию. Просто сделайте у игрока свойство slots и вставляйте в слоты оружие, экипировку и прочее, а у самого игрока сделайте методы, которые будут например расчитывать урон с учетом характеристик игрока и предметов лежащих в слотах.

[Роман]

max_shane,

Но меня больше интересует вопрос ПОЧЕМУ, не работает так как у меня?

потому, что содержимое функции Char ао сути является конструктором и выполняется всего 1 раз, при инициализации -> let Player = new Char("Char", 1, Club);

[Максим]

Роман, Честно говоря я и думал что именно так я и делаю, как будто бы я сделал некий слот. )
Что подразумевается тогда под "вставлять" в slots оружие?
Перечислять массив объектов?

[Максим]

Вот вы и ответили на мой вопрос. Спасибо большое!
Я тоже заметил, что выполняется у меня это 1 раз. Но видимо я где то пропустил что конструктор выполняется один раз и все.

[Роман]

дайте мне минут 10-15 я покажу что имею ввиду

[Максим]

Роман, Я очень вам благодарен!

[Роман]

Это лишь пример для демонстрации подхода:

class Weapon {
  constructor(name="палка", damage=1){
    this.name = name;
    this.damage = damage;
  }
}

class Player {
  constructor(name="безымянный", strong=1){
    this.name = name;
    this.strong = strong;
    this.slots = {
      hand: {},
      head: {},
      // и так далее. в идеале вообще сделать отдельным классом со своими методами
    };
  }
  setItem(slot,item){
    if(!this.slots[slot]) return console.log("не существует слота:", slot);
    this.slots[slot] = item;
  }
  calcDamage(){
    return this.slots.hand.damage*this.strong;
  }
}



// создаем паоку с уроном 0.5
const stick = new Weapon("кривая палка", 0.5);

// создаем супер меч с уроном 2.4
const sword = new Weapon("супер меч", 2.4);

// создаем игрока Васю с силой 3
const player = new Player("Вася", 3);



// вкладываем Васе в руку палку и считаем урон с учетом силы Васи и характеристик палки
player.setItem("hand", stick);
var damage = player.calcDamage();
console.log("Вася может с помощью", stick.name, "нанести", damage, "едениц урона");
// выведет: Вася может с помощью кривая палка нанести 1.5 едениц урона


// вкладываем Васе в руку меч и считаем урон с учетом силы Васи и характеристик меча
player.setItem("hand", sword);
var damage = player.calcDamage();
console.log("Вася может с помощью", sword.name, "нанести", damage, "едениц урона");
// выведет: Вася может с помощью супер меч нанести 7.199999999999999 едениц урона

[Максим]

Роман, Очень благодарю!
А команда setItem заменяет объект находящийся в слоте?

[Роман]

max_shane, в данном примере да. setItem это метод класса Player (мы его описали в классе). В идеале вам надо продумать и слоты и инвентарь и методы работы с ними. Так же вам нужно будет написать сериализацию и десериализацию игрока со всем его содержимым, чтобы можно было сохранять его в виде json с последующей возможностью загрузить игрока из json данных. Повторюсь, пример лишь демонстрация, в реальной игре всего будет больше и структура с логикой будут сложнее. Сейчас вы стоите в самом начале пути, потому не стал чрезмерно усложнять этот пример.

[Максим]

Да, именно, на этом этапе пути я и нахожусь )
Вот учусь на примере создания демо рпг игры.

Спасибо Роман!

[Роман]

max_shane, не за что