1 個程式範例，快速學習 JavaScript 物件導向語法

• 01 January 2024

當深入 JavaScript 的核心時，傳統的物件導向編程（OOP）技術顯得非常重要。這種編程風格不僅為程式碼提供了清晰的結構，而且還促進了模組化和重用，這對於大型和複雜的應用程式開發尤為關鍵。

為什麼要學習 JavaScript OOP？

JavaScript 雖然最初是基於原型的語言，但 ES6（ES2015）引入了類別（class）語法，讓開發者能夠使用更傳統的物件導向編程方式。這種方式讓程式碼更容易理解、維護和擴展。

本篇文章將透過一個完整的範例，一步步探討 JavaScript 中傳統物件導向編程的關鍵概念，包括類別的定義、公共和私有屬性的宣告、建構函數、方法的使用，以及類別的繼承等。這將幫助你深入理解 JavaScript 中的 OOP，並將這些知識應用於編程實踐中。

完整 OOP 語法範例：

// 定義一個類別 (Define a Class)
// 類別是 JavaScript 中用於建立物件的模板。它封裝了相關的屬性和方法。
class Car {
    // 公共屬性 (Declare a Public Property)
    // 公共屬性可以在類別實例的任何地方被存取和修改。
    color;

    // 私有屬性 (Declare a Private Property)
    // 私有屬性僅在定義它們的類別內部可存取，外部無法直接存取。
    #brand;

    // 建構函數 (Declare Constructor)
    // 建構函數是在建立類別實例時自動呼叫的特殊方法，用於初始化類別的屬性。
    constructor(brand, color) {
        this.#brand = brand;
        this.color = color;
    }

    // 公共方法 (Declare a Public Method)
    // 公共方法可以被類別實例及繼承該類別的其他類別的實例呼叫。
    displayInfo() {
        console.log(`This is a ${this.color} car.`);
    }

    // 私有方法 (Declare a Private Method)
    // 私有方法僅能在定義它的類別內部被呼叫，對外部是不可見的。
    #privateMethod() {
        return `Brand is ${this.#brand}`;
    }

    // Getter 和 Setter
    // Getter 和 Setter 用於對類別的私有屬性進行安全的存取和更新。
    get brand() {
        return this.#privateMethod();
    }

    set brand(newBrand) {
        this.#brand = newBrand;
    }

    // 靜態方法和屬性 (Static Methods and Fields)
    // 靜態方法和屬性屬於類別本身，而不是類別的任何特定實例。
    static numberOfWheels = 4;

    static carDescription() {
        return `Cars usually have ${this.numberOfWheels} wheels.`;
    }
}

// 擴展一個類別 (Extend a Class)
// 使用 'extends' 關鍵字建立一個新類別，繼承另一個類別的屬性和方法。
class ElectricCar extends Car {
    constructor(brand, color, batteryLife) {
        super(brand, color); // 呼叫父類別建構函數
        this.batteryLife = batteryLife;
    }

    // 覆寫方法
    displayInfo() {
        console.log(`This is a ${this.color} electric car with a battery life of ${this.batteryLife} hours.`);
    }
}

// 建立一個實例 (Create an Instance)
// 使用 'new' 關鍵字和類別名稱建立該類別的一個新實例。
const myCar = new ElectricCar('Tesla', 'red', 24);

// 呼叫方法 (Call a Method)
// 透過類別實例呼叫在類別中定義的方法。
myCar.displayInfo(); // This is a red electric car with a battery life of 24 hours.

// 點表示法 vs 括號表示法 (Dot vs Bracket Notation)
// 使用點表示法或括號表示法存取物件的屬性。點表示法更直觀，而括號表示法在屬性名為變數時很有用。
console.log(myCar.color);    // red (點表示法)
console.log(myCar['color']); // red (括號表示法)

這個範例透過詳細的註解解釋了 JavaScript 中的關鍵物件導向概念，包括如何定義類別、宣告屬性和方法、建立和使用實例，以及如何實現繼承和多型性。透過這個實際的範例，你可以更好地理解和掌握 JavaScript 的物件導向特性。

範例說明：

這個範例建立了一個 Car 類別作為基礎類別，然後建立了一個 ElectricCar 類別來繼承它。這展示了：

• 如何定義類別和屬性
• 如何使用建構函數初始化物件
• 如何定義公共和私有方法
• 如何使用繼承擴展類別功能
• 如何覆寫父類別的方法

重點整理

以下是 JavaScript 物件導向編程的關鍵概念：

• 類別（Class）：用於建立物件的模板，封裝了相關的屬性和方法。類別定義了物件的結構和行為。

• 公共與私有屬性：公共屬性可被外部存取和修改，私有屬性（以 # 開頭）僅在類別內部可存取，這提供了更好的封裝性。

• 建構函數（Constructor）：在建立實例時自動呼叫的特殊方法，用於初始化物件的屬性。這是建立物件時的第一個步驟。

• 繼承（Inheritance）：使用 extends 關鍵字讓子類別繼承父類別的屬性和方法。這允許你重用程式碼並建立更複雜的類別層次結構。

• 靜態方法與屬性：屬於類別本身，不需要建立實例即可使用。通常用於工具函數或類別層級的資料。

• Getter 和 Setter：提供安全的方式存取和修改私有屬性。這允許你在存取屬性時執行額外的邏輯，例如驗證或計算。

實際應用：

透過這些概念，你可以建立結構清晰、易於維護的 JavaScript 程式碼。物件導向編程特別適合：

• 大型應用程式的開發
• 需要重用程式碼的場景
• 需要模組化和封裝的專案
• 團隊協作開發

掌握這些概念後，你就能夠寫出更專業、更易於維護的 JavaScript 程式碼。

• ← Previous
  如何在 SvelteKit 中管理前端環境變數