JS为什么要使用getter和setter

在JavaScript中，许多属性并不是简单的值。相反，它们对应到getter和setter方法上。这是因为getter和setter允许你更好地控制访问对象的属性。

什么是getter和setter?

当属性被访问时，getter函数被调用。当一个值被赋给属性时，setter函数被调用。这与普通的属性行为不同，它不依赖于变量的值，而是根据在访问或赋值时执行的代码。

以下是一个例子：

let obj = {
  firstName: 'John',
  lastName: 'Doe',
  
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  },
  
  set fullName(value) {
    let parts = value.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

console.log(obj.fullName); // John Doe

obj.fullName = 'Jane Doe';
console.log(obj.fullName); // Jane Doe

在这个例子中，我们定义了一个fullName属性，当访问obj.fullName时，getter函数会被调用，返回firstName和lastName的组合。当对obj.fullName进行赋值时，setter函数会被调用，用新的firstName和lastName值替换旧的值。

这个例子只是getter和setter的冰山一角。getter和setter的真正优点在于他们允许你更好地控制访问对象的属性。

getter和setter的优点

1. 隐藏实现 getter和setter方法的一个主要优点是，它可以隐藏实现细节。它允许你通过getter控制你允许外部代码访问的属性，然后使用setter方法在设置属性时执行任意的代码。例如，你可能希望在属性被设置之前先对其进行验证。

class Person {
  constructor(name) {
    this._name = name;
  }
  
  get name() {
    return this._name.charAt(0).toUpperCase() + this._name.slice(1);
  }
  
  set name(value) {
    let name = value.toLowerCase();
    this._name = name.charAt(0).toUpperCase() + name.slice(1);
  }
}

let person = new Person('jane doe');
console.log(person.name); // Jane Doe

person.name = 'john doe';
console.log(person.name); // John Doe

2. 计算属性 getter和setter方法使我们可以动态地计算属性的值。当你想以不同的方式呈现计算属性时，这非常有用。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get area() {
    return this.height * this.width;
  }
}

let rectangle = new Rectangle(5, 10);
console.log(rectangle.area); // 50

3. 异步操作 getter和setter允许你将对象的某个属性包装在异步回调中。这非常有用，当属性值需要从远程服务或数据库中检索时。

class Person {
  constructor(id) {
    this._id = id;
    this._data = null;
  }
  
  async get data() {
    if (!this._data) {
      let response = await fetch('/api/person/' + this._id);
      this._data = await response.json();
    }
    
    return this._data;
  }
}

let person = new Person(123);
person.data.then(data => console.log(data));

总结

getter和setter方法是JavaScript中灵活的工具，可以更好地控制对象的属性。使用它们可以隐藏实现细节，计算属性，以及可以将属性包装在异步回调中。他们将更大的灵活性带入了你的程序中。