JavaScript 構造函數詳解：模擬面向對象的核心機制與實例創建流程

定義

**構造函數** 是一個普通函數，約定首字母大寫，配合 `new` 操作符調用，用於**初始化新創建的對象實例**。

執行流程 (new Foo() 發生了什麼)

1. 創建一個**空對象** `obj = {}`，內部原型 `__proto__` 指向 `Foo.prototype`。
2. 將 `this` 綁定到該空對象：`Foo.call(obj, ...args)`。
3. 執行函數體內代碼，通常掛屬性/方法到 `this`。
4. 若函數**無顯式 return** 或 **return 非對象**，返回 `this` (即新對象)；若 `return` 一個對象，則返回該對象 (構造函數失效)。

代碼演示

// 1. 定義構造函數
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() { console.log(this.name); };
}

// 2. 實例化
var p1 = new Person('Alice', 20);
var p2 = new Person('Bob', 25);

p1.sayHi(); // "Alice"
console.log(p1 instanceof Person); // true
console.log(p1.__proto__ === Person.prototype); // true

核心特性

• 原型繼承：所有實例共享 `Person.prototype` 上的屬性/方法，節省內存。
• 動態性：運行時可修改 `Person.prototype` 影響所有實例 (含已創建)。
• 構造器屬性：實例 `.constructor === Person`，可用於類型判斷。

內建構造函數

`Number`、`String`、`Array`、`Object`、`Date`、`RegExp`、`Function` 等均為構造函數：

var arr = new Array(1,2,3); // 等同 [1,2,3]
var num = new Number(123);  // 包裝對象，非原始值
var obj = new Object();     // 等同 {}

ES6 Class 語法糖

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHi() { console.log(this.name); }
}
// 編譯後本質仍是構造函數 + prototype 掛載方法

常見誤區

• ❌「構造函數就是類」→ ✅ JS 無類 (ES6 前)，構造函數+原型**模擬**類行為。
• ❌「構造函數內用 `var x = 1` 定義私有屬性」→ ✅ `var` 是局部變量，實例無法訪問；私有屬性用 `#field` (ES2022) 或閉包/WeakMap 模擬。

學習建議

1. 手寫 `new` 實現：`function myNew(ctor, ...args) { ... }` 徹底理解流程。
2. 掌握原型鏈：`__proto__`、`prototype`、`constructor` 三角關係圖解。
3. 閱讀《JavaScript 高級程式設計》第 6 章或 MDN「繼承與原型鏈」。