Страницы

Поиск по вопросам

четверг, 16 мая 2019 г.

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

Как в 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 являются устаревшими или экспериментальными и не такими гибкими на данный момент.

Комментариев нет:

Отправить комментарий