JavaScript-对象属性的getter和setter

在 JavaScript 中，对象的属性可以具有 getter 和 setter 方法，这允许你在读取或写入属性时执行自定义的逻辑。Getter 用于获取属性的值，而 setter 用于设置属性的值。这使得我们可以在属性访问时添加一些逻辑，例如数据验证、计算属性等。

1. Getter 方法

Getter 方法是一个用于获取属性值的函数。你可以通过在对象字面量或使用 Object.defineProperty 方法来定义 getter 方法。

示例：

let person = {
  firstName: "John",
  lastName: "Doe",
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(person.fullName);  // 输出 "John Doe"

在上述示例中，fullName 属性具有一个 getter 方法，它返回 firstName 和 lastName 的组合。

2. Setter 方法

Setter 方法是一个用于设置属性值的函数。与 getter 一样，你可以通过对象字面量或使用 Object.defineProperty 方法来定义 setter 方法。

示例：

let person = {
  _firstName: "John",
  _lastName: "Doe",
  get fullName() {
    return `${this._firstName} ${this._lastName}`;
  },
  set fullName(value) {
    let names = value.split(" ");
    this._firstName = names[0];
    this._lastName = names[1];
  }
};

console.log(person.fullName);  // 输出 "John Doe"

person.fullName = "Alice Smith";
console.log(person.fullName);  // 输出 "Alice Smith"

在这个示例中，fullName 属性具有一个 getter 方法和一个 setter 方法。当设置 fullName 时，setter 方法会解析传入的值，并分别设置 firstName 和 lastName。

3. 使用 Object.defineProperty 定义 Getter 和 Setter

你还可以使用 Object.defineProperty 方法显式地定义 getter 和 setter。

示例：

let person = {
  _firstName: "John",
  _lastName: "Doe"
};

Object.defineProperty(person, "fullName", {
  get: function() {
    return `${this._firstName} ${this._lastName}`;
  },
  set: function(value) {
    let names = value.split(" ");
    this._firstName = names[0];
    this._lastName = names[1];
  },
  enumerable: true,
  configurable: true
});

console.log(person.fullName);  // 输出 "John Doe"

person.fullName = "Alice Smith";
console.log(person.fullName);  // 输出 "Alice Smith"

在这个示例中，使用 Object.defineProperty 显式地定义了 fullName 属性的 getter 和 setter 方法。

注意事项：

• 使用 getter 和 setter 时，通常需要在属性名称前加下划线 _ 或其他前缀，以避免与 getter 或 setter 方法的名称冲突。

• Getter 和 setter 方法的名称通常与属性名称相同，以提高代码的可读性。

• 使用 getter 和 setter 时，可以在 getter 方法中实现一些逻辑，例如格式化数据，而在 setter 方法中执行数据验证。