JavaScript里getter/setter的实现方式

在JavaScript中，getter和setter是一种特殊的方法，用于获取和设置对象的属性值。它们提供了一种更灵活和可控的方式来访问和修改对象的属性，同时也可以在获取或设置属性时执行额外的逻辑。

1. 使用对象字面量定义getter和setter

在对象字面量中，可以使用get和set关键字来定义getter和setter方法。例如：

const person = {
  _name: 'John',
  get name() {
    return this._name;
  },
  set name(newName) {
    this._name = newName;
  }
};
console.log(person.name); // 输出: John
person.name = 'Jane';
console.log(person.name); // 输出: Jane

在上述代码中，name属性的getter方法返回了_name属性的值，而setter方法则用于设置_name属性的值。

2. 使用Object.defineProperty()方法定义getter和setter

Object.defineProperty()方法可以用于在对象上定义新属性或修改现有属性，并可以指定属性的特性，包括getter和setter方法。例如：

const obj = {};
let _value = 0;
Object.defineProperty(obj, 'value', {
  get: function() {
    return _value;
  },
  set: function(newValue) {
    _value = newValue;
  }
});
console.log(obj.value); // 输出: 0
obj.value = 10;
console.log(obj.value); // 输出: 10

在这个例子中，通过Object.defineProperty()方法为obj对象定义了一个名为value的属性，并指定了getter和setter方法。

3. 在类中使用getter和setter

在ES6类中，也可以使用get和set关键字来定义getter和setter方法。例如：

class Rectangle {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }
  get area() {
    return this._width * this._height;
  }
  set width(newWidth) {
    this._width = newWidth;
  }
}
const rect = new Rectangle(5, 3);
console.log(rect.area); // 输出: 15
rect.width = 7;
console.log(rect.area); // 输出: 21

通过getter和setter，我们可以在获取或设置属性时添加额外的逻辑，例如数据验证、计算属性值等，从而提高代码的灵活性和可维护性。