JavaScript 属性的 Getter 和 Setter

在 JavaScript 中，Getter 和 Setter 是特殊的属性访问器方法，允许你自定义对象属性的读取和赋值行为。

基本概念

Getter 和 Setter 提供了一种方法来拦截对对象属性的访问和修改：

• Getter：当读取属性时调用的函数
• Setter：当设置属性时调用的函数

定义方式

1. 对象字面量语法

const obj = {
  _value: 0,  // 约定俗成用下划线前缀表示"私有"属性
  
  get value() {
    console.log('获取值');
    return this._value;
  },
  
  set value(newValue) {
    console.log('设置值');
    if (newValue > 100) {
      throw new Error('值不能大于100');
    }
    this._value = newValue;
  }
};

console.log(obj.value); // 调用getter
obj.value = 50;        // 调用setter

2. 使用 Object.defineProperty

const obj = { _value: 0 };

Object.defineProperty(obj, 'value', {
  get: function() {
    return this._value;
  },
  set: function(newValue) {
    this._value = newValue;
  },
  enumerable: true,
  configurable: true
});

3. 类中的 Getter 和 Setter (ES6+)

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

使用场景

1. 数据验证：在设置值前进行检查

   set age(value) {
     if (value < 0) throw new Error('年龄不能为负数');
     this._age = value;
   }
   

2. 计算属性：基于其他属性动态计算值

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

3. 访问控制：限制某些属性的访问

   get secret() {
     if (!this.isAdmin) return '无权访问';
     return this._secret;
   }
   

4. 日志记录：跟踪属性访问

   set value(v) {
     console.log(`值从 ${this._value} 改为 ${v}`);
     this._value = v;
   }
   

注意事项

1. Getter 和 Setter 不是真正的数据属性，它们是访问器属性。
2. 如果只定义了 getter 而没有 setter，尝试设置该属性在严格模式下会报错。
3. Getter 不应该有副作用（如修改其他属性），这会导致难以追踪的行为。
4. 在性能敏感的场景中，Getter/Setter 可能比直接属性访问慢。

高级用法

使用 Proxy 实现更灵活的访问控制

const handler = {
  get(target, prop) {
    return prop in target ? target[prop] : '默认值';
  },
  set(target, prop, value) {
    if (prop === 'age' && typeof value !== 'number') {
      throw new Error('年龄必须是数字');
    }
    target[prop] = value;
    return true;
  }
};

const proxy = new Proxy({}, handler);
proxy.age = 30;
console.log(proxy.age); // 30
console.log(proxy.unknown); // '默认值'

Getter 和 Setter 是 JavaScript 中强大的特性，合理使用可以使代码更加健壮和易于维护。