从javascript中的基础对象创建动态getter和setter吗？

Question

这是我的基本对象：

let resources = {
    TEST_FLAG: false,
    FRUIT: 'banana',
    ID: 11
};

我想通过setter和getter访问该对象的每个属性。我尝试在下面这样做：

let dynamicResources = resources

for (let key in resources) {
    Object.defineProperty(dynamicResources, key, {
        get() {
            console.log(`[debug]: GET <${key}>, VALUE <${this[key]}>`);
            return `${this[key]}`;
        },

        set(value) {
            console.log(`[debug]: SET <${key}>, VALUE <${this[key]}>`);
            this[key] = value;
        }
    });
}

想法是getter和setter可以从具有任意数量属性的基础对象生成。

[当我console.log()结果对象时，我得到这个：

{
  TEST_FLAG: [Getter/Setter],
  FRUIT: [Getter/Setter],
  ID: [Getter/Setter]
}

这表明工厂循环已起作用。但是，当我这样做时：

dynamicResources.FRUIT = 'berry';

我收到以下错误：

  set: function set(value) {
  RangeError: Maximum call stack size exceeded

这表明嵌套函数有些不正确。

如何基于通用基础对象生成动态的getter / setter对象？

Answer 1

使用Proxy构造函数。查看Developer Mozilla Proxy Page

var dynamicObject = new Proxy({
   TEST_FLAG: false,
   FRUIT: 'banana',
   ID: 11
  },{
  get:function(target,key){
   console.log(`get ${key} value. value is: ${target[key]}`);
   return target[key]
  },
  set:function(target,key,val){
    console.log(`set ${key} value. old value is:${target[key]} new value is ${val}`)
    target[key] = val;
    return true;
  }
})

console.log(dynamicObject.ID);
dynamicObject.ID = 25;




// Output is:
/*
get ID value. value is: 11
11
set ID value. old value is:11 new value is 25
*/

Answer 2

尝试这样：

let resources = {
    TEST_FLAG: false,
    FRUIT: 'banana',
    ID: 11
};

let dynamicResources = {
    _state: {...resources}
}

for (let key in resources) {
    Object.defineProperty(dynamicResources, key, {
        get() {
            const internalKey = key
            return this._state[internalKey]
        },
        set(value) {
            const internalKey = key
            this._state[internalKey] = value;
        }
    });
}
console.log(dynamicResources.FRUIT)
dynamicResources.FRUIT = 'berry';
console.log(dynamicResources.FRUIT)