如何在对象嵌套getter属性中访问父级属性值（非类实现）

问题原因 #

你遇到的错误是因为getter函数中的this指向的是obj.propTwo而非外层的obj，所以this.propOne为undefined，自然无法读取url属性。以下是几种不使用类的解决方法：

方法1：直接引用外层对象变量 #

最简单的方式是在getter中直接使用定义好的obj变量访问外层属性：

let obj = {
  propOne: {
    url: 'https://www.google.com'
  },
  propTwo: {
    get propTwoNested(){
      return `SITE URL: ${obj.propOne.url}`
    }
  },
}

console.log(obj.propTwo.propTwoNested); // 输出 "SITE URL: https://www.google.com"

这种方式利用闭包特性，getter函数可以访问到外部作用域的obj变量，直接获取外层属性。

方法2：用立即执行函数捕获外层上下文 #

如果不想直接依赖全局的obj变量，可以通过立即执行函数(IIFE)创建一个封闭作用域，保存外层对象的引用：

let obj = (() => {
  const outerObj = {
    propOne: {
      url: 'https://www.google.com'
    }
  };
  
  outerObj.propTwo = {
    get propTwoNested(){
      return `SITE URL: ${outerObj.propOne.url}`
    }
  };
  
  return outerObj;
})();

console.log(obj.propTwo.propTwoNested); // 输出 "SITE URL: https://www.google.com"

这里outerObj只在IIFE内部可见，避免了全局变量的直接引用，同时保证getter能稳定访问外层对象。

方法3：将getter绑定到外层对象 #

可以通过Function.prototype.bind()把getter的this绑定到外层的obj，需要先定义obj的基础结构，再添加getter：

let obj = {
  propOne: {
    url: 'https://www.google.com'
  },
  propTwo: {}
};

// 定义getter并绑定this到obj
Object.defineProperty(obj.propTwo, 'propTwoNested', {
  get: function() {
    return `SITE URL: ${this.propOne.url}`
  }.bind(obj)
});

console.log(obj.propTwo.propTwoNested); // 输出 "SITE URL: https://www.google.com"

通过bind()强制将getter的this指向外层的obj，这样就能正确访问propOne属性。

内容的提问来源于stack exchange，提问作者codermonk