JavaScript 类里，get/set和普通方法在修改属性时有何区别，该如何选择？

在 JavaScript 类里，get/set和普通方法在修改属性方面存在一些差异，下面为你详细介绍。

语法形式差异

get/set

javascript 复制代码

class Example {
  constructor() {
    this._value = 0;
  }
  get value() {
    return this._value;
  }
  set value(newValue) {
    this._value = newValue;
  }
}

普通方法

javascript 复制代码

class Example {
  constructor() {
    this._value = 0;
  }
  getValue() {
    return this._value;
  }
  setValue(newValue) {
    this._value = newValue;
  }
}

核心区别

调用方式不同
- get/set ：能像访问普通属性那样使用，比如obj.value = 10和console.log(obj.value)。
- 普通方法 ：得像调用函数一样使用，即obj.setValue(10)和console.log(obj.getValue())。
类型表现不同
- get/set ：在进行typeof obj.value操作时，返回的是属性类型，像number。
- 普通方法 ：typeof obj.getValue返回的是function。
适用场景不同
- get/set：适合实现一些透明的副作用，例如数据验证、同步操作等。
- 普通方法：适合执行复杂的业务逻辑，像异步操作、多参数操作等。

主要优势

get/set 的优势
- 代码简洁：调用时更接近自然语法，提升了代码的可读性。
- 可维护性好：可以在不改变调用方式的前提下，增加数据验证等功能。
- 数据封装佳 ：能隐藏内部实现细节，比如_value。
普通方法的优势
- 功能强大：支持多参数和复杂的业务逻辑。
- 语义清晰 ：setValue明确表达了这是一个写操作。

选择建议

优先使用 get/set 的情况
- 当属性需要进行简单的验证或者计算时。
- 为了保持 API 的简洁性，例如在编写库时。
优先使用普通方法的情况
- 操作涉及异步处理，比如fetch请求。
- 方法需要多个参数，像setRange(min, max)。
- 操作会产生明显的副作用，比如触发事件、修改多个状态等。

实用案例

使用 get/set

javascript 复制代码

class Temperature {
  constructor(celsius) {
    this._celsius = celsius;
  }
  get fahrenheit() {
    return this._celsius * 1.8 + 32;
  }
  set fahrenheit(value) {
    this._celsius = (value - 32) / 1.8;
  }
}

使用普通方法

javascript 复制代码

class Database {
  async fetchData() {
    // 异步操作
  }
  processData(options) {
    // 复杂处理
  }
}

总结

get/set：适合简单的属性访问控制，能增强代码的可读性。
普通方法：适合复杂的业务逻辑，功能扩展性更强。
最佳实践：根据实际场景灵活选用，也可以结合使用。