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

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

语法形式差异

1. get/set

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

2. 普通方法

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

核心区别

1. 调用方式不同

   • get/set：能像访问普通属性那样使用，比如obj.value = 10和console.log(obj.value)。
   • 普通方法：得像调用函数一样使用，即obj.setValue(10)和console.log(obj.getValue())。

2. 类型表现不同

   • get/set：在进行typeof obj.value操作时，返回的是属性类型，像number。
   • 普通方法：typeof obj.getValue返回的是function。

3. 适用场景不同

   • get/set：适合实现一些透明的副作用，例如数据验证、同步操作等。
   • 普通方法：适合执行复杂的业务逻辑，像异步操作、多参数操作等。

主要优势

1. get/set 的优势

   • 代码简洁：调用时更接近自然语法，提升了代码的可读性。
   • 可维护性好：可以在不改变调用方式的前提下，增加数据验证等功能。
   • 数据封装佳：能隐藏内部实现细节，比如_value。

2. 普通方法的优势

   • 功能强大：支持多参数和复杂的业务逻辑。
   • 语义清晰：setValue明确表达了这是一个写操作。

选择建议

1. 优先使用 get/set 的情况

   • 当属性需要进行简单的验证或者计算时。
   • 为了保持 API 的简洁性，例如在编写库时。

2. 优先使用普通方法的情况

   • 操作涉及异步处理，比如fetch请求。
   • 方法需要多个参数，像setRange(min, max)。
   • 操作会产生明显的副作用，比如触发事件、修改多个状态等。

实用案例

1. 使用 get/set

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

2. 使用普通方法

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

总结

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