tengo un objeto como
const obj = { field1: obj1, field2: obj2 } y ahora me gustaría ejecutar una función cuando se cambió algo en obj :
function objChanged() { ... } // decorate obj somehow ... obj.field3 = data; // objChanged should be called (Proxy can see it) obj.field1.val = data; //objChanged should be called (Proxy can't see it?)AFAIK hay un MutationObserver que funciona solo para DOM y Proxy que intercepta solo propiedades propias, ¿verdad?
No soy dueño obj1 , así que no puedo cambiarlo. ¿Hay alguna manera de lograr esta funcionalidad?
Seguir el fragmento de código escuchará la propiedad del objeto que puede iterar sobre las propiedades del objeto para escuchar todo. Tengo curiosidad, ¿qué estás tratando de lograr?
const dog = { bark: true }; function Observer(o, property) { var _this = this; this.observers = []; this.Observe = function (notifyCallback) { _this.observers.push(notifyCallback); }; Object.defineProperty(o, property, { set: function (val) { _this.value = val; for (var i = 0; i < _this.observers.length; i++) { _this.observers[i](val); } }, get: function () { return _this.value; }, }); } const observer = new Observer(dog, "bark"); observer.Observe(function (value) { l("Barked"); }); dog.bark = true; dog.bark = true; dog.bark = true; dog.bark = true;La respuesta de Orgil funciona solo con una sola propiedad que debe conocerse y codificarse. Quería una solución que funcionara para todas las propiedades, incluidas las añadidas más adelante. Inspirándome en su idea de crear un objeto de observación, creé un Proxy dinámico que agrega otros Proxies cuando es necesario.
En el siguiente código, dog1 sirve como proxy: establecer sus propiedades modifica el objeto dog original y registra el valor asignado en la consola.
function AssignProxy(o, fn, path) { var tree = {}; if(!path) path = "obj"; return new Proxy(o, { get: (_, prop) => { if(typeof o[prop] != "object") return o[prop]; if(tree[prop] === undefined) tree[prop] = AssignProxy(o[prop], fn, `${path}.${prop}`); return tree[prop]; }, set: (_, prop, val) => fn(o[prop] = val, prop, o, path) || 1 }); } /****** TEST *******/ const dog = { sounds: {}, name: "Spike" }; let callback = (val, prop, o, path) => console.log(`assigning ${path}.${prop} to ${val}`) const dog1 = AssignProxy(dog, callback, "dog1"); dog1.name = "Tyke"; // overwrite property dog1.age = 4; // create a property dog1.sounds.howl = "hoooooowl"; // create a deep property dog1.sounds.howl = {text: "hoowl", pitch: 5000}; // overwrite the deep property var howl = dog1.sounds.howl; // access by reference howl.pitch = 6000; // overwrite later added property console.log(dog); // verify the original object