JavaScript - 对象访问器

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

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

数据属性
访问器属性

以下属性称为数据属性。

const obj = {
    key: "value", // 数据属性
}

对象访问器属性

在 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() 方法访问对象的颜色属性值。

<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

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

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

wall.methodName = "Red";

在上述语法中，'set' 关键字用于定义 setter 方法。
method_name 可以是任何有效的标识符。
setter 方法始终接受单个参数。如果您未传递一个或多个参数，则会报错。
您可以像为属性赋值一样为 setter 方法赋值。

示例

在下面的示例中，我们定义了 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 对象方法 vs. Getters/Setters

在 JavaScript 中，所有使用 getters 和 setters 实现的功能，都可以通过定义特定的对象方法来实现。区别在于 getters 和 setters 的语法更简洁。

让我们通过一些示例来理解。

示例

在下面的示例中，我们在 wall 对象中定义了 getColor() getters 方法和 colorMethod() 对象方法。这两个方法都返回颜色值。

您可以观察到，定义和访问 getters 比定义和访问对象方法更直接。

<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 () {
        // 方法主体
    },
})

使用上述语法，您可以像 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 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 的好处如下。

它的语法比对象方法更简单。
通过验证数据来提高数据质量。
用于封装或保护数据。
它还允许抽象或数据隐藏。

❮ ❯

JavaScript 基础教程

JavaScript 运算符

JavaScript 控制流

JavaScript 函数