探索 JavaScript 中的物件導(dǎo)向程式設(shè)計(jì) (OOP)

日期：2024 年 12 月 17 日

物件導(dǎo)向程式設(shè)計(jì)（OOP）是一種使用物件來建?，F(xiàn)實(shí)世界實(shí)體的範(fàn)例。 JavaScript 是一種多功能程式語言，透過其原型、ES6 類別和現(xiàn)代增強(qiáng)功能為 OOP 提供了強(qiáng)大的支援。今天，我們將深入探討 JavaScript 中 OOP 的原理和特性。

---

JavaScript 中 OOP 的核心概念

1.對象

物件是 OOP 的構(gòu)建塊。在 JavaScript 中，物件是鍵值對的集合。

範(fàn)例：建立物件

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)建物件的藍(lán)圖。它們封裝了資料和行為。 JavaScript 在 ES6 中引入了 class 關(guān)鍵字。

範(fàn)例：建立一個類別

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 使用公有、私有和受保護(hù)的成員來實(shí)現(xiàn)這一點(diǎn)。

私人領(lǐng)域

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

範(fà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 關(guān)鍵字從另一個類別繼承屬性和方法。

範(fàn)例：繼承

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)允許子類別重寫父類別的方法以提供特定的實(shí)作。

範(fà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.抽象

抽象重點(diǎn)在於僅公開基本細(xì)節(jié)，同時隱藏實(shí)作複雜性。雖然 JavaScript 本身沒有抽象類，但您可以模擬它們。

範(fàn)例：模擬抽象

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 是一種基於原型的語言。每個物件都有一個到另一個物件的內(nèi)部鏈接，稱為其原型。

範(fàn)例：原型鏈

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

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

---

8.物件組合與繼承

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

範(fàn)例：構(gòu)圖

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.

---

物件導(dǎo)向程式設(shè)計(jì)的關(guān)鍵原則

1. DRY（不要重複）：透過類別和繼承重用程式碼。
2. 堅(jiān)實(shí)的原則：遵循編寫可擴(kuò)展和可維護(hù)的 OOP 程式碼的最佳實(shí)踐。

---

現(xiàn)實(shí)範(fà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 步：擴(kuò)充功能

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 步：建立實(shí)例

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

---

練習(xí)任務(wù)

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

---

結(jié)論

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

明天的主題：我們將探索 JavaScript 中的非同步程式設(shè)計(jì)，深入研究回呼、promise 和 async/await。請繼續(xù)關(guān)注！

以上是探索 JavaScript 中的物件導(dǎo)向程式設(shè)計(jì) (OOP)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！