JS对象嵌套getter的计算属性名无法访问父对象属性如何解决

问题根因 #

你的写法报错是由对象字面量的初始化规则导致的，核心原因有两个：

1. 计算属性名的求值发生在对象赋值给constants变量之前，此时constants还未完成初始化，直接访问会抛出未定义错误
2. 计算属性名中使用的this指向对象定义所处作用域的顶层this（浏览器下是window，Node下是globalThis/module.exports），并不会指向正在构建的constants对象，因此也无法读取到FLAG2属性

方案1：提前抽离常量键（推荐） #

先将所有FLAG常量单独定义，再组装到constants对象中，此时计算属性名可以直接访问提前声明的常量，没有初始化顺序问题，也符合TypeScript项目的最佳实践：

// constants.ts
// 单独声明可复用的常量键
export const FLAG2 = "testx2";
export const FLAG4 = "testx4";
export const FLAG6 = "testx6";

export const constants = {
    FLAG2,
    FLAG4,
    FLAG6,
    someGetters: {
        get [FLAG2]() {
            return "Test Test";
        },
        get [FLAG4]() {
            return "Test Test Test Test";
        },
        get [FLAG6]() {
            return "Test Test Test Test Test Test";
        }
    }
};

修改后你的调用语句console.log(constants.someGetters[constants.FLAG2])可以正常输出Test Test，原使用逻辑完全不需要调整。

方案2：动态追加定义getter #

如果不想拆分原constants对象的结构，可以先初始化constants的基础属性，再通过Object.defineProperty动态给someGetters追加getter，此时constants已经完成初始化，可以正常访问内部属性：

// constants.ts
export const constants = {
    FLAG2: "testx2",
    FLAG4: "testx4",
    FLAG6: "testx6",
    someGetters: {} as Record<string, string>
};

// 批量注册getter
[
    {key: constants.FLAG2, value: "Test Test"},
    {key: constants.FLAG4, value: "Test Test Test Test"},
    {key: constants.FLAG6, value: "Test Test Test Test Test Test"},
].forEach(({key, value}) => {
    Object.defineProperty(constants.someGetters, key, {
        get: () => value,
        enumerable: true,
        configurable: true
    })
})

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