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")

但是，您也可以使用字面量表達式來定義包含原始值的數字、字串、布林值等變數。

列印頁面
上一頁
下一頁
廣告