递归Object.defineProperty() getter

Question

我试图递归地将类构造函数参数中的对象值赋值为类的属性。无法理解如何进行递归--大多数情况下获得“最大调用堆栈大小超过”和无穷大循环。下面是演示：

const Locale = function(rules) {    
    for (let prop in rules) {
        Object.defineProperty(this, prop, {
            get: function () {
                console.log('getter for "%s" called', prop)
                return rules[prop];
            }
        });
    }
}

const rules = {
    a: {
        b: {
            c: 'value'
        }
    }
}

const locale = new Locale(rules);

console.log(locale.a.b.c);

现在，我得到了以下控制台输出：

getter for "a" called
value

如何为rules对象的每个级别分配一个getter？预期控制台输出：

getter for "a" called
getter for "b" called
getter for "c" called
value

Answer 1

您需要为每个嵌套级别的Locale对象创建一个rules对象：

const Locale = function(rules) {    
    for (let prop in rules) {
        Object.defineProperty(this, prop, {
            get: function () {
                console.log('getter for "%s" called', prop);

                // create new Locale if object, return value if not an object
                if( rules[prop] !== null && typeof rules[prop] === 'object' )
                    return new Locale( rules[prop] );
                else
                    return rules[prop];
            }
        });
    }
}

const rules = {
    a: {
        b: {
            c: 'value'
        }
    }
}

const locale = new Locale(rules);
console.log(locale.a.b.c);

Answer 2

如果您只想使用一个函数而不是一个类，您可以：

var locale = (rules) => {
  if (rules !== null && typeof rules !== 'object') return rules
  return Object.defineProperties({}, Object.keys(rules).reduce((acc, key) => ({
    ...acc,
    [key]: {
      get: () => {
        console.log('getter for "%s" called', key)
        return locale(rules[key])
      }
    }
  }), {}))
}

var l = locale(rules)
console.log('locale', l)
console.log(l.a.b.c)