如何将JavaScript类属性作为该类另一属性中对象的键使用

核心知识点 #

你遗漏的是ES6新增的计算属性名语法规则：

• 普通对象字面量中未用特殊符号包裹的键，会被默认转为字符串字面量作为最终键名，不会读取对应变量的取值
• 如果要将表达式的计算结果作为对象键，需要给键套上方括号[]

同时类的静态属性初始化顺序是从上到下执行的，初始化names属性时，前面声明的静态枚举值已经完成赋值，且静态属性初始化上下文的this指向当前类本身，无需直接写类名引用。

正确实现代码 #

class CareerLevels {
    static manager    = 'manager';
    static consultant = 'consultant';
    static associate  = 'associate';
    // 用方括号包裹变量实现计算属性名
    static names = {
        [this.manager]    : 'Manager',
        [this.consultant] : 'Consultant',
        [this.associate]  : 'Associate Consultant',
    }
}

可选优化：枚举不可变处理 #

如果要避免枚举值和显示名被意外修改，可以用Object.freeze冻结对应对象，符合常量枚举的使用习惯：

class CareerLevels {
    static manager    = 'manager';
    static consultant = 'consultant';
    static associate  = 'associate';
    // 冻结显示名映射对象
    static names = Object.freeze({
        [this.manager]    : 'Manager',
        [this.consultant] : 'Consultant',
        [this.associate]  : 'Associate Consultant',
    })
}
// 冻结类的所有静态属性，禁止新增、修改、删除
Object.freeze(CareerLevels)

调用示例 #

// 取值方式
console.log(CareerLevels.names[CareerLevels.manager]) // 输出：Manager

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