Dynamically running Object.defineProperty on new keys

Question

I am using Object.defineProperty to override getter and setter on an object, so that I can listen to all the mutation events.

var a = {};
Object.defineProperty(a, key, {
  get: function(){
    ..
  },
  set: function(val){
    ..
  }
}

This works fine, but there's one caveat--I need to know in advance what attributes I want to listen to--which means I need to iterate through all the keys I want to watch in the beginning.

If I wanted to randomly assign a new attribute during runtime like this:

a.new_attr=1;

it wouldn't work because I haven't defined the new_attr property yet.

Is there a way to either:

1. dynamically run Object.defineProperty() when I assign the attribute for the first time; or
2. any other way to handle situations like this? (Maybe some way to monitor ALL attributes without specifying the keys)

Answer 1

I think what you really want to use is a Proxy . Proxies allow you to intercept events such as get and set.

 var obj = { a: 1, b: 2 }; var proxiedObj = new Proxy(obj, { get: function(target, name) { console.log(`get: ${name}`); return target[name]; }, set: function(target, prop, value) { console.log(`set: ${prop}`); target[prop] = value; } }); console.log(proxiedObj.a); console.log(proxiedObj.b); // Notice that it still works even on new properties proxiedObj.c = 3; console.log(proxiedObj.c);