JavaScript面向對象核心概念深度解析：類、上下文、原型與構造器

前言：JS 沒有類，只有對象

JavaScript 是基於原型的面向對象語言，ES6 `class` 只是語法糖，底層仍是原型鏈機制。理解四大核心概念是掌握 JS OOP 的鑰匙。

1. 構造器 - 創建對象的「模具」

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() { console.log(`Hi, I'm ${this.name}`); };
}

const p1 = new Person('Alice', 20);
// new 過程：
// 1. 創建空對象 obj = {}
// 2. obj.__proto__ = Person.prototype
// 3. Person.call(obj, 'Alice', 20)  // this 綁定 obj
// 4. 返回 obj

關鍵點： 構造器是普通函數，約定首字母大寫。`new` 調用時 `this` 指向新創建的實例。

2. 原型 - 共享屬性/方法的「倉庫」

Person.prototype.sayHello = function() {
    console.log(`Hello, ${this.name}, age ${this.age}`);
};
Person.prototype.species = 'Human';

p1.sayHello(); // 從原型鏈查找調用
console.log(p1.species); // Human

• 每個函數都有 `prototype` 屬性（對象），默認包含 `constructor` 指回構造器。
• 實例通過 `__proto__` (或 `Object.getPrototypeOf`) 訪問構造器的 `prototype`。
• 方法定義在原型上，所有實例共享，節省內存。

3. 上下文 - this 的動態綁定規則

面試必考： 事件處理器、定時器、回調函數中的 `this` 丟失問題，解決：箭頭函數 / `bind` / `that = this`。

4. 類 - ES6 語法糖，本質仍是構造器 + 原型

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHi() { console.log(`Hi, ${this.name}`); } // 實際定義在 Person.prototype 上
    static createBaby(name) { return new Person(name, 0); } // 靜態方法掛在構造器上
}

const p2 = new Person('Bob', 25);
// 等價於 ES5 構造器寫法
console.log(Person.prototype.constructor === Person); // true

繼承機制：原型鏈委托

// ES5 寄生組合式繼承 (經典)
function Student(name, age, grade) {
    Person.call(this, name, age); // 借用父構造器初始化實例屬性
    this.grade = grade;
}
Student.prototype = Object.create(Person.prototype); // 原型鏈連接
Student.prototype.constructor = Student;
Student.prototype.study = function() { console.log(`${this.name} studying grade ${this.grade}`); };

// ES6 extends (底層同理)
class Student extends Person {
    constructor(name, age, grade) {
        super(name, age); // 必須先調用 super()
        this.grade = grade;
    }
    study() { console.log(`${this.name} studying grade ${this.grade}`); }
}

核心區別對比表

總結

JS 面向對象三部曲：**構造器創建實例 → 原型共享方法 → 原型鏈實現繼承**。`this` 綁定規則決定方法執行上下文。ES6 `class` 讓寫法更像傳統 OOP，但理解底層原型機制才是進階的前提。