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) {
      // 添加属性
      this.houseNo = no,
      this.street = street,
      this.city = city;
      // 添加方法
      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"是属性或方法的名称。

对于属性，您可以将"值"替换为实际值;对于方法，您可以将"值"替换为函数表达式。

示例

在下面的示例中，我们将 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 包含内置构造函数，我们在下表中列出了这些构造函数。