前言
在前端开发中，数据处理是一个非常基础且重要的内容。为了更好地管理和控制数据，我们需要使用一些封装数据类型的技术。而其中的 getter 和 setter 就是一种非常好用的技术。
本篇文章将介绍 JavaScript 中的 getter 和 setter 的使用方法，并通过自定义数据类型的例子来演示其封装能力。
关于 getter 和 setter
Getter 和 setter 是 ECMAScript 5 引入的特性。它们分别用于读取和设置对象的属性。
getter
Getter 允许你获取对象的一个属性值。通常，我们使用点运算符来获取对象的属性值，如下所示：
const obj = {
name: '张三'
}
console.log(obj.name) // 张三在上面的代码中，我们通过 obj.name 的方式获取了对象的属性值。这种方式虽然简单方便，但是有一定的限制，比如你不能像操作变量一样对属性值进行操作。
而使用 getter，我们可以以函数的形式来获取属性值并进行更多的操作。例如：
-- -------------------- ---- -------
----- --- - -
---------- ----
--------- ----
--- ---------- -
------ ------------------ -----------------
-
-
------------------------- -- - -在上面的代码中，我们定义了一个 getter，它通过 get fullName() 的方式来获取对象的 fullName 属性值。获取到的值由 this.firstName 和 this.lastName 两个属性值组成，并通过字符串模板的方式来返回。
setter
Setter 允许你设置对象的一个属性的值。通常，我们使用点运算符和等号来给对象的属性赋值，如下所示：
const obj = {
name: '张三'
}
obj.name = '李四'
console.log(obj.name) // 李四在上面的代码中，我们通过 obj.name = '李四' 的方式来给对象的 name 属性赋值。
而使用 setter，我们可以在属性值被修改时执行一些额外的逻辑。例如：
-- -------------------- ---- -------
----- --- - -
---------- ---
--------- ---
--- --------------- -
----- ----------- --------- - ------------- --
-------------- - ---------
------------- - --------
-
-
------------ - ----
-------------------------- -- -
------------------------- -- -在上面的代码中，我们定义了一个 setter，它通过 set fullName(value) 的方式来设置对象的 fullName 属性值。在这个 setter 中，我们先将属性值按照空格分割为 firstName 和 lastName 两部分，然后将这两个值分别赋值给 this.firstName 和 this.lastName。
一个自定义数据类型的示例
接下来，我们将通过一个自定义数据类型的示例来演示 getter 和 setter 的封装能力。假设我们的系统中有一个 User 类型，其中需要包含一个 email 属性，我们希望对这个属性进行更好的封装和控制。
首先，我们可以这样定义 User 类型：
class User {
constructor(firstName, lastName, email) {
this.firstName = firstName
this.lastName = lastName
this.email = email
}
}在上面的代码中，我们定义了一个 User 类型，并通过构造函数来初始化它的 firstName、lastName 和 email 属性。
如果我们希望在设置 email 属性时进行一些额外的逻辑操作，比如校验 email 格式等，我们可以使用 setter 来实现：
-- -------------------- ---- -------
----- ---- -
---------------------- --------- ------ -
-------------- - ---------
------------- - --------
----------- - ----- -- ----
-
--- ------- -
------ -----------
-
--- ------------ -
-- ---------------------- -
----- --- -------------------
-
----------- - -----
-
-在上面的代码中，我们将 email 属性修改为 _email，使其成为一个私有属性。然后，我们重新定义了 email 属性的 getter 和 setter。在 setter 中，我们添加了一个校验 email 格式的逻辑，如果不符合要求，就抛出一个错误。
现在，我们就可以使用 User 类型来创建一个新的用户，并设置它的 email 属性了：
const user = new User('张', '三', 'zhangsan@mail.com')
console.log(user.email) // zhangsan@mail.com
user.email = 'zhangsan.com'
// 抛出错误：Email格式不正确在上面的代码中，我们创建了一个名为 user 的 User 实例，并设置了它的 email 属性。由于 email 的格式符合要求，所以我们可以顺利地获取到它的值。
接着，我们尝试修改 email 的值并将其设置为一个不符合格式要求的字符串，此时 setter 会抛出一个错误。
总结
到这里，我们已经基本了解了 getter 和 setter 的使用方法，以及它们如何被用于封装自定义数据类型。
使用 getter 和 setter，不仅可以让我们更好地控制和管理属性值，还可以提高代码的可读性和可维护性。在实际的开发中，我们可以根据自己的具体需求来使用它们，从而更好地优化代码。
示例代码：https://codepen.io/kyy0821/pen/BaQoWZr
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9612af6b2d6eab34acc96