在新键上动态运行 Object.defineProperty

Question

我正在使用Object.defineProperty 覆盖对象上的getter 和setter，这样我就可以监听所有的突变事件。

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

这很好用，但有一个警告——我需要提前知道我想听什么属性——这意味着我需要在开始时遍历所有我想看的键。

如果我想像这样在运行时随机分配一个新属性：

a.new_attr=1;

它不起作用，因为我还没有定义 new_attr 属性。

有没有办法：

1. 第一次分配属性时动态运行Object.defineProperty()；或
2. 还有其他方法可以处理这种情况吗？ （也许可以通过某种方式在不指定键的情况下监控所有属性）

Answer 1

我认为您真正想要使用的是Proxy。代理允许您拦截诸如 get 和 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);