JavaScript - 对象访问器

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

JavaScript 对象可以有两种属性。

数据属性
访问器属性

以下属性称为数据属性。

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。您可以像访问对象属性一样访问它。

示例

在下面的示例中，在 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

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 对象方法与 Getter/Setter

在 JavaScript 中，任何您可以使用getter和setter完成的事情，您也可以通过定义特定的对象方法来完成。区别在于getter和setter提供了更简单的语法。

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

示例

在下面的示例中，我们在 wall 对象中定义了getColor() getter 方法和 colorMethod() 对象方法。两种方法都返回 color 值。

您可以观察到，定义和访问 getter 比定义和访问对象方法更简单。

<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 − 根据您要定义 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 的好处。

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

打印页面