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

Question

[Stepan1998]

Как повесить функцию на событие смены какого-либо значения в объекте?
Например, есть
const obj = { name: 'Boris', age: 5}
И если мы где-то сделаем obj.name = 'Stepan', то вызвалась функция

Answer 1

[0xD34F]

Заворачиваете свой объект в Proxy:

const obj = {
  a: 69,
  b: 187,
  c: 666,
};
    
const proxy = new Proxy(obj, {
  set(target, key, val) {
    console.log(`${key} changed from ${target[key]} to ${val}`);
    target[key] = val;
    return true;
  },
});

Дальше вместо исходного объекта работаете с экземпляром Proxy.

Comments

[Stepan1998]

Есть объект
const obj = { name: 'Boris', age: 5}
let p = new Proxy(obj, handler)
Подскажи, как мне написать этот хендлер на срабатывание определенных функций при изменении одного из его свойств? (не увидел пример)
Если меняем name, то одна функцию запустится, а если age, то другая

[0xD34F]

Чего подсказать, как в зависимости от значения параметра выполнить то или иное действие? Давайте-ка сами.

Answer 2

[Вадим]

Есть два основных варианта:
1) Использовать get и set
2) использовать Proxy

Answer 3

[Сергей Соколов]

const obj = { name: 'Boris', age: 5};

// переназначить свойство с геттерами и сеттерами
// ниже очччень сокращённый пример
Object.defineProperty(obj, "name", {
  set(newName) {
    console.log("Name changed to", newName);
  }
});

// проверяем:
obj.name = "Toster"; // в консоль выведет "Name changed to Toster"

на деле нужно сохранить начальное значение, где-то хранить значение свойства name, и добавить геттер. Т.к. вероятно, не единственное свойство захочется так подменить, лучше будет воспользоваться «оптовым» Object.defineProperties() или в цикле по свойствам объекта каждое сделать реактивным интерактивным.

Подробнее см. примеры для Object.defineProperty()

Comments

[Stepan1998]

А можно как-то сделать это для 2 и более свойств не прибегая к повторной записи в виде
Object.defineProperty(obj, "name", {
Что-то вроде if(name), то...

[Сергей Соколов]

Stepan1998, в таком случае удобнее Proxy, как уже посоветовали. Там последний из примеров на странице документации - ваш случай. Если свойство такое-то, то вернуть "world", а иначе как есть.