提升你的 JavaScript：深入研究物件導向程式設計✨-js教程-PHP中文網

Elevate Your JavaScript: A Deep Dive into Object-Oriented Programming✨

物件導向程式設計（OOP）是一種強大的範例，它徹底改變了我們建構和組織程式碼的方式。

雖然 JavaScript 最初是一種基於原型的語言，但它已經發展到接受 OOP 原則，特別是隨著 ES6 的引入和後續更新。

這篇文章深入研究了 JavaScript 中 OOP 的核心概念，探索如何實現它們來創建更健壯、可維護和可擴展的應用程式。

我們將了解 OOP 的四大支柱 - 繼承、抽象、封裝和多態 - 示範如何在 JavaScript 中應用每個原則。在此過程中，我們將研究現實世界的範例並討論每個概念的優缺點。

無論您是希望提高 JavaScript 中 OOP 技能的經驗豐富的開發人員，還是渴望掌握這些基本概念的新手，本指南都將為您在 JavaScript 專案中利用 OOP 的力量提供寶貴的見解。

1。繼承：

繼承允許一個類別從另一個類別繼承屬性和方法。它提高了程式碼的可重用性並建立了父類別和子類別之間的關係。

class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  getInfo() {
    return `${this.make} ${this.model}`;
  }

  start() {
    return "The vehicle is starting...";
  }
}

class Car extends Vehicle {
  constructor(make, model, doors) {
    super(make, model);
    this.doors = doors;
  }

  getCarInfo() {
    return `${this.getInfo()} with ${this.doors} doors`;
  }
}

const myCar = new Car("Toyota", "Corolla", 4);
console.log(myCar.getCarInfo()); // Output: Toyota Corolla with 4 doors
console.log(myCar.start()); // Output: The vehicle is starting...

登入後複製

在此範例中，Car 繼承自 Vehicle，取得對其屬性和方法的存取權。

優點：

程式碼可重複使用性：子類別繼承父類別的屬性和方法。
在物件之間建立清晰的層次結構。
允許方法重寫和擴充。

缺點：

可能導致父類和子類之間的緊密耦合。
深層繼承層次結構可能會變得複雜且難以維護。

2。抽象

抽象涉及隱藏複雜的實作細節並僅顯示物件的必要功能。在 JavaScript 中，我們可以使用抽象類別（儘管原生不支援）和介面來實作抽象。

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new TypeError("Cannot instantiate abstract class");
    }
  }

  calculateArea() {
    throw new Error("Method 'calculateArea()' must be implemented.");
  }
}

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

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

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }

  calculateArea() {
    return this.width * this.height;
  }
}

// const shape = new Shape(); // Throws TypeError
const circle = new Circle(5);
const rectangle = new Rectangle(4, 6);

console.log(circle.calculateArea()); // Output: 78.53981633974483
console.log(rectangle.calculateArea()); // Output: 24

登入後複製

在這個例子中，Shape作為一個抽象類，不能直接實例化。它定義了所有子類別都必須實作的公共介面calculateArea。這種抽象允許我們透過通用介面處理不同的形狀，而無需擔心它們的具體實現。

優點：

透過隱藏不必要的細節來簡化複雜的系統。
提高程式碼可維護性並減少重複。
允許專注於物件做什麼而不是它如何做。

缺點：

如果設計不仔細，可能會導致過度簡化。
在某些情況下可能會帶來效能開銷。

3。封裝

封裝是將資料和操作該資料的方法捆綁在一個單元（物件）內。在 JavaScript 中，我們可以使用閉包和符號來建立私有屬性和方法。

class BankAccount {
  #balance = 0;  // Private field

  constructor(owner) {
    this.owner = owner;
  }

  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
      return true;
    }
    return false;
  }

  withdraw(amount) {
    if (amount > 0 && this.#balance >= amount) {
      this.#balance -= amount;
      return true;
    }
    return false;
  }

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

const account = new BankAccount('John Doe');
account.deposit(1000);
console.log(account.getBalance()); // Output: 1000
console.log(account.#balance); // SyntaxError: Private field '#balance' must be declared in an enclosing class

登入後複製

在此範例中，#balance 是一個私有字段，無法從類別外部直接存取。

優點：

資料保護：防止未經授權存取內部資料。
模組化：將相關功能捆綁在一起。
更容易維護：內部實作的變更不會影響外部程式碼。

缺點：

由於缺乏真正的私有成員，在 JavaScript 中實作起來可能很複雜。
建立 getter 和 setter 時可能會導致冗長的程式碼。

4。多態性

多態允許不同類別的物件被視為公共超類別的物件。在 JavaScript 中，這可以透過方法重寫來實現。

class Animal {
  speak() {
    return "The animal makes a sound";
  }
}

class Dog extends Animal {
  speak() {
    return "The dog barks";
  }
}

class Cat extends Animal {
  speak() {
    return "The cat meows";
  }
}

const animals = [new Animal(), new Dog(), new Cat()];

animals.forEach(animal => {
  console.log(animal.speak());
});

// Output:
// The animal makes a sound
// The dog barks
// The cat meows

登入後複製

在這個例子中，每個類別都以不同的方式實作speak方法，展示了多態性。

優點：