对象构造时嵌套对象的getter使用问题及解决方案

我希望在对象构造阶段获取嵌套对象的属性值，期望输出为'c'，但尝试两种嵌套写法后均得到undefined。以下是问题根源和解决办法：

正常参考示例（可运行） #

这是MDN文档中的基础示例，能正常返回数组最后一项：

const obj = {
  log: ['a', 'b', 'c'],
  get latest() {
    return this.log[this.log.length - 1];
  }
};

console.log(obj.latest);
// 预期输出: "c"
// 实际输出: "c"

你的错误尝试 #

尝试1 #

const obj = {
  level1: {
    log: ['a', 'b', 'c'],
    get latest() {
      return this.log[this.log.length - 1];
    }
  }
};

console.log(obj.latest);
// 预期输出: "c"
// 实际输出: undefined

尝试2 #

const obj = {
  level1: {
    log: ['a', 'b', 'c'],
    get latest() {
      return this.log[this.level1.log.length - 1];
    }
  }
};

console.log(obj.latest);
// 预期输出: "c"
// 实际输出: undefined

问题出在哪？ #

1. 调用路径错误：两个尝试里你都调用了obj.latest，但latest这个getter是定义在obj.level1下面的，obj本身没有这个属性，所以直接返回undefined。
2. this指向理解错误：尝试2里的this.level1完全错误——当你在level1的getter里用this，它指向的就是level1对象本身，这个对象里没有level1属性，所以this.level1是undefined，就算调用路径对了，这里也会报错。

如何实现预期效果？ #

根据你的需求，有两种可行方案：

方案1：在顶层对象定义getter #

如果希望直接通过obj.latest获取嵌套数组的最后一项，把getter定义在obj顶层，直接访问this.level1.log即可：

const obj = {
  level1: {
    log: ['a', 'b', 'c']
  },
  get latest() {
    const logArr = this.level1.log;
    return logArr[logArr.length - 1];
  }
};

console.log(obj.latest);
// 输出: "c"

方案2：保留嵌套getter，正确调用 #

如果latest getter本来就属于level1这个子对象，那就调用正确的路径obj.level1.latest，此时getter里的this指向level1，直接用this.log没问题：

const obj = {
  level1: {
    log: ['a', 'b', 'c'],
    get latest() {
      const logArr = this.log;
      return logArr[logArr.length - 1];
    }
  }
};

console.log(obj.level1.latest);
// 输出: "c"

内容的提问来源于stack exchange，提问作者Let Me Tink About It