探索 JavaScript 中的面向對象編程 (OOP)

日期：2024 年 12 月 17 日

面向對象編程（OOP）是一種使用對象來建模現(xiàn)實世界實體的范例。 JavaScript 是一種多功能編程語言，通過其原型、ES6 類和現(xiàn)代增強功能為 OOP 提供了強大的支持。今天，我們將深入探討 JavaScript 中 OOP 的原理和特性。

---

JavaScript 中 OOP 的核心概念

1.對象

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

示例：創(chuàng)建對象

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

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

---

2.課程

類是創(chuàng)建對象的藍圖。它們封裝了數(shù)據(jù)和行為。 JavaScript 在 ES6 中引入了 class 關鍵字。

示例：創(chuàng)建一個類

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.封裝

封裝意味著將數(shù)據(jù)和方法捆綁在一起，同時限制對某些組件的直接訪問。 JavaScript 使用公共、私有和受保護的成員來實現(xiàn)這一點。

私人領域

私有字段由 # 前綴表示，只能在類內訪問。

示例：私有字段

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.多態(tài)性

多態(tài)允許子類重寫父類的方法以提供特定的實現(xiàn)。

示例：方法重寫

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.抽象

抽象側重于僅公開基本細節(jié)，同時隱藏實現(xiàn)復雜性。雖然 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 代碼的最佳實踐。

---

現(xiàn)實示例：用戶管理系統(tǒng)

第 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 步：創(chuàng)建實例

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. 為圖書館管理系統(tǒng)創(chuàng)建類層次結構。
2. 實現(xiàn)一個 BankAccount 類，其中包含用于余額的私有字段和用于存款和取款的公共方法。
3. 編寫一個 Vehicle 類，其中包含 Car 和 Bike 等子類，以展示多態(tài)性。

---

結論

JavaScript 中的 OOP 提供了一種編寫干凈、模塊化和可重用代碼的強大方法。通過掌握類、繼承、封裝和多態(tài)性等概念，您將能夠構建可擴展的應用程序。不斷試驗并將這些概念應用于現(xiàn)實世界的問題，以鞏固您的理解！

明天的主題：我們將探索 JavaScript 中的異步編程，深入研究回調、promise 和 async/await。請繼續(xù)關注！

以上是探索 JavaScript 中的面向對象編程 (OOP)的詳細內容。更多信息請關注PHP中文網其他相關文章！