JavaScript中ES6怎么在Class中配置Getter与Setter来实现属性访问监听-js教程-PHP中文网

es6 class 中可用 getter/setter 拦截属性读写，需配合私有字段（如 #value）或下划线命名内部属性（如 _value）；get 读取时触发并返回值，set 赋值时校验、转换或执行副作用，二者同名构成可读写计算属性。

javascript中es6怎么在class中配置getter与setter来实现属性访问监听

ES6 的 Class 中可以通过 getter 和 setter 为实例属性添加访问拦截逻辑，实现对属性读取和赋值的监听与控制，而无需暴露原始数据字段。

定义 getter 和 setter 方法

在 Class 内部用 get 和 set 关键字声明同名方法，它们会自动绑定到一个“虚拟属性”上。注意：不能同时用 let/const 声明同名字段，否则会报错；通常配合私有字段（如 #value）或下划线命名的内部属性（如 _value）来存储真实数据。

getter 在读取属性时触发，必须有 return 值
setter 在赋值时触发，参数名任意（常用 val 或 value），内部可做校验、转换或副作用操作
二者名称一致，共同构成一个可读写的“计算属性”

基础写法示例（使用下划线约定）

下面是一个带类型检查和日志输出的简单例子：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }

  get name() {
    console.log('读取 name');
    return this._name;
  }

  set name(value) {
    if (typeof value !== 'string' || value.trim() === '') {
      throw new Error('name 必须是非空字符串');
    }
    console.log(`name 被设为: ${value}`);
    this._name = value.trim();
  }

  get age() {
    return this._age;
  }

  set age(value) {
    if (value  150 || !Number.isInteger(value)) {
      throw new Error('age 必须是 0–150 之间的整数');
    }
    this._age = value;
  }
}

const p = new Person('Alice', 25);
console.log(p.name); // 输出：读取 name → "Alice"
p.name = ' Bob ';     // 输出：name 被设为: Bob
p.age = 30;          // 正常赋值

配合私有字段（#）更安全

ES2022+ 支持真正的私有字段（#field），推荐用于避免外部直接访问内部状态：

class Counter {
  #count = 0;

  get count() {
    return this.#count;
  }

  set count(value) {
    if (value 
<p>此时 <code>this.#count</code> 只能在类内部访问，外部无法绕过 getter/setter 直接修改，真正实现了封装与监听统一。</p>

<h3>注意事项与常见陷阱</h3>
<p>使用 getter/setter 时需留意几个关键点：</p>