从 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)

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

Creating dynamic getters and setters from a base object in javascript?

javascript

getter-setter