JavaScript - 对象构造函数

上一页
下一页

对象构造函数

JavaScript 对象构造函数是创建类实例的函数，通常称为对象。当您使用 new 关键字声明对象时，将调用构造函数。构造函数的目的是创建一个对象，如果存在任何对象属性，则设置值。

在 JavaScript 中为对象创建模板有两种方法 - 使用类和使用对象构造函数。

每当需要创建具有相同语法的多个对象时，都需要该对象的模板。例如，您正在管理汽车库存。因此，每次使用对象字面量创建新对象并不是一个好主意。在这种情况下，您需要使用对象构造函数。

对象构造函数的主要优点是可以重用代码。

语法

您可以按照以下语法使用对象构造函数创建对象。


function Funcname(p1, p2, ... , pN) {
	 	this.prop1 = p1;
}
const obj = new Funcname(args);

在上面的语法中，Funcname（） 是一个构造函数，你可以用 Funcname 替换任何有效的标识符。

p1、p2、...和 pN 是您可以在函数体内使用的参数。您需要在创建对象时将参数传递给构造函数。

'this' 关键字表示您正在使用的函数上下文。此处，'this' 关键字引用对象的当前实例。

要创建对象，您可以使用带有 'new' 关键字的函数构造函数。

示例：使用构造函数创建对象

在下面的示例中，我们创建了一个 Tree（） 函数。在函数体中，我们初始化 name 和 age 属性。

之后，我们使用带有 'new' 关键字的函数名称来创建 Tree（） 构造函数的对象。


<html>
<body>
	 <p id = "output"> </p>
	 <script>
		
	 	 function Tree() {
	 	 	 this.name = "palm";
	 	 	 this.age = 5;
	 	 }
	 	 const tree1 = new Tree();
	 	 document.getElementById("output").innerHTML =	
	 	 "name = " + tree1.name + ", age = " + tree1.age;
	 		
	 </script>
</body>
</html>

输出

name = palm, age = 5

示例：带参数的构造函数

在下面的示例中，Bike（） 函数采用三个参数。在函数体中，我们使用参数初始化属性。

之后，我们使用 Bike（） 构造函数创建了具有不同值的 bike1 和 bike2 对象。在输出中，您可以观察对象属性值。


<html>
<body>
	 <p id = "output1">The bike1 object is : </p>
	 <p id = "output2">The bike2 object is : 	</p>
	 <script>

	 	 function Bike(name, speed, gear) {
	 	 	 this.name = name;
	 	 	 this.speed = speed;
	 	 	 this.gear = gear;
	 	 }
	 		
	 	 const bike1 = new Bike("Honda", 100, 4);
	 	 const bike2 = new Bike("Yamaha", 200, 6);
	 	 document.getElementById("output1").innerHTML += JSON.stringify(bike1);
	 	 document.getElementById("output2").innerHTML += JSON.stringify(bike2);
	 		
	 </script>
</body>
</html>

输出

The bike1 object is : {"name":"Honda","speed":100,"gear":4}

The bike2 object is : {"name":"Yamaha","speed":200,"gear":6}

这样，您可以使用对象构造函数来复用对象语法代码，并创建多个相同类型的对象。

向构造函数添加属性或方法

在 Objects 一章中，您学习了如何使用点（.）或方括号（[]）表示法将方法的属性添加到对象中。但是，如果要向对象构造函数添加属性或方法，该怎么办？

对象构造函数不允许在定义属性或方法后添加它。因此，在定义它时，您始终需要添加所需的属性和方法。让我们通过下面的示例来理解它。

例

下面的示例演示如何将方法和属性添加到对象构造函数中。我们在 houseAddress（） 构造函数中添加了三个属性和 getFullAddress（） 方法。

此外，我们还通过将对象作为引用来执行该方法。


<html>
<body>
	 <p id = "output1">The house object is 	</p>
	 <p id = "output2">The full address of the house is 	</p>
	 <script>
	 	 function HouseAddress(no, street, city) {
	 	 	 // Adding properties
	 	 	 this.houseNo = no,
	 	 	 this.street = street,
	 	 	 this.city = city;
	 	 	 // Adding a method
	 	 	 this.getFullAddress = function () {
	 	 	 	 return this.houseNo + ", " + this.street + ", " + this.city;
	 	 	 };
	 	 }
	 	 const house = new HouseAddress(20, "Cooper Square", "New York");
	 	 document.getElementById("output1").innerHTML += JSON.stringify(house);
	 	 document.getElementById("output2").innerHTML += house.getFullAddress();
	 </script>
</body>
</html>

输出

The house object is {"houseNo":20,"street":"Cooper Square","city":"New York"}

The full address of the house is 20, Cooper Square, New York

如果您添加方法或属性，如下所示。它将被添加到特定对象中，但不会添加到构造函数中。


 Obj.prop = 20;

使用对象构造函数创建的其他对象不包含 prop 属性，因为它仅添加到 obj 对象中。

JavaScript 对象原型

在 JavaScript 中，每个对象默认包含原型属性，对象构造函数也是一种对象。因此，您可以向对象原型添加属性或方法。

语法

您可以按照以下语法将属性或方法添加到对象构造函数原型中。


 obj.prototype.name = value;

在上面的语法中，'obj' 是一个对象构造函数，你需要在其中添加一个属性或方法。

'name' 是一个属性或方法名称。

对于该属性，您可以将 'value' 替换为实际的值；对于该方法，您可以将 'value' 替换为 函数表达式。

例

在下面的示例中，我们已将 BikeDetails（） 方法添加到 Bike（） 构造函数的原型中。

BikDetails（） 方法可以使用 Bike（） 构造函数的任何对象来执行。但是，当您打印 bike1 和 bike2 对象时，它不会显示 BikeDetails（） 方法，因为它已添加到原型中。


<html>
<body>
	 <p id = "output1">The bike1 details is: </p>
	 <p id = "output2">The bike2 details is: </p>
	 <script>
	 	 function Bike(name, speed, gear) {
	 	 	 this.name = name;
	 	 	 this.speed = speed;
	 	 	 this.gear = gear;
	 	 }
	 	 Bike.prototype.BikeDetails = function () {
	 	 	 return this.name + ", " + this.speed + ", " + this.gear + "<br>";
	 	 };
	 	 const bike1 = new Bike("Honda", 100, 4);
	 	 const bike2 = new Bike("Yamaha", 200, 6);
	 	 document.getElementById("output1").innerHTML += bike1.BikeDetails();
	 	 document.getElementById("output2").innerHTML += bike2.BikeDetails();
	 </script>
</body>
</html>

输出

The bike1 details is: Honda, 100, 4

The bike2 details is: Yamaha, 200, 6

JavaScript 内置对象构造函数

JavaScript 包含一个内置构造函数，我们在下表中列出了该构造函数。

Sr. No. 构造 函数 描述 示例
1 Array 创建数组。 new Array()
2 String 创建字符串。 new String("Hello")
3 Number 创建号码。 new Number(92)
4 Boolean 要创建一个布尔值。 new Boolean(true)
5 Set 创建新集。 new Set()
6 Map 创建新映射。 new Map()
7 Object 创建新对象。 new Object()
8 Function 创建新函数。 new Function("x", "return x * x;")
9 Date 创建 Date 对象的实例。 new Date()
10 RegExp 创建新的正则表达式。 new RegExp("\\d+")
11 Error 创建新错误。 new Error("new error.")
12 Symbol 创建元件。 Symbol("description")
打印本页
上一页
下一页