引言
在之前的 JavaScript 版本中，我们可以通过 Object.defineProperty() 方法来定义对象属性的 getter 和 setter，以实现对属性的读写控制。但是，这种方式存在一些问题，比如 getter 和 setter 必须成对出现，不能对计算属性进行操作等。为了解决这些问题，ES11 新增了可调用的属性访问器，允许我们更灵活地读写对象属性。
可调用的属性访问器
可调用的属性访问器是一种新的属性定义方式，它允许我们将 getter 和 setter 定义为同一个函数，同时还支持计算属性的操作。下面是一个简单的示例：
// javascriptcn.com 代码示例
const obj = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
[this.firstName, this.lastName] = name.split(' ');
}
};
console.log(obj.fullName); // John Doe
obj.fullName = 'Jane Smith';
console.log(obj.fullName); // Jane Smith
console.log(obj.firstName); // Jane
console.log(obj.lastName); // Smith在上面的示例中，我们定义了一个对象 obj，其中 fullName 属性既是 getter 又是 setter。当我们访问 fullName 属性时，会调用 getter 函数返回 firstName 和 lastName 的组合字符串；当我们设置 fullName 属性时，会调用 setter 函数将字符串拆分为 firstName 和 lastName 并分别赋值。
计算属性
除了 getter 和 setter，可调用的属性访问器还支持计算属性的操作。计算属性是一种动态属性，它的值是在运行时计算得出的。下面是一个计算属性的示例：
// javascriptcn.com 代码示例
const obj = {
get ['fullName']() {
return `${this.firstName} ${this.lastName}`;
},
set ['fullName'](name) {
[this.firstName, this.lastName] = name.split(' ');
}
};
console.log(obj.fullName); // undefined
obj.firstName = 'John';
obj.lastName = 'Doe';
console.log(obj.fullName); // John Doe
obj.fullName = 'Jane Smith';
console.log(obj.fullName); // Jane Smith
console.log(obj.firstName); // Jane
console.log(obj.lastName); // Smith在上面的示例中，我们使用了计算属性来定义 fullName 属性。getter 函数返回 firstName 和 lastName 的组合字符串，setter 函数将字符串拆分为 firstName 和 lastName 并分别赋值。注意，我们不能直接访问 obj.fullName 属性，因为它是一个计算属性，而不是一个静态属性。
总结
可调用的属性访问器是 ES11 新增的一个重要特性，它允许我们更灵活地读写对象属性。与之前的 Object.defineProperty() 方法相比，可调用的属性访问器具有更高的灵活性和可读性，尤其是在处理计算属性时更加方便。希望本文对你了解可调用的属性访问器有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d09d695b1f8cacd6ca0b5