JavaScript getter适用场景咨询：首次研究存取器，存疑其实用价值

嘿，这个问题问得太戳中痛点了！我刚接触 getter/setter 那会儿也嘀咕过：getter 不就是换了写法的函数吗？费这劲干嘛？但用多了才发现，它在不少场景里能让代码变得更优雅、更符合直觉。下面就聊聊我觉得最实用的几个场景：

1. 动态计算属性（实时衍生值） #

当你需要一个基于对象其他属性动态计算出来的值时，getter 简直是完美选择。它让你像访问普通属性一样获取计算结果，不用手动调用函数，可读性拉满。

比如一个矩形对象，宽高变化时面积自动更新：

const rectangle = {
  width: 10,
  height: 5,
  get area() {
    return this.width * this.height;
  }
};

console.log(rectangle.area); // 50
rectangle.width = 20;
console.log(rectangle.area); // 100

对比一下用函数的写法 rectangle.getArea()，是不是感觉 rectangle.area 更符合我们对“属性”的直觉？

2. 封装内部状态，提供只读安全访问 #

如果你想让外部只能读取对象的内部数据，不能直接修改，getter 可以帮你实现只读的封装。你可以在 getter 里返回内部数据的副本，避免外部直接篡改原数据。

比如维护一个内部的私有数组：

class UserList {
  constructor() {
    // 下划线约定为私有属性
    this._users = ['Alice', 'Bob'];
  }

  get users() {
    // 返回副本，外部修改不会影响内部数据
    return [...this._users];
  }

  addUser(name) {
    this._users.push(name);
  }
}

const list = new UserList();
console.log(list.users); // ['Alice', 'Bob']
list.users.push('Charlie'); // 修改的是副本，内部数组不受影响
console.log(list.users); // 还是 ['Alice', 'Bob']
list.addUser('Charlie');
console.log(list.users); // ['Alice', 'Bob', 'Charlie']

这种写法比写 getUsers() 函数更自然，同时保证了内部数据的安全性。

3. 懒加载（延迟计算） #

对于一些初始化成本高的属性（比如读取本地存储、复杂运算、请求数据），getter 可以帮你实现懒加载——只有当第一次访问这个属性时，才会执行计算逻辑，之后直接复用缓存的结果。

比如一个需要生成大量数据的类：

class DataProcessor {
  get largeDataset() {
    if (!this._cachedData) {
      console.log('正在生成大数据集...');
      // 模拟耗时操作
      this._cachedData = new Array(1000000).fill('processed-data');
    }
    return this._cachedData;
  }
}

const processor = new DataProcessor();
// 第一次访问才会触发计算
console.log(processor.largeDataset.length); // 输出"正在生成大数据集..."，然后1000000
// 第二次直接用缓存，不会重复计算
console.log(processor.largeDataset.length); // 直接输出1000000

这种场景下，getter 帮你省去了手动管理初始化时机的麻烦，不用纠结“什么时候调用初始化函数”，用的时候自动加载。

4. 兼容旧代码，平滑过渡重构 #

当你重构代码时，如果需要修改属性的实现，但又不想改动所有调用该属性的旧代码，getter 可以帮你做无缝兼容。

比如之前的代码用 user.fullName 存储全名，现在要改成用 firstName 和 lastName 拼接：

const user = {
  firstName: 'John',
  lastName: 'Doe',
  // 新增getter兼容旧代码
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

// 旧代码不用改，依然可以正常使用
console.log(user.fullName); // John Doe

这样旧业务代码完全不需要调整，就能平滑过渡到新的实现方式。

5. 响应式框架中的依赖收集 #

在 Vue、React 这类响应式框架中，getter 是实现依赖追踪的核心机制之一。当你在模板或组件中访问一个响应式属性时，框架会通过 getter 自动收集这个依赖，当属性变化时，自动更新对应的视图。

虽然这是框架层面的用法，但本质上是利用了 getter 能拦截属性访问的特性，让框架知道哪些视图依赖了哪些数据，从而实现自动更新。

最后总结一下 #

getter 不是“花架子”，它的核心价值是让“需要逻辑处理的值”看起来像普通属性一样直观。它既保留了函数的灵活性（可以做计算、封装、懒加载），又拥有属性的易用性，减少了代码的“心智负担”。

当然，如果你的逻辑需要接收参数，或者是一次性的复杂操作，那还是用普通函数更合适。getter 最适合那些不需要参数、逻辑相对固定、访问方式像属性的场景。

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