如何创建多个相同类型的 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+ 浏览量

启动您的 职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.