How in javascript it is possible to track the change in the property of an object and call call when changing?
For example: obj.prop = true;
If obj.prop to false , the next() function should be called

  • You can read about observer () - Sergey Glazirin
  • look at my version, I think everything will fall into place - user192664

2 answers 2

Option through Proxy c get and set

It works with nested objects, as well as get when properties of an object are deleted or when a transition to an nested object occurs. In the example it is easy to understand what is changing and where, as well as to process the changes as you need (instead of console.log ).

Example

 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 and object.observe are outdated or experimental and not as flexible at the moment.

    Option 1 : use setter / getter

     const obj = { _prop: false, get prop() { return this._prop } set prop(value) { // тут можно еще что-то вызвать this._prop = value } }

    Option 2 : use proxy

     const handler = { set: function(obj, prop, value) { if(prop === 'prop') { console.log('prop was changed'); } // Стандартное сохранение значения obj[prop] = value; } }; const test = new Proxy({prop: true}, handler); test.prop = false; test.prop = true;

    3 option : object observe (experiment es7 )

     const obj = {prop: true}; Object.observe(obj, function(changes) { if(changes[0].name === 'prop') { console.log('prop was changed'); } }); obj.prop = false;

    4 option : just write a function in which it changes and use only it

     function changeObjProp (obj, value, callback) { obj.prop = value; return callback(); } const test = {prop: false} changeObjProp(test, true, () => console.log('prop was changed'));
    • Forgot to say that the object is built-in)) Is the 3rd option suitable for the built-in object? - Alexey Zolotov
    • @AlexeyZolotov, what does embedded mean? Describe better what exactly you need, maybe there is another solution - ThisMan
    • There is a speechSynthesis object (api for tts), its speaking property changes from false to true when playing text to speech and vice versa when stopped .. you need to understand when this happens - Alexey Zolotov
    • @AlexeyZolotov, most likely he has a start and stop event for which you need to subscribe - Grundy
    • there is a onend event, only it does not even plow in the latest version of chrome .. - Alexey Zolotov