如何建立多個相同型別的 JavaScript 物件？

JavaScript 是一種寬鬆的面嚮物件語言。在本文中，我們將探討各種 JavaScript 物件建立方法。在繼續之前，務必瞭解 JavaScript 是一種基於原型而非類別的面嚮物件語言。由於這種不同的基礎，理解 JavaScript 如何允許您構建物件層次結構以及繼承屬性及其值可能會更困難。

程式設計物件可以組合變數、函式和資料結構。換句話說，物件可以儲存值，您可以使用物件來操作值，並且您可以將值組合成更復雜的物件（如陣列），同時仍然享受所有優勢。

JavaScript 中建立物件最簡單的方法之一。建構函式只是一個函式，使用 new 關鍵字，可以建立多個相同風格的物件。

示例 1

在這個例子中，讓我們瞭解如何使用建構函式建立物件。

在面向物件程式設計中，一個類由兩大部分組成：一些成員函式和一些引數。此方法中有三個引數等效於一個類：name、manufacturer 和 engineCapacity（this 關鍵字用於區分類的 name、manufacturer、engineCapacity 與正在提供的引數的 name、manufacturer、engineCapacity）。然後，我們只需為腳踏車建立一個物件 (obj)，對其進行初始化，並呼叫其方法。

<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - 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>
      function motorBike(name,manufacturer,engineCapacity){
         this.name = name;
         this.manufacturer = manufacturer;
         this.engineCapacity = engineCapacity;
      }
      let bike = new motorBike('Honda Shine','Honda','125cc');
      document.write(bike.name +'<br>');
      document.write(bike.manufacturer +'<br>');
      document.write(bike['engineCapacity']);
   </script>
</body>
</html>

示例 2

在這個例子中，讓我們瞭解如何使用物件字面量。字面量是定義事物的更緊湊和直接的方式。我們只需在花括號內宣告屬性和值，如下所示：

上面的程式碼使用了物件字面量來建立一個簡單的名為 bike 的物件，該物件具有 name、manufacturer 和 engineCapacity 等屬性。因此，我們實現屬性訪問器方法（點表示法、方括號表示法）來使用 document.write 寫入值。

<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - 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 bike = {
         name : 'Honda Shine',
         manufacturer : 'Honda',
         engineCapacity : '125cc'
      };
      document.write(bike.name +'<br>');
      document.write(bike['manufacturer']);
   </script>
</body>
</html>

示例 3

在這個例子中，讓我們瞭解如何向物件新增方法。

如下所示，方法可以像屬性一樣之後新增，也可以在建立物件時成為物件的一部分。在下面的程式碼中，向 bike 物件添加了一個 start 函式，然後 bike 物件使用了該函式。EngineStart() 和 EngineStop() 方法是在物件聲明後新增的。

<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - 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 bike = {
         name : 'Honda Shine',
         manufacturer : 'Honda',
         engineCapacity : '125cc',
         EngineStart : function(){
            document.write('Increasing the speed in Bike Race...' +'<br>');
         }
      };
      bike.EngineStart();
      bike.EngineStop = function() {
         document.write('Lightly press the brake...');
      }
      bike.EngineStop();
   </script>
</body>
</html>

示例 4

在這個例子中，讓我們瞭解如何使用 Object.create() 方法建立物件。

使用 Object.create() 方法，透過使用現有物件作為其原型來建立一個新物件。

<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - 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 motorBike = {
         isDriving : false,
         printText : function(){
            document.write(`I always ride my ${this.name}. I won the race: ${this.isDriving}`);
         }
      };
      const bike = Object.create(motorBike);
      bike.name = 'Honda Shine bike';
      bike.isDriving = true;
      bike.printText();
   </script>
</body>
</html>

示例 5

本例讓我們瞭解如何使用 ES6 類建立 JavaScript 物件

與任何其他靜態型別或面嚮物件語言一樣，ES6 支援類模型。因此，如下所示，可以使用 javascript 從類構造物件：

<!DOCTYPE html>
<html>
<title>Create many JavaScript objects as the same type - 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>
      class motorBike {
         constructor(name, manufacturer, engineCapacity) {
            this.name = name;
            this.manufacturer = manufacturer;
            this.engineCapacity = engineCapacity;
         }
      }
      let bike = new motorBike('Honda Shine', 'Honda', '125cc');
      document.write(bike.name);
   </script>
</body>
</html>

更新於：2022年8月23日

2K+ 瀏覽量

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告