对象访问器属性在 JavaScript 中是用来获取或设置对象值的方法，它们使用 get 和 set 关键字定义。访问器属性是一种强有力的方式来控制对象是如何被访问和修改的。
JavaScript 对象可以有两种类型的属性：
以下是所谓的数据属性的一个例子：
const obj = {
key: "value",
}
JavaScript 对象访问器属性
在 JavaScript 中，您可以使用 getter 获取对象属性，并使用 setter 设置对象属性。
定义访问器属性有两个关键字：
-
get — get 关键字用于定义一个获取对象属性值的方法。
-
set — set 关键字用于定义一个更新对象属性值的方法。
JavaScript Getter
Getter 用于访问对象属性。要定义一个 getter 方法，我们使用 get 关键字后跟方法名。遵循下面的语法定义 getter：
get methodName() {
}
obj.methodName;
在上面的语法中，我们使用 get 关键字后跟方法名定义了 getter。
您可以使用方法名作为对象属性来获取其返回值。
执行 getter 时不需要在方法名后面加上一对圆括号。您可以像访问对象属性一样访问它。
示例
在下面的例子中，在 wall 对象中定义了 getColor() getter。getColor() 返回 color 属性的值。
之后，我们使用 getColor() 方法来访问对象的 color 属性值。
<html>
<body>
<p id="output">墙的颜色是 : </p>
<script>
const wall = {
color: "棕色",
get getColor() {
return this.color;
}
}
document.getElementById("output").innerHTML += wall.getColor;
</script>
</body>
</html>
输出：
墙的颜色是 : 棕色
JavaScript Setter
Setter 用于更新 JavaScript 对象属性。要定义一个 setter 方法，我们使用 set 关键字后跟方法名。遵循下面的语法在 JavaScript 对象中定义 setter：
set methodName(param) {
return this.color = color;
}
wall.methodName = "红色";
在上面的语法中，使用 set 关键字定义了 setter 方法。
方法名可以是任何有效的标识符。
setter 方法总是接受单个参数。如果您不传递参数或多于一个参数，它会报错。
您可以像给属性赋值那样给 setter 方法赋值。
示例
在下面的例子中，我们定义了一个 setter 方法来设置 wall 对象的 color 属性值。我们使用 setColor setter 方法将 红色 值设置为对象的 color 属性。
<html>
<body>
<p id="output"> </p>
<script>
const wall = {
color: "棕色",
set setColor(color) {
return this.color = color;
}
}
document.getElementById("output").innerHTML +=
"更新前墙的颜色是 : " + wall.color + "<br>";
wall.setColor = "红色";
document.getElementById("output").innerHTML +=
"更新后墙的颜色是 : " + wall.color;
</script>
</body>
</html>
输出：
更新前墙的颜色是 : 棕色
更新后墙的颜色是 : 红色
JavaScript 对象方法 vs Getter/Setters
在 JavaScript 中，使用 getter 和 setter 可以做的事情，同样可以通过定义特定的对象方法来完成。区别在于 getter 和 setter 提供了更简单的语法。
让我们通过一些例子来理解这一点。
示例
在下面的例子中，我们在 wall 对象中定义了 getColor() getter 方法和 colorMethod() 对象方法。两个方法都返回颜色值。
您可以看到定义和访问 getter 比定义和访问对象方法更为简单明了。
<html>
<body>
<p id="output"> </p>
<script>
const wall = {
color: "棕色",
get getColor() {
return this.color;
},
colorMethod: function () {
return this.color;
}
}
document.getElementById("output").innerHTML +=
"使用 getter 获取颜色 : " + wall.getColor + "<br>";
document.getElementById("output").innerHTML +=
"使用对象方法获取颜色 : " + wall.colorMethod();
</script>
</body>
</html>
输出：
使用 getter 获取颜色 : 棕色
使用对象方法获取颜色 : 棕色
数据质量和安全性
Getter 和 setter 方法可以提供更好的数据质量。同时，它们用于封装以保护对象数据的安全性。
让我们通过下面的例子来理解 getter 和 setter 如何提高数据质量和提供安全性。
示例
在下面的例子中，getColor() 是一个 getter 方法，它返回 color 属性值转换为大写后的结果。同时，它隐藏了 color 属性，因为用户只能通过 getColor() 方法来访问其值。
<html>
<body>
<p id="output"> </p>
<script>
const wall = {
color: "棕色",
get getColor() {
return this.color.toUpperCase();
}
}
document.getElementById("output").innerHTML +=
"使用 getter 获取颜色 : " + wall.getColor;
</script>
</body>
</html>
输出：
使用 getter 获取颜色 : BROWN
使用 Object.defineProperty() 定义 getter/setter
您也可以使用 Object.defineProperty() 方法将 getter 或 setter 添加到对象中。
Object.defineProperty(object, "methodName", {
keyword: function () {
},
})
使用上面的语法，您可以定义与 methodName 相同的 getter 或 setter。
-
object — 这是要添加 getter 或 setter 的对象。
-
methodName — 这是 getter 或 setter 的方法名。
-
keyword — 根据您想要定义 getter 或 setter 可以为 get 或 set。
示例
在下面的例子中，我们使用 Object.defineProperty() 方法向对象添加了 getSize 和 setSize getter 和 setter。
之后，我们分别使用 getSize 和 setSize 获取和设置大小。
<html>
<body>
<p id="demo"> </p>
<script>
const output = document.getElementById("demo");
const door = {
size: 20,
}
Object.defineProperty(door, "getSize", {
get: function () {
return this.size;
}
});
Object.defineProperty(door, "setSize", {
set: function (value) {
this.size = value;
},
})
output.innerHTML += "门的尺寸是 : " + door.getSize + "<br>";
door.setSize = 30;
output.innerHTML += "更新后门的尺寸是 : " + door.getSize;
</script>
</body>
</html>
输出：
门的尺寸是 : 20
更新后门的尺寸是 : 30
使用 getter 和 setter 的原因
以下是使用 JavaScript 中的 getter 和 setter 的好处：