javascript - 是否可以在 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";

奖金：

欢迎任何其他解决此问题的方法。

标签： javascript

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;