ES9 中的数据属性：了解并使用 getters 和 setters

在 JavaScript 中，对象属性可以被定义为数据属性或访问器属性。数据属性是一个包含一个值的属性，而访问器属性则是一对 getter 和 setter 函数，它们分别在获取和设置属性时被调用。在 ES9 中，我们可以使用 getters 和 setters 更好地控制对象属性的访问和修改。

getters 和 setters 的语法

ES9 中定义 getter 和 setter 的语法如下：

const obj = {
  get propName() {
    // getter 函数体
  },
  set propName(value) {
    // setter 函数体
  }
};

其中，propName 是属性名，get propName() 是访问器属性的 getter，set propName(value) 是访问器属性的 setter。Getter 函数不接受任何参数，返回属性值；Setter 函数接受一个参数，即要设置的属性值。

getters 和 setters 的使用

使用 getters 和 setters 可以让我们更好地控制对象属性的访问和修改。例如，我们可以使用 getters 和 setters 来限制属性的值范围，或者在属性被访问或修改时触发一些操作。

下面是一个使用 getters 和 setters 的示例代码：

// javascriptcn.com 代码示例
const person = {
  firstName: '',
  lastName: '',
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(value) {
    const parts = value.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

person.fullName = 'John Doe';

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

在上面的代码中，我们定义了一个 person 对象，其中包含 firstName 和 lastName 两个数据属性，以及一个访问器属性 fullName。fullName 的 getter 返回 firstName 和 lastName 的组合，setter 根据传入的值设置 firstName 和 lastName。

我们可以通过设置 person.fullName 的值来修改 firstName 和 lastName，并通过访问 person.fullName 来获取完整的名字。

总结

在 ES9 中，我们可以使用 getters 和 setters 更好地控制对象属性的访问和修改。Getter 函数用于获取属性值，Setter 函数用于设置属性值。使用 getters 和 setters 可以让我们更好地限制属性的值范围，或者在属性被访问或修改时触发一些操作。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65694c76d2f5e1655d1d515c