Vererbung durch Prototypen

4.1 Vererbung — das ist einfach

Vererbung ist ein grundlegendes Konzept der objektorientierten Programmierung (OOP), das es einer Klasse (genannt Kind- oder Unterklasse) erlaubt, Felder und Methoden von einer anderen Klasse (genannt Eltern- oder Superklasse) zu erben.

Dieser Ansatz ermöglicht es, allgemeinere Klassen zu erstellen und Code wiederzuverwenden, was die Organisation und Wartbarkeit des Codes verbessert.

Warum braucht man Vererbung?

Angenommen, du musst Code schreiben und entscheidest, dies in Form einer Klasse zu tun. Dann erfährst du, dass in deinem Projekt bereits eine Klasse existiert, die fast alles tut, was du brauchst. Du könntest einfach den Code dieser Klasse kopieren und ihn nach Belieben verwenden.

Oder du kannst „quasi kopieren“. Du kannst diese Klasse als Elternklasse deiner Klasse deklarieren, und dann wird JavaScript deinem Klassenverhalten das des Elternklassens hinzufügen.

Stell dir vor, du bist die Natur und möchtest einen Hund erschaffen. Was wird schneller gehen: Einen Hund aus einer Bakterie in Milliarden Jahren zu erschaffen oder einen Wolf in 200.000 Jahren zu domestizieren?

4.2 Konzept der Vererbung durch Prototypen

Vererbung durch Prototypen in JavaScript ist einer der Hauptmechanismen, der Objekten erlaubt, Eigenschaften und Methoden von anderen Objekten zu erben. Dies ermöglicht es, komplexe Objekt-Hierarchien zu erstellen und Code wiederzuverwenden.

Jedes Objekt in JavaScript hat eine versteckte Eigenschaft [[Prototype]], die auf seinen Prototyp verweist. Prototypen werden zur Implementierung der Vererbung verwendet, was Objekten erlaubt, Eigenschaften und Methoden von anderen Objekten zu erben.

Beispiel einfacher Vererbung

Schritt 1: Erstellen des Basisobjekts

    
      const animal = {
        eat() {
          console.log('Eating...');
        },

        sleep() {
          console.log('Sleeping...');
        }
      };
    
  

Schritt 2: Erstellen des Nachfolgeobjekts

    
      const dog = Object.create(animal);

      dog.bark = function() {
        console.log('Barking...');
      };
    
  

Schritt 3: Verwenden von geerbten Eigenschaften und Methoden

    
      dog.eat();   // Ausgabe: Eating...
      dog.sleep(); // Ausgabe: Sleeping...
      dog.bark();  // Ausgabe: Barking...
    
  

In diesem Beispiel erbt das Objekt dog die Methoden eat() und sleep() vom Objekt animal und fügt seine eigene Methode bark() hinzu.

4.3 Tiefe Vererbung durch Prototypen

Prototypen-Kette

In JavaScript kann Vererbung komplexer sein, wenn Objekte voneinander erben und eine Prototypen-Kette bilden.

Beispiel für eine Prototypen-Kette

In diesem Beispiel erbt das Objekt dog vom mammal, das wiederum vom animal erbt. Dies erstellt eine Prototypen-Kette, bei der dog Zugriff auf alle Methoden von mammal und animal hat.

    
      const animal = {
        eat() {
          console.log('Eating...');
        }
      };

      const mammal = Object.create(animal);

      mammal.walk = function() {
        console.log('Walking...');
      };

      const dog = Object.create(mammal);
      dog.bark = function() {
        console.log('Barking...');
      };

      dog.eat();   // Ausgabe: Eating...
      dog.walk();  // Ausgabe: Walking...
      dog.bark();  // Ausgabe: Barking...
    
  

Überprüfung der Prototypen-Kette

Die Methode isPrototypeOf() erlaubt es zu überprüfen, ob ein Objekt das Prototyp eines anderen Objekts ist.

Beispiel:

    
      console.log(animal.isPrototypeOf(mammal)); // Ausgabe: true
      console.log(mammal.isPrototypeOf(dog));    // Ausgabe: true
      console.log(animal.isPrototypeOf(dog));    // Ausgabe: true
    
  

4.4 Methoden überschreiben

Vererbung durch Prototypen erlaubt nicht nur das Hinzufügen neuer Methoden, sondern auch das Überschreiben bestehender Methoden.

Beispiel für das Überschreiben von Methoden

In diesem Beispiel überschreibt die Methode speak() des Objekts dog die Methode speak() des Objekts animal:

    
      const animal = {
        speak() {
          console.log('Animal speaks');
        }
      };

      const dog = Object.create(animal);
      dog.speak = function() {
        console.log('Dog barks');
      };

      animal.speak(); // Ausgabe: Animal speaks
      dog.speak();    // Ausgabe: Dog barks
    
  

Aufruf der Methode des Elternobjekts

Um die Methode des Elternobjekts in JavaScript aufzurufen, kann die Methode call() oder apply() verwendet werden.

Beispiel:

    
      const animal = {
        speak() {
          console.log('Animal speaks');
        }
      };

      const dog = Object.create(animal);
      dog.speak = function() {
        animal.speak.call(this);
        console.log('Dog barks');
      };

      dog.speak();

      // Ausgabe:
      // Animal speaks
      // Dog barks
    
  

4.5 Fortgeschrittene Nutzung der Prototypen-Vererbung

Erweiterung eingebauter Objekte

Du kannst eingebaute Objekte in JavaScript erweitern, indem du Methoden zu ihren Prototypen hinzufügst.

Beispiel:

    
      Array.prototype.sum = function() {
        return this.reduce((acc, value) => acc + value, 0);
      };

      const numbers = [1, 2, 3, 4, 5];

      console.log(numbers.sum()); // Ausgabe: 15
    
  

Erstellung von mehrstufigen Hierarchien

Du kannst komplexere mehrstufige Objekt-Hierarchien mit Prototypen-Vererbung erstellen.

Beispiel:

    
      const livingBeing = {
        breathe() {
          console.log('Breathing...');
        }
      };

      const animal = Object.create(livingBeing);
      animal.eat = function() {
        console.log('Eating...');
      };

      const mammal = Object.create(animal);
      mammal.walk = function() {
        console.log('Walking...');
      };

      const dog = Object.create(mammal);
      dog.bark = function() {
        console.log('Barking...');
      };

      dog.breathe(); // Ausgabe: Breathing...
      dog.eat();     // Ausgabe: Eating...
      dog.walk();    // Ausgabe: Walking...
      dog.bark();    // Ausgabe: Barking...