笙亿网络策划

JavaScript 对象构造函数怎么用？

约 11 分钟读完 2 阅
文章导读
Previous Quiz Next 对象构造函数 JavaScript 中的 对象构造函数 是一个创建 class 实例的 function，通常称为 object。当你使用 new 关键字声明对象时，会调用 constructor。constructor 的目的是创建对
📋 目录
  1. 一 对象构造函数
  2. 二 向构造函数添加属性或方法
  3. 三 JavaScript 对象原型
  4. 四 JavaScript 中的内置对象构造函数
A A

JavaScript - 对象构造函数

Previous
Quiz
Next

对象构造函数

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

在 JavaScript 中，有两种方式创建对象的模板：使用 class 和使用对象构造函数。

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

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

语法

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

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

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

p1、p2 和 pN 是你在 function body 中使用的参数。在创建对象时，你需要向 constructor 传递 arguments。

'this' 关键字表示你正在使用的 function context。在此，'this' 关键字指代当前对象实例。

要创建对象，你可以使用带有 'new' 关键字的 function constructor。

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

在下面的示例中，我们创建了一个 Tree() function。在 function body 中，我们初始化了 name 和 age 属性。

之后，我们使用带有 'new' 关键字的 function name 来创建 Tree() constructor 的对象。

<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() function 接受三个参数。在 function body 中，我们使用参数初始化属性。

之后，我们使用 Bike() constructor 创建了具有不同值的 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) {
      // 添加属性
      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 中，每个对象默认包含 prototype 属性，对象构造函数也是一种对象。因此，你可以向对象原型添加属性或方法。

语法

你可以使用下面的语法向对象构造函数的 prototype 添加属性或方法。

obj.prototype.name = value;

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

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

对于属性，你可以用实际值替换 'value'；对于方法，你可以用 function expression 替换 'value'。

示例

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

BikeDetails() 方法可以使用 Bike() 构造函数的任何对象来执行。但是，当你打印 bike1 和 bike2 对象时，它不会显示 BikeDetails() 方法，因为它被添加到 prototype 中。

<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 Boolean 用于创建布尔值。 new Boolean(true)
5 Set 用于创建新的 set。 new Set()
6 Map 用于创建新的 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。 Symbol("description")

不过，你也可以使用字面量表达式来定义包含基本值的数字、字符串、布尔值等变量。