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 的好處。

它比物件方法具有更簡單的語法。
透過驗證資料來提高資料質量。
用於封裝或保護資料。
它還允許抽象或資料隱藏。

列印頁面