Was ist Prototypenvererbung in JavaScript?

In JavaScript erben Objekte Eigenschaften und Methoden von ihren Prototypen. Der Prototyp eines jeden Objekts ist ein anderes Objekt, dessen Eigenschaften und Methoden über die Prototyp-Kette zugänglich sind.

Beim Zugriff auf eine Eigenschaft eines Objekts sucht JavaScript zunächst direkt im Objekt selbst. Wenn die Eigenschaft nicht gefunden wird, wird die Suche im Prototyp dieses Objekts fortgesetzt, dann im Prototyp des Prototyps und so weiter, bis die Eigenschaft gefunden wird oder das Ende der Kette (null) erreicht ist.

Prototypenbasierte Vererbung unterscheidet sich von der klassischen Vererbung (wie in Java oder C++), bei der Objekte aus Klassen erstellt werden, die ihre Struktur und ihr Verhalten beschreiben. In JavaScript sind Klassen, die in ES6 eingeführt wurden, eine syntaktische Zucker-Schicht über der prototypbasierten Vererbung.

Hauptaspekte:

• __proto__: Innere Eigenschaft des Objekts, die auf seinen Prototyp verweist.
• prototype: Eigenschaft des Konstruktors (Funktion, die als Konstruktor verwendet wird), die auf das Objekt verweist, das als Prototyp für die erstellten Instanzen dient.
• Object.getPrototypeOf(obj): Standardmethode, um den Prototyp eines Objekts zu erhalten.
• Object.setPrototypeOf(obj, proto): Standardmethode, um den Prototyp eines Objekts festzulegen.

Beispiel:

// Konstruktorfunktion
function Animal(name) {
  this.name = name;
}

// Methode zum Prototyp hinzufügen
Animal.prototype.sayHello = function() {
  console.log(`Hallo, mein Name ist ${this.name}`);
};

// Instanz erstellen
const dog = new Animal("Buddy");

// Methode aus dem Prototyp aufrufen
dog.sayHello(); // Ausgabe: Hallo, mein Name ist Buddy

// Der Prototyp von dog ist Animal.prototype
console.log(Object.getPrototypeOf(dog) === Animal.prototype); // true

// Der Prototyp von Animal.prototype ist Object.prototype
console.log(Object.getPrototypeOf(Animal.prototype) === Object.prototype); // true

// Das Ende der Prototyp-Kette ist null
console.log(Object.getPrototypeOf(Object.prototype) === null); // true

Vergleich mit klassischer Vererbung (unter Verwendung von ES6-Klassen):

class Animal {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hallo, mein Name ist ${this.name}`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Aufruf des Konstruktors der Elternklasse
    this.breed = breed;
  }

  bark() {
    console.log("Woof!");
  }
}

const buddy = new Dog("Buddy", "Golden Retriever");
buddy.sayHello(); // Ausgabe: Hallo, mein Name ist Buddy (erbt von Animal)
buddy.bark(); // Ausgabe: Woof! (Methode von Dog)

// Klassen in ES6 sind syntaktischer Zucker über Prototypen
console.log(Object.getPrototypeOf(Dog) === Animal); // true (Vererbung von Klassen)
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true (Vererbung von Methoden über Prototypen)
console.log(Object.getPrototypeOf(buddy) === Dog.prototype); // true (Instanz erbt vom Prototyp der Klasse)

Prototypenbasierte Vererbung ist ein zentrales Konzept in JavaScript, dessen Verständnis für eine effektive Arbeit mit der Sprache unerlässlich ist.