作为前端工程师，有些朋友对 Object.defineProperty 和 Proxy 有一定的认识，却不了解 JavaScript 中的存储器（setter、getter），误以为这又是一个新的语法。

其实，存储器语法早在 ES5 中就被引入，本期文章就对存储器进行讨论。

从例子出发

以姓名为例，分别存放姓、名：

如果需要获取全名，或通过全名来设置姓和名，很多朋友会借助方法实现。

上述代码中，新增了两个方法来实现全名的读写，通过调用函数的形式来使用。

而通过 ES5 引入的存取器，可以更优雅地实现。

存取器属性

使用存取器属性很简单，使用 get 和 set 关键字，后接一个同名函数。

上述代码中，定义了 fullname 的 getter 和 setter。在使用时，只需像普通属性一样使用。

那么，这个存取器属性和普通属性有什么异同呢？

数据属性和存取器属性

上文所说的普通属性，准确来说，是叫数据属性。顾名思义就是存放数据的属性。

在 ECMAScript 存在两种属性，一种是普遍使用的数据属性，一种是上文所说的存取器属性。

1. 数据属性

我们知道，除了可以使用普通的 key-value 的方式来定义对象的数据属性。

还可以使用 Object.defineProperty 进行定义。

上述代码中，定义了 obj 中的 name 属性，它具有可写、可配置、可枚举、值是 前端专栏 的特性。

2. 存取器属性

同样，存取器属性作为属性，也可以像数据属性一样直接定义，但需要 get 和 set 关键字配合。

另外，同样也可以通过 Object.defineProperty 进行配置。

3. 异同

观察数据属性和访问器属性中，使用 Object.defineProperty 定义的代码。相同的是，它们都含有 [[Configurable]] 和 [[Enumerable]] 特性。

而区别在于：

数据属性含有 [[Writable]] 和 [[Value]] 特性访问器属性含有 [[Get]] 和 [[Set]] 特性。

如下表所示，绿色代表该属性下可存在的特性，红色代表不可存在的特性。

注意，[[Writable]]、[[Value]] 和 [[Get]]、[[Set]] 之间是互斥关系。因为一个属性，它不能既属于数据属性，也属于访问器属性。如果在 Object.defineProperty 中同时定义互斥特性会抛出异常。

结语

以上就是对 JavaScript 的存取器的讨论，希望能帮助大家理解 JavaScript 中的存取器。

你的点赞和转发，是我创作的动力！