JavaScript/TypeScript定义对象时如何引用自身其他属性的值

对象字面量初始化阶段，尚未完成实例创建，直接在属性赋值表达式中写firstName会查找当前作用域下的同名变量，不会指向对象自身的属性；此时this指向的是外层作用域的上下文，也不会指向正在创建的对象实例，因此无法直接通过你尝试的方式赋值。

以下是几种常用的解决方案：

方案1：提前声明公共变量 #

适合属性值固定、不需要动态更新的场景，写法最简单：

const firstName = 'Régis'
const middleName = 'Faria'
const person = {
  firstName,
  middleName,
  fullName: `${firstName} ${middleName}`
}

方案2：使用getter访问器 #

最常用的方案，支持属性动态更新：修改firstName或middleName后，fullName会自动同步最新值，不需要手动重新赋值：

const person = {
  firstName: 'Régis',
  middleName: 'Faria',
  get fullName() {
    return `${this.firstName} ${this.middleName}`
  }
}

// 调用方式：直接读取属性即可，不需要加括号
console.log(person.fullName) // 输出 Régis Faria

该写法在TS中也完全兼容，TS可以自动推断fullName的类型为string。

方案3：先初始化基础属性再赋值衍生属性 #

如果不想单独声明外部变量，也可以分两步完成对象创建：

const person = {
  firstName: 'Régis',
  middleName: 'Faria'
}
person.fullName = `${person.firstName} ${person.middleName}`

方案4：使用类实现（适合批量创建同结构对象） #

如果需要创建多个相同结构的person实例，用类封装更易维护：

// TS示例
class Person {
  firstName: string
  middleName: string
  constructor(firstName: string, middleName: string) {
    this.firstName = firstName
    this.middleName = middleName
  }

  get fullName() {
    return `${this.firstName} ${this.middleName}`
  }
}

const person = new Person('Régis', 'Faria')

内容的提问来源于stack exchange，提问作者Régis Faria