JavaScript ES6 类中怎么使用 getter 动态计算衍生属性值-js教程-PHP中文网

es6类中getter用于定义只读、动态计算属性，如fullname、isadult；可访问this及实例方法，但不可赋值自身；配合setter可实现双向逻辑；默认不参与枚举和序列化。

javascript es6 类中怎么使用 getter 动态计算衍生属性值

在 ES6 类中，getter 是定义只读、动态计算属性的最自然方式——它不存储值，而是在每次访问时实时执行逻辑并返回结果。

用 getter 定义依赖其他属性的衍生值

当某个属性的值由类中已有字段（如 firstName 和 lastName）组合或转换而来时，适合用 getter 封装计算逻辑。它看起来像普通属性，但背后是函数调用：

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  // 动态拼接全名，无需手动更新
  get fullName() {
    return `${this.firstName} ${this.lastName}`.trim();
  }

  // 基于年龄动态判断是否成年
  get isAdult() {
    return this.age >= 18;
  }
}

const p = new Person('Li', 'Wei');
console.log(p.fullName); // "Li Wei"
p.firstName = 'Lee';
console.log(p.fullName); // "Lee Wei" —— 自动响应变化

getter 中可安全使用 this 并访问实例状态

getter 内部的 this 指向当前实例，可以读取其他实例属性、调用方法，甚至触发副作用（但应避免）。注意：不能在 getter 中直接修改自身属性（否则会引发无限递归），如 this.fullName = ... 会报错。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

✅ 可读取 this.name、this.items 等已存在的属性
✅ 可调用 this.calculateTotal() 等辅助方法
❌ 避免在 getter 内赋值给同名属性（this.fullName = ...）
⚠️ 不建议在 getter 中发起网络请求或大量计算（影响性能且不易调试）

结合 setter 实现受控的双向逻辑（可选进阶）

如果需要“读写”衍生属性（比如通过 fullName 设置来拆分姓名），可配对定义 setter。此时 getter 和 setter 共享同一属性名，形成封装良好的接口：

class Person {
  constructor(firstName = '', lastName = '') {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`.trim();
  }

  set fullName(value) {
    const parts = value.trim().split(/\s+/);
    this.firstName = parts[0] || '';
    this.lastName = parts.slice(1).join(' ') || '';
  }
}

const p = new Person();
p.fullName = 'Zhang San Feng';
console.log(p.firstName); // "Zhang"
console.log(p.lastName);  // "San Feng"