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}

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

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

您已学习如何在对象章节中使用点或方括号表示法向对象添加属性或方法。但是，如果您想向对象构造函数添加属性或方法怎么办？

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

示例

下面的示例演示了如何向对象构造函数中添加方法和属性。我们在 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 中，每个对象默认都包含 prototype 属性，对象构造函数也是一种对象。因此，您可以向对象原型添加属性或方法。

语法

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

obj.prototype.name = value;

在上面的语法中，“obj”是您需要向其中添加属性或方法的对象构造函数。

“name”是属性或方法名称。

对于属性，您可以用实际值替换“value”；对于方法，您可以用函数表达式替换“value”。

示例

在下面的示例中，我们向 Bike() 构造函数的原型添加了 BikeDetails() 方法。

可以使用 Bike() 构造函数的任何对象执行 BikDetails() 方法。但是，当您打印 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 包含一个内置构造函数，我们在下表中列出了它。

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

但是，您也可以使用字面量表达式来定义包含原始值的数字、字符串、布尔值等变量。

打印页面