掌握 JavaScript 建構式函式：以自訂物件為例

在 JavaScript 中，建構式函式 ( Constructor Function ) 是一種建立自訂物件的常用方式。透過 this 關鍵字與 prototype 屬性，我們可以快速定義物件的屬性與方法，並產生多個具備相同行為與特性的實例 ( instance )。

本篇文章將透過一個簡單的範例，帶你理解建構式函式的基本用法與原型方法的設計方式。

建構式函式是什麼？

建構式函式本質上是一個普通的函式，但搭配 new 關鍵字來使用時，他會產生一個新的物件實例，並將 this 指向該物件。我們可以在函式中定義屬性及方法，也可以透過 prototype 加入方法，讓所有物件實例共用。

範例：模擬擲骰子的物件

以下是一個名為 Tryobj 的建構式函式。每個物件實例都會接收一個最大值 n ，並透過方法隨機生成 0 到 n-1 之間的數字。我們也加入了延遲執行的功能來觀察物件方法的動態行為。

<script type="text/javascript">

function Tryobj(n) { // 定義屬性 ( 為了節省記憶體，我們將方法定義在建構式函式的 prototype 上。)

this.n = n; // 設定最大數值範圍

this.times = 0; // 初始化 times

}

//原型方法：產生隨機值並輸出

Tryobj.prototype.actions = function() {

this.n = Math.floor(Math.random() * this.n);

console.log(this.times + '_' + this.n + '\n');

};

// 原型方法：延遲執行 actions，模擬等待效果

Tryobj.prototype.act2 = function(times) {

this.times = times;

setTimeout(this.actions.bind(this), 1200);

};

// 建立多個物件並執行

for (let throwTimes = 0; throwTimes < 7; throwTimes++) {

var testObj = new Tryobj(50); // 每次建立新的物件

testObj.act2(throwTimes); // 延遲輸出

}

</script>

程式說明：

• 建構式函式 Tryobj(n) ：定義一個接受參數 n 的函式，並定義屬性 n 及 times。方法定義在 prototype 上。
• actions() 方法：從 0 到 n-1 中隨機選一個整數，並印出目前的 times 次數與 n 值。
• act2(times)方法：將 times 儲存下來後，延遲 1200 毫秒執行 actions()，模擬非同步操作。
• for 迴圈：建立 7 個不同的物件，依序傳入 times 次數，觀察每次延遲後輸出的結果。

結論：建構式函式搭配 prototype 是 JavaScript 中建立可重複使用物件的核心技巧之一。透過本篇範例，你應該可以理解：

• 如何使用 this 設定每個實例的屬性
• 如何將共用方法掛在原型上，節省記憶體
• 如何處理非同步操作中的 this 綁定 ( 例如使用 .bind(this) )