Как в javascript можно отследить изменение свойства объекта и при изменении вызвать callBack? Например: obj.prop = true; При изменении obj.prop на false должна вызываться функция next()
Ответ
Вариант через Proxy c get и set
Работает с вложенными объектами, а так же срабатывает get при удалении свойств объекта или когда происходит переход во вложенный объект. В примере легко понять что и где меняется, а так же обрабатывать изменения так как вам необходимо (вместо console.log).
Пример
let obj = {
foo: 1,
bar: 2,
items: {
firstProperty: 1,
secondProperty: 2
}
};
let proxied = new Proxy(obj, {
get: function(target, prop) {
console.log({
type: "get",
target,
prop
});
return Reflect.get(target, prop);
},
set: function(target, prop, value) {
console.log({
type: "set",
target,
prop,
value
});
return Reflect.set(target, prop, value);
}
});
proxied.items.firstProperty = 3;
//{ type: 'get', target: { foo: 1,bar: 2, items: { firstProperty: 1, secondProperty: 2 } }, prop: 'items' }
//{ type: 'set', target: { foo: 1, bar: 2, items: { firstProperty: 3, secondProperty: 2 } }, prop: 'bar', value: 2 }
proxied.bar = 2;
//{ type: 'set', target: { foo: 1, bar: 2 }, prop: 'bar', value: 2 }
proxied.asd = 3;
//{ type: 'set', target: { foo: 1, bar: 2 }, prop: 'asd', value: 3 }
proxied.foo;
//{ type: 'get', target: { foo: 1, bar: 2, asd: 3 }, prop: 'foo' }
proxied.foo = 3;
//{ type: 'set', target: { foo: 1, bar: 2, asd: 3 }, prop: 'foo', value: 3 }
delete proxied.foo;
//{ type: 'get', target: { bar: 2, asd: 3 }, prop: Symbol(util.inspect.custom) } ...
console.log(obj);
object.watch и object.observe являются устаревшими или экспериментальными и не такими гибкими на данный момент.
Комментариев нет:
Отправить комментарий