JavaScript-abstrakte Klasse

1. JavaScript-abstrakte Klasse
2. Erweitern Sie die abstrakte Klasse mit konkreten Klassen
3. Abschluss

Bei der Arbeit mit abstrakten JavaScript-Klassen sollten zwei Hauptkonzepte berücksichtigt werden: Abstraktion und Vererbung.

Durch Abstraktion wird Sicherheit ermöglicht, indem bestimmte Details ausgeblendet und nur die wesentlichen Informationen eines Objekts angezeigt werden, während die Vererbung Eigenschaften von einer anderen Klasse übernimmt und eine Eltern-Kind-Beziehung zwischen ihnen herstellt.

JavaScript-abstrakte Klasse

Eine abstrakte Klasse ist eine Klasse, die eine oder mehrere abstrakte Methoden enthält, aber nicht instanziiert werden kann. Die abstrakten Klassen können nicht instanziiert werden, können aber mithilfe von Methoden erweitert werden.

Darüber hinaus müssen abstrakte Klassen geerbt werden, was konkrete Klassen oder Unterklassen erfordert, um die abstrakte Klasse mit den darin deklarierten Methoden zu erweitern.

Abstrakte Methoden sind Methoden, die nur deklariert werden können, aber keine Implementierung haben.

Zuerst können wir eine abstrakte Klasse definieren und darin einen Konstruktor erstellen. Danach müssen wir die Funktionen beim Erweitern der abstrakten Klasse definieren.

Für dieses Beispiel haben wir Obst als abstrakten Klassennamen definiert und darin zwei Methoden erstellt: color(), um die Farbe der Frucht anzuzeigen, und eat(), um herauszufinden, ob die Frucht verzehrt wurde oder nicht.

Da alle Früchte, die wir hier als Beispiel genommen haben, verzehrt werden können, haben wir die Methode implementiert, sie als Essen innerhalb der abstrakten Klasse anzuzeigen. Aber wenn wir jede konkrete Klasse definieren, müssen wir die Methode color() für jede von ihnen implementieren.

class Fruit {
  constructor() {
    if (this.constructor == Fruit) {
      throw new Error('Abstract classes can\'t be instantiated.');
    }
  }

  color() {
    throw new Error('Method \'color()\' must be implemented.');
  }

  eat() {
    console.log('eating');
  }
}

Erweitern Sie die abstrakte Klasse mit konkreten Klassen

Nachdem wir die abstrakte Klasse erstellt haben, müssen wir konkrete Klassen erstellen. Beim Erstellen konkreter Klassen sollten wir dafür sorgen, dass sie alle Funktionen und das Verhalten der abstrakten Klasse erben.

Das folgende Snippet zeigt die konkreten Klassen Apple und Orange, die für die abstrakte Klasse erstellt wurden. Mit dem Schlüsselwort extends führt es die Vererbung durch.

class Apple extends Fruit {
  color() {
    console.log('Red');
  }
}

class Orange extends Fruit {
  color() {
    console.log('Orange');
  }
}

Durch die Definition abstrakter Klassen und konkreter Klassen wurden Abstraktion und Vererbung erreicht.

Der vollständige Code besteht aus der Kombination der obigen Codeschnipsel und dem vollständigen Code mit dem in den Abbildungen gezeigten Ergebnis. Hier werden die beiden konkreten Klassen als abstrakte Klasse bezeichnet, die die in den Methoden implementierte Ausgabe anzeigt.

Abgesehen davon, wenn der Konstruktor den gleichen Namen wie die abstrakte Klasse hat, wirft er einen Fehler. Aber beim Instanziieren mit den konkreten Klassen funktioniert es einwandfrei.

Code:

// Abstract Class 'Fruit'.
class Fruit {
  constructor() {
    if (this.constructor == Fruit) {
      throw new Error('Abstract classes can\'t be instantiated.');
    }
  }
  // Method 'color'
  color() {
    throw new Error('Method \'color()\' must be implemented.');
  }
  // Method 'eat'
  eat() {
    console.log('eating');
  }
}

// Concrete class 'Apple'
class Apple extends Fruit {
  color() {
    console.log('Red');
  }
}

// Concrete class 'Orange'
class Orange extends Fruit {
  color() {
    console.log('Orange');
  }
}
// Calling the classes
new Apple().eat();
new Orange().eat();
new Apple().color();
new Orange().color();

Ausgang:

Sogar die konkrete Klasse Apple hat die Methode color() in sich implementiert, banana() jedoch nicht. Daher erbt die konkrete Klasse banana() nur die Eigenschaften der abstrakten Klasse.

Wenn also die Methode color() aufruft, wirft die Banane einen Fehler, anstatt die Farbe zu drucken.

Das folgende Code-Snippet veranschaulicht das Vererbungskonzept sehr gut.

// Abstract class 'Fruit'
class Fruit {
  constructor() {
    if (this.constructor == Fruit) {
      throw new Error('Abstract classes can\'t be instantiated.');
    }
  }

  // Method 'color'
  color() {
    throw new Error('Method \'color()\' must be implemented.');
  }

  // Method 'eat'
  eat() {
    console.log('eating');
  }
}

// Concrete class 'Apple'
class Apple extends Fruit {
  color() {
    console.log('Red');
  }
}

// Concrete class 'Banana'
class Banana extends Fruit {}

// Calling the classes
new Apple().eat();
new Banana().eat();
new Apple().color();
new Banana().color();

Ausgang:

Abgesehen davon löst das Erstellen einer Instanz auch einen Fehler aus. Da abstrakte Klassen nicht instanziiert werden können, können wir sie nicht aufrufen.

Code:

// Abstract class 'Fruit'
class Fruit {
  constructor() {
    if (this.constructor == Fruit) {
      throw new Error('Abstract classes can\'t be instantiated.');
    }
  }

  // Method 'color'
  color() {
    throw new Error('Method \'color()\' must be implemented.');
  }

  // Method 'eat'
  eat() {
    console.log('eating');
  }
}
// Concrete class 'Apple'
class Apple extends Fruit {
  color() {
    console.log('Red');
  }
}
// Calling the class
new Fruit();

Ausgang:

Abschluss

Insgesamt verbessert das Vorhandensein dieser Abstraktionsfunktion in JavaScript und anderen OOP-Sprachen die Verständlichkeit und Wartbarkeit des Codes für den Entwickler und den Leser und reduziert die Codeduplizierung.