JavaScript - 对象访问器

上一页
下一页

JavaScript 中的对象访问器属性是获取或设置对象值的方法。它们是使用 get 和 set 关键字定义的。访问器属性是控制访问和修改对象方式的强大方法。

JavaScript 对象可以具有两种属性。

  • 数据属性
  • 访问器属性

以下属性称为 data 属性。


const obj = {
	 	 key: "value", // Data property
}

对象访问器属性

在 JavaScript 中，你可以使用 getter 来获取对象属性，使用 setter 来设置对象属性。

有两个关键字可用于定义访问器属性。

  • get − get 关键字用于定义获取对象属性值的方法。
  • set − set 关键字用于定义更新对象属性值的方法。

JavaScript Getter

getter 用于访问对象属性。要将方法定义为 getter，我们使用 get 关键字，后跟方法名称。按照下面的语法定义 getter。


get methodName() {
	 	 	// Method body
}
obj.methodName;

在上面的语法中，我们使用 'get' 关键字后跟方法名称来定义 getter。

您可以使用方法名称作为对象属性来获取其返回值。

您无需编写一对括号，后跟方法名称即可执行 getter。您可以像访问 object 属性一样访问它。

例

在下面的示例中，在 wall 对象中，我们定义了 getColor（） getter。getColor（） 返回 color 属性的值。

之后，我们使用 getColor（） 方法访问对象的 color 属性值。


<html>
<body>
	 <p id = "output">The color of the wall is : </p>
	 <script>
	 	 const wall = {
	 	 	 color: "brown",
	 	 	 get getColor() {
	 	 	 	 return this.color;
	 	 	 }
	 	 }
	 	 document.getElementById("output").innerHTML += wall.getColor;
	 </script>
</body>
</html>

输出

The color of the wall is : brown

JavaScript 资源库

setter 用于更新 JavaScript 对象属性。要将方法定义为 setter，我们使用 set 关键字后跟方法名称您可以按照以下语法在 JavaScript 对象中定义 setter。


set methodName(param) { // Setter method
	 	 	return this.color = color;
}

wall.methodName = "Red";
  • 在上面的语法中，'set' 关键字用于定义 setter 方法。
  • method_name 可以是任何有效的标识符。
  • setter 方法始终采用单个参数。如果您不传递一个或多个参数，则会出现错误。
  • 在为属性分配 value 时，您可以为 setter 方法分配 value。
例

在下面的示例中，我们定义了 setter 方法来设置 wall 对象的 color 属性的值。我们使用 'setColor' setter 方法将 'red' 值设置为对象的 color 属性。


<html>
<body>
	 <p id = "output"> </p>
	 <script>
	 	 const wall = {
	 	 	 color: "brown",
	 	 	 set setColor(color) {
	 	 	 	 return this.color = color;
	 	 	 }
	 	 }
	 	 document.getElementById("output").innerHTML +=	
	 	 "The color of the wall before update is : " + wall.color + "<br>";
	 	 //updating the color of wall
	 	 wall.setColor = "Red";
	 	 document.getElementById("output").innerHTML +=	
	 	 "The color of the wall after update is : " + wall.color;
	 </script>
</body>
</html>

输出

The color of the wall before update is : brown
The color of the wall after update is : Red

JavaScript 对象方法与 Getter/Setter

在 JavaScript 中，无论你可以使用 getter 和 setter 做什么，你也可以通过定义特定的对象方法来做。区别在于 getter 和 setter 提供更简单的语法。

让我们借助一些示例来理解它。

例

在下面的示例中，我们在 wall 对象中定义了 getColor（） getters 方法和 colorMethod（） 对象方法。Both 方法都返回 color 值。

你可以观察到，定义和访问 getter 比定义和访问 object 方法更简单。


<html>
<body>
	 <p id = "output"> </p>
	 <script>
	 	 const wall = {
	 	 	 color: "brown",
	 	 	 get getColor() {
	 	 	 	 return this.color;
	 	 	 },
	 	 	 colorMethod: function () {
	 	 	 	 return this.color;
	 	 	 }
	 	 }
	 		
	 	 document.getElementById("output").innerHTML +=	
	 	 "Getting the color using the getters : " + wall.getColor + "<br>";
	 		
	 	 document.getElementById("output").innerHTML +=	
	 	 "Getting the color using the object method : " + wall.colorMethod();
	 </script>
</body>
</html>

输出

Getting the color using the getters : brown
Getting the color using the object method : brown

数据质量和安全性

getter 和 setter 方法可以提供更好的数据质量。此外，它们还用于封装以保护对象数据。

让我们通过下面的示例了解 getter 和 setter 如何提高数据质量并提供安全性。

例

在下面的示例中，getColor（） 是一个 getter 方法，在将 color 属性转换为大写后返回该属性的值。此外，它还对用户隐藏了 color 属性，因为您可以使用 getColor（） 方法访问其值。


<html>
<body>
	 <p id = "output"> </p>
	 <script>
	 	 const wall = {
	 	 	 color: "Brown",
	 	 	 get getColor() {
	 	 	 	 return this.color.toUpperCase();
	 	 	 }
	 	 }
	 	 document.getElementById("output").innerHTML +=	
	 	 "Getting the color using the getters : " + wall.getColor;
	 </script>
</body>
</html>

输出

Getting the color using the getters : BROWN

用 Object.defineProperty（） 定义 getter/setter

您还可以使用 Object.defineProperty（） 方法将 getter 或 setter 添加到对象中。


Object.defineProperty(object, "methodName", {
	 	 keyword: function () {
	 	 	 	 // Method body
	 	 },
})

使用上述语法，您可以定义与 methodName 相同的 getter 或 setter。

参数

  • object − 它是需要添加 getter 或 setter 的对象。
  • methodName − 它是 getter 或 setter 的方法名称。
  • keyword − 它可以是 'get' 或 'set'，具体取决于你想要定义 getter 或 setter 方法。
例

在下面的示例中，我们使用 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 size is : " + door.getSize + "<br>";
	 	 door.setSize = 30;
	 	 output.innerHTML += "Door size after update is : " + door.getSize;
	 </script>
</body>
</html>

输出

Door size is : 20
Door size after update is : 30

使用 getter 和 setter 的原因

以下是在 JavaScript 中使用 getter 和 setter 的好处。

  • 它的语法比 object 方法简单。
  • 通过验证数据来提高数据质量。
  • 用于封装或保护数据。
  • 它还允许抽象或数据隐藏。
打印本页
上一页
下一页