Javascript 简明教程

JavaScript - Object Accessors

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

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

Data properties
Accessor properties

以下属性称为数据属性。

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

Object Accessor Properties

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

定义 accessor 属性有两个关键字。

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

JavaScript Getters

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

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

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

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

Example

在以下示例中，在 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 Setters

setters 用于更新 JavaScript 对象属性。要在 setter 中定义方法，使用 set 关键词，然后接方法名，按照以下语法在 JavaScript 对象中定义 setter：

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

wall.methodName = "Red";

上述语法中，“set”关键词用于定义 setter 方法。
method_name 可以是任何有效的标识符。
setter 方法始终只接受一个参数。如果你不传入参数，或者传入了多个参数，将会报错。
你可以像赋值给属性一样给 setter 方法赋值。

Example

在以下示例中，我们定义了 setter 方法，用于设置墙对象中 color 属性的值。我们使用“setColor”setter 方法为对象中的 color 属性设置“red”值。

<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 Object Methods vs. Getters/Setters

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

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

Example

在以下示例中，我们在墙对象中定义了 getColor() getter 方法和 colorMethod() 对象方法。两种方法都会返回颜色值。

你可以看到，定义和访问 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

Data Quality and Security

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

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

Example

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

Defining getters/setters using the Object.defineProperty()

你还可以使用 Object.defineProperty() 方法向对象中添加 getter 或 setter。

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

使用以上语法，你可以像 methodName 一样定义 getter 或 setter。

Parameters

object - 你需要向其中添加 getter 或 setter 的对象。
methodName - getter 或 setter 的方法名。
keyword - 根据你希望定义 getter 还是 setter 方法，可以是“get”或“set”。

Example

在以下示例中，我们使用 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

Reasons to use getters and setters

以下是 JavaScript 中使用 getter 和 setter 的优势。

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