在 JavaScript 中使用“get”作為屬性訪問屬性？

屬性訪問器提供基於點表示法或括號表示法的物件屬性訪問。關聯陣列是理解物件（也稱為對映、字典、雜湊、查詢表）的好方法。屬性名稱是此陣列中的鍵。

在討論物件屬性時，經常會區分屬性和方法。但是，屬性和方法之間的區別僅僅是一種約定俗成的做法。例如，當屬性的值是對 Function 例項的引用時，可以呼叫該屬性來執行一個函式。

語法

ObjectName[propertyName]

在本課中，您將藉助示例學習 JavaScript getter 和 setter 方法。

JavaScript 中存在兩類物件屬性：

  • 資料屬性
  • 訪問器屬性

JavaScript 中的訪問器屬性是檢索或修改物件值的途徑。為此，我們使用以下兩個關鍵字：

  • 定義一個名為“get”的 getter 方法來獲取屬性的值
  • 使用關鍵字“set”定義一個 setter 方法來設定屬性的值

示例 1

要訪問 JavaScript 中物件的屬性，請使用 getter 方法。例如：

下面的程式碼中定義了 getter 函式 getName() 來訪問物件的屬性。此外，我們在訪問它時始終將其值作為屬性訪問。當您嘗試將其值作為方法訪問時，會發生錯誤。

<!DOCTYPE html>
<html>
<title>Access property as a property using 'get' in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      const farm = {
         // this is data property
         fruitName: 'Pineapple',
         // this is accessor property(getter)
         get getName() {
            return this.fruitName;
         }
      };
   
      // written to access data property
      document.write(farm.fruitName +'<br>'); // Pineapple

      // written to access getter methods
      document.write(farm.getName); // Pineapple

      // written trying to access as a method
      document.write(farm.getName()); // throws error
   </script>
</body>
</html>

請按鍵盤上的 f12 鍵訪問瀏覽器控制檯以檢視結果。

TypeError: farm.getName is not a function

示例 2

JavaScript Setter。可以使用 setter 方法在 JavaScript 中更改物件的值。例如

下面的示例中使用了 setter 方法來修改物件的值。此 set 關鍵字用於構建 setter 方法。setter 中應該只有一個形式引數。

下面程式中 fruitName 的值為 Pineapple。然後將 Orange 替換為值。

<!DOCTYPE html>
<html>
<title>Access property as a property using 'get' in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      const farm = {
         fruitName: 'Pineapple',
         
         //this is accessor property(setter)
         set changeName(newName) {
            this.fruitName = newName;
         }
      };
      document.write(farm.fruitName +'<br>'); // Pineapple

      // this is change(set) object property using a setter
      farm.changeName = 'Orange ';
      document.write(farm.fruitName); // Orange
   </script>
</body>
</html>

示例 3

在本例中，讓我們瞭解如何在 JavaScript 中建立 getter 和 setter，使用者可以替代地使用 Object.defineProperty() 方法。

下面的示例中使用 Object.defineProperty() 方法來訪問和修改物件的屬性。

Object.defineProperty() 函式接受三個引數。

  • 第一個引數是 objectName。
  • 第二個引數是屬性的名稱。
  • 第三個引數是一個描述屬性的物件。
<!DOCTYPE html>
<html>
<title>Access property as a property using 'get' in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      const farm = {
         fruitName: 'Pineapple'
      }

      // written to get property
      Object.defineProperty(farm, "getName", {
         get : function () {
            return this.fruitName;
         }
      });

      // written to setting property
      Object.defineProperty(farm, "changeName", {
         set : function (value) {
            this.fruitName = value;
         }
      });
      document.write(farm.fruitName +'<br>'); // Pineapple

      // written to changing the property value
      farm.changeName = 'Orange ';
      document.write(farm.fruitName); // Orange
   </script>
</body>
</html>

點屬性訪問器

在此使用點屬性訪問器訪問物件的屬性；該屬性必須是合法的 JavaScript 識別符號。

語法

ObjectName.propertyName

示例 4

使用點屬性訪問器是訪問物件 JavaScript 屬性的最早和最常見的方法。藉助此函式，只能訪問指定物件的有效 ID。

<!DOCTYPE html>
<html>
<title>Access property as a property using 'get' in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let object1={
         studName : "Steve Jackson",
         studAge : 22,
         studAddress : "Delhi"
      };
      let studName=object1.studName;
      document.write(studName);
   </script>
</body>
</html>

使用方括號

這裡，使用方括號來檢索物件的屬性。它的工作方式與使用方括號訪問陣列的元素相同。

語法

ObjectName[propertyName]

示例 5

使用方括號屬性訪問器訪問點屬性訪問器不允許您訪問的任何物件屬性。它主要用於檢索屬性和陣列物件的錯誤識別符號。

<!DOCTYPE html>
<html>
<title>Access property as a property using 'get' in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      const school = {
         'student-1': 'Bob Smith',
         '6': 'six'
      };
      document.write(school['student-1'] +'<br>');
      document.write(school[6]);
   </script>
</body>
</html>

更新於：2022-08-23

484 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告