创建许多相同类型的 JavaScript 对象?
JavaScript 是一种宽容的面向对象语言。我们将在本文中介绍各种 JavaScript 对象创建方法。在继续之前，了解 JavaScript 是一种基于原型而非类的面向对象语言至关重要。由于这个不同的基础，理解 JavaScript 如何使您能够构建对象的层次结构并获得属性及其值的继承可能会更加困难。
编程对象可以组合变量、函数和数据结构。换句话说，对象可以保存值，您可以使用对象来操作值，并且可以将值组合成更复杂的对象(如数组)，同时仍可享受所有优点。
JavaScript 中创建对象的最简单方法之一。构造函数只是一个函数，使用 new 关键字，可以创建具有相同样式的多个对象。
示例 1
在此示例中，让我们了解如何使用构造函数创建对象。
在 OOP 中，类由两个主要部分组成:一些成员函数和一些参数。此方法中有三个参数相当于一个类:name、manufacturer 和 engineCapacity(this 关键字用于区分类的名称、制造商、engineCapacity 与所提供参数的名称、制造商、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 的简单对象，该对象具有名称、制造商和发动机容量等属性。因此，我们实现属性访问器方法(点符号、括号符号)来 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
在此示例中，让我们了解如何将方法添加到对象中。
如下所示，方法可以像属性一样在之后添加，也可以在创建对象时将其作为对象的一部分。在下面的代码中，自行车对象添加了一个启动函数，然后自行车对象会使用该函数。在声明对象后添加的是 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>
