理解 JavaScript 中的類別和繼承-js教程-PHP中文網

理解 JavaScript 中的類別和繼承

DDD

發布： 2024-12-22 17:37:11

原創

298 人瀏覽過

Understanding Classes and Inheritance in JavaScript

JavaScript 中的類別和繼承

JavaScript 類別提供了一種處理物件導向程式設計 (OOP) 概念（例如繼承、封裝和多態性）的現代方法。在本指南中，我們將探討如何建立類別、繼承在 JavaScript 中如何運作，以及如何擴充類別以建立更複雜的物件。

1. JavaScript 中的類別

在 ES6 中，JavaScript 引入了更清晰、更直覺的語法，用於使用 class 關鍵字建立物件。

定義類別的語法：

class ClassName {
  constructor() {
    // Initialization code
  }
  methodName() {
    // Method code
  }
}

登入後複製

基本類別的範例：

class Animal {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

const dog = new Animal('Buddy', 'Dog');
dog.speak();  // Output: Buddy makes a sound.

登入後複製

要點：

建構函數方法：建構函數方法是一個特殊函數，用於初始化從類別建立的物件。
實例方法：類別內部定義的函數是實例方法，可以在類別的實例上呼叫。

2. JavaScript 中的繼承

繼承允許一個類別繼承另一個類別的屬性和方法。在 JavaScript 中，這可以使用 extends 關鍵字來實現。

繼承語法：

class ChildClass extends ParentClass {
  constructor() {
    super(); // Calls the parent class constructor
    // Additional initialization code for child class
  }
}

登入後複製

繼承範例：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Call the parent class constructor
    this.breed = breed;
  }
  speak() {
    console.log(`${this.name}, the ${this.breed}, barks.`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak();  // Output: Buddy, the Golden Retriever, barks.

登入後複製

要點：

super()：super關鍵字呼叫父類別的建構子來初始化繼承的屬性。
重寫方法：子類別可以重寫父類別的方法，如上面的speak()方法所示。

3.繼承與方法重寫

在 JavaScript 中，當子類別重寫父類別的方法時，將使用該方法的子類別版本。這稱為方法重寫。

方法重寫範例：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Cat extends Animal {
  speak() {
    console.log(`${this.name} meows.`);
  }
}

const cat = new Cat('Whiskers');
cat.speak();  // Output: Whiskers meows.

登入後複製

要點：

當子類別提供自己的方法實作時，它會覆寫父類別方法。
子類別仍然可以使用 super.method() 呼叫父類別方法。

4.多重繼承（不直接支持）

JavaScript不直接支援多重繼承，這表示一個類別不能同時從多個類別繼承。但是，您可以透過使用 mixins 來解決此限制。

Mixin 的範例：

class ClassName {
  constructor() {
    // Initialization code
  }
  methodName() {
    // Method code
  }
}

登入後複製

要點：

Mixins 是一種在不使用繼承的情況下為類別新增功能的方法。
您可以使用 Object.assign() 將屬性和方法從一個物件「混合」到另一個物件中。

5.靜態方法與屬性

靜態方法和屬性屬於類別本身而不是類別的實例。他們在課堂上直接被召喚。

靜態方法範例：

class Animal {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

const dog = new Animal('Buddy', 'Dog');
dog.speak();  // Output: Buddy makes a sound.

登入後複製

要點：

靜態方法對於不需要特定於實例的資料的實用函數很有用。

6. Getter 和 Setter

取得器和設定器可讓您定義用於取得和設定物件屬性的特殊方法。這些通常用於封裝物件的狀態。

Getter 和 Setter 的範例：

class ChildClass extends ParentClass {
  constructor() {
    super(); // Calls the parent class constructor
    // Additional initialization code for child class
  }
}

登入後複製