探索 JavaScript 中的物件導向程式設計 (OOP)

探索 JavaScript 中的物件導向程式設計 (OOP)

日期：2024 年 12 月 17 日

物件導向程式設計（OOP）是一種使用物件來建模現實世界實體的範例。 JavaScript 是一種多功能程式語言，透過其原型、ES6 類別和現代增強功能為 OOP 提供了強大的支援。今天，我們將深入探討 JavaScript 中 OOP 的原理和特性。

---

JavaScript 中 OOP 的核心概念

1.對象

物件是 OOP 的構建塊。在 JavaScript 中，物件是鍵值對的集合。

範例：建立物件

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

---

2.課程

類別是創建物件的藍圖。它們封裝了資料和行為。 JavaScript 在 ES6 中引入了 class 關鍵字。

範例：建立一個類別

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

---

3.封裝

封裝意味著將資料和方法捆綁在一起，同時限制對某些組件的直接存取。 JavaScript 使用公有、私有和受保護的成員來實現這一點。

私人領域

私有欄位由 # 前綴表示，只能在類別內存取。

範例：私有欄位

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

---

4.繼承

繼承允許一個類別使用 extends 關鍵字從另一個類別繼承屬性和方法。

範例：繼承

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

---

5.多態性

多態允許子類別重寫父類別的方法以提供特定的實作。

範例：方法重寫

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

---

6.抽象

抽象重點在於僅公開基本細節，同時隱藏實作複雜性。雖然 JavaScript 本身沒有抽象類，但您可以模擬它們。

範例：模擬抽象

class Animal {
  constructor(name) {
    if (this.constructor === Animal) {
      throw new Error("Abstract class cannot be instantiated directly.");
    }
    this.name = name;
  }

  makeSound() {
    throw new Error("Abstract method must be implemented.");
  }
}

class Dog extends Animal {
  makeSound() {
    return "Bark!";
  }
}

const dog = new Dog("Buddy");
console.log(dog.makeSound()); // Output: Bark!
// const animal = new Animal("Some Animal"); // Error: Abstract class cannot be instantiated directly.

---

7.原型與原型鏈

JavaScript 是一種基於原型的語言。每個物件都有一個到另一個物件的內部鏈接，稱為其原型。

範例：原型鏈

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

---

8.物件組合與繼承

您可以透過組合功能來組合對象，而不是使用繼承。這種方法避免了深層繼承層次結構的複雜性。

範例：構圖

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

---

物件導向程式設計的關鍵原則

1. DRY（不要重複）：透過類別和繼承重用程式碼。
2. 堅實的原則：遵循編寫可擴展和可維護的 OOP 程式碼的最佳實踐。

---

現實範例：使用者管理系統

第 1 步：定義基底類別

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

第 2 步：擴充功能

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

第 3 步：建立實例

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

---

練習任務

1. 為圖書館管理系統建立類別層次結構。
2. 實作一個 BankAccount 類，其中包含用於餘額的私有欄位和用於存款和提款的公共方法。
3. 寫一個 Vehicle 類，其中包含 Car 和 Bike 等子類，以展示多態性。

---

結論

JavaScript 中的 OOP 提供了一種編寫乾淨、模組化和可重複使用程式碼的強大方法。透過掌握類別、繼承、封裝和多態性等概念，您將能夠建立可擴展的應用程式。不斷試驗並將這些概念應用於現實世界的問題，以鞏固您的理解！

明天的主題：我們將探索 JavaScript 中的非同步程式設計，深入研究回呼、promise 和 async/await。請繼續關注！

以上是探索 JavaScript 中的物件導向程式設計 (OOP)的詳細內容。更多資訊請關注PHP中文網其他相關文章！