Javascript 简明教程

JavaScript - Object Constructors

Object Constructors

JavaScript 中的 object constructor 是一个创建类实例的函数，该实例通常称为对象。当使用 new 关键字声明对象时会调用构造函数。构造函数的目的是创建对象并在存在任何对象属性时设置值。

有两种方法可以在 JavaScript 中创建对象的模板——使用类和使用对象构造函数。

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

对象构造函数的主要好处是你可以重复使用代码。

Syntax

你可以遵循以下语法来使用对象构造函数创建对象。

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

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

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

“this”关键字表示你正在使用的函数上下文。这里，“this”关键字指的是对象的当前实例。

要创建对象，你可以将函数构造函数与“new”关键字一起使用。

Example: Creating an object using a constructor function

在下面的示例中，我们创建了一个 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

Example: Constructor function with parameters

在下面的示例中，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}

通过这种方式，你可以使用对象构造器重用对象语法代码，并创建多个相同类型的对象。

Adding a Property or Method to a Constructor

你已在“对象”章节中了解到如何使用点号或方括号表示法向对象添加属性或方法。但是，如果你希望向对象构造器添加属性或方法，该怎么办？

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

Example

以下示例演示如何向对象构造器中添加方法和属性。我们在 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 Object Prototype

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

Syntax

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

obj.prototype.name = value;

在以上语法中，“obj” 是你需要在其中添加属性或方法的对象构造器。

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

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

Example

在以下示例中，我们已将 BikeDetails() 方法添加到 Bike() 构造器的原型中。

可以使用 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

Built-in Object Constructors in JavaScript

JavaScript 包含生成器，我们已将它们列在下面的表中。

Sr. No.

Constructor

Description

Example

Array

To create an array.

new Array()

String

To create a string.

new String("Hello")

Number

To create a number.

new Number(92)

Boolean

To create a boolean.

new Boolean(true)

Set

创建新的集合。

new Set()

Map

创建新的映射。

new Map()

Object

创建新的对象。

new Object()

Function

创建新的函数。

function new (x){ return x * x;}

Date

创建 Date 对象的实例。

new Date()

RegExp

创建新的正则表达式。

new RegExp("\\d+")

Error

创建新的错误。

new Error("new error.")

Symbol

To create a symbol.

Symbol("description")