Javascript自动getter/setters(John Resig Book)

在这个问答内容中，我们将讨论 JavaScript 中的自动 getter/setters，这是一个非常有用的特性，它允许我们在对象中自动生成 getter 和 setter 方法。这个特性在 John Resig 的书中有详细的讨论。

首先，我们来了解一下 getter 和 setter 方法的基本概念。

• Getter：它是一个用于读取对象属性值的方法。当我们尝试读取一个对象的属性时，getter 方法会被自动调用，并返回属性的值。
• Setter：它是一个用于设置对象属性值的方法。当我们尝试设置一个对象的属性时，setter 方法会被自动调用，并设置属性的值。

现在，我们将讨论如何使用 JavaScript 中的自动 getter/setters。

在 JavaScript 中，我们可以使用 Object.defineProperty() 方法来定义对象的属性，并自动生成 getter 和 setter 方法。这个方法接受三个参数：

1. 对象：要定义属性的对象。
2. 属性名：要定义的属性名。
3. 属性描述符：一个包含属性的配置信息的对象。

属性描述符对象可以包含以下属性：

• value：属性的初始值。
• writable：一个布尔值，表示属性是否可写。如果为 true，则属性可以被修改；如果为 false，则属性只读。
• enumerable：一个布尔值，表示属性是否可枚举。如果为 true，则属性可以在对象的属性迭代中出现；如果为 false，则属性不会出现。
• configurable：一个布尔值，表示属性是否可配置。如果为 true，则属性可以被删除或重新定义；如果为 false，则属性不可配置。
• get：一个函数，用于获取属性值。当我们尝试读取属性时，这个函数会被自动调用。
• set：一个函数，用于设置属性值。当我们尝试设置属性时，这个函数会被自动调用。

下面是一个使用自动 getter/setters 的示例：

const person = {};

Object.defineProperty(person, 'fullName', {
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  set(value) {
    const [firstName, lastName] = value.split(' ');
    this.firstName = firstName;
    this.lastName = lastName;
  },
  enumerable: true,
  configurable: true
});

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

在这个示例中，我们定义了一个 person 对象，并使用 Object.defineProperty() 方法定义了一个 fullName 属性。我们提供了一个 getter 函数和一个 setter 函数，用于获取和设置全名。当我们尝试读取或设置 fullName 属性时，getter 和 setter 函数会被自动调用。

总之，自动 getter/setters 是一个非常有用的 JavaScript 特性，它允许我们在对象中自动生成 getter 和 setter 方法，以便更好地控制对象的属性。