是否可以在Javascript对象上定义“全局” getter / setter方法，以便在获取/设置任何属性时调用它？

Question

假设我们有一个对象：

const obj = {
  foo: bar,
  boop: "beep",
}

现在我想补充一点，出现一些功能的任何一个属性设置时间（也得到了这件事情其实）在此对象。让我们保持简单，说增加的功能只是一个console.log("a set/get action was just triggered on obj!")。

我该如何实现？

高级扩展：

命名设置的属性及其设置的值。

为了清楚起见，一些示例行为：

// simple:
obj.foo = "not bar anymore!";
// console output: a set/get action was just triggered on obj!

obj.rand = "a randomly added prop here";
// console output: a set/get action was just triggered on obj!


// advanced:
obj.boop = "burp";
// console output: a set/get action was just trigged on obj with prop: "boop", value: "burp".
obj.newRand = "a new randomly added prop here";
// console output: a set/get action was just trigged on obj with prop: "newRand", value: "a new randomly added prop here";

奖金：

欢迎使用其他任何方法来解决此问题。

Answer 1

请使用带有getter / setter陷阱的Proxy对象。

Proxy对象中的陷阱使您可以在自定义功能中插入对象方法，同时在过程结束时返回实际的对象数据。

代码示例：

const obj = {
  foo: 'bar',
  boop: "beep",
};
const objProx = new Proxy(obj, {
  get(obj, prop) {
    console.log('On obj', obj, 'getting', prop);
    return obj[prop];
  },
  set(obj, prop, newVal) {
    console.log('On obj', obj, 'setting', prop, 'to', newVal);
    return obj[prop] = newVal;
  },
});

objProx.boop = "burp";
objProx.newRand = "a new randomly added prop here";
// invokes getter:
objProx.foo;