Как отследить изменение свойства объекта?

Question

[Paul_Morte]

Как повесить прослушку на изменение свойства объекта?

Сначала создаю объект со свойством money = 1000
Вешаю на него сеттер на изменение свойства money. Я так понял именно эта функция выполняется при изменении свойства.
Меняю свойство money и получаю Undefined

function test(some_number) 
{
this.money = some_number;


		
		/// Инструкция - при изменении this.money выполнить следущее
		Object.defineProperty(this, 'money', {
		set: function(num){
		alert( this.money )	 // UNDEFINED
		// SOME_FUNCTION() - далее выполняю функцию												
		}
		});

}

var my_cash = new test(1000); 
/// В какой-то момент времени свойство изменилось
my_cash.money  -= 200;

Comments

[Юрий Костин]

Добрый день.

А какую вы преследуете цель?

[Paul_Morte]

Добрый день. Делаю игру. В ней на персонажей (как врагов так и героя) воздействует множество возможностей урона ( удар, падение, заклинание- очень много). Чтобы все автоматизировать удобнее было бы менять показатели жизни в div-ах не при каждой функции изменения жизни ...

player.hp - enemy.damage;
$player.hp_code.text(player.hp ) //$('.playerHealthPoints');

... а непосредственно следить за каждым свойством персонажей и при изменении делать соответсвующие действия

Answer 1

[0xD34F]

Вешаю на него сеттер...

Не-а, не на него. Созданное ранее свойство вы перетёрли вызовом defineProperty, кроме того, вы не определяете геттер - отсюда и undefined.

Можно добавить геттер, само же значение сделать локальной переменной конструктора:

function test(m) {
  let money = m;

  Object.defineProperty(this, 'money', {
    get() {
      return money;
    },
    set(val) {
      alert(`Значение свойства money меняется с ${money} на ${val}`);
      money = val;
    },
  });
}

Или можно воспользоваться Proxy:

function test(m) {
  this.money = m;

  return new Proxy(this, {
    set(target, prop, val) {
      alert(`Значение свойства ${prop} меняется с ${target[prop]} на ${val}`);
      target[prop] = val;
      return true;
    },
  });
}

Comments

[Paul_Morte]

return new Proxy(this, {
    set(target, prop, val) {
      alert(`Значение свойства ${prop} меняется с ${target[prop]} на ${val}`)
      target[prop] = val
      return true
    }
  })

А этот код исчезает, не работает если я создаю копию объекта через JSON? Как можно сохранить Proxy при копировании объекта?

Пользуюсь функцией для копирования

function this_copy(src) {
  return JSON.parse(JSON.stringify(src));
}

[0xD34F]

Paul_Morte,

Как можно сохранить Proxy при копировании объекта?

Никак. Надо новый Proxy создавать.

[Paul_Morte]

0xD34F, А как тогда скопировать правильно объект?

Если у меня там очень много свойств то как то криво

function card_copy(point) {
  this.health = point.health;
  this.defaultHealth = point.defaultHealth;
  this.damage = point.damage;
...

return new Proxy(this, {
    set(target, prop, val) {
      alert(`Значение свойства ${prop} меняется с ${target[prop]} на ${val}`)
      target[prop] = val
      return true
    }
  })

[0xD34F]

Paul_Morte, вместо того, чтобы дёргать каждое свойство вручную, можете обойти их с помощью for...in, или использовать Object.assign, или spread.