Sobes.tech
Middle

Was sind Prototypen in JavaScript?

sobes.tech KI

Antwort von AI

In JavaScript können Objekte Eigenschaften und Methoden von anderen Objekten durch das Prototypenmechanismus erben. Jedes Objekt in JavaScript hat eine interne versteckte Eigenschaft [[Prototype]], die auf ein anderes Objekt verweist, das sein Prototyp ist. Wenn auf eine Eigenschaft oder Methode eines Objekts zugegriffen wird, sucht die JavaScript-Engine zunächst im Objekt selbst. Wenn sie nicht gefunden wird, wird auf die Eigenschaft [[Prototype]] zugegriffen und im Prototyp gesucht. Dieser Vorgang wiederholt sich entlang der Prototypenkette, bis die Eigenschaft gefunden wird oder null erreicht ist (Ende der Kette).

Hauptkonzepte:

  • Prototypkette: Abfolge von Objekten, die durch die Eigenschaft [[Prototype]] verbunden sind.
  • Vererbung: Objekte erben Eigenschaften und Methoden ihrer Prototypen.
  • __proto__: Historisch verwendete (obwohl nicht standardisierte) Eigenschaft zum Zugriff auf [[Prototype]]. Heutzutage wird die Verwendung von Object.getPrototypeOf() bevorzugt.
  • prototype: Eigenschaft des Konstruktors, auf die [[Prototype]] in Instanzen verweist, die mit diesem Konstruktor erstellt wurden.

Beispiel mit Konstruktor und Prototyp:

// Konstruktor
function Person(name, age) {
  this.name = name;
  this.age = age;
}

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

// Instanz erstellen
const person1 = new Person("Alice", 30);

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

// Zugriff auf den Prototyp der Instanz
console.log(Object.getPrototypeOf(person1) === Person.prototype); // Ausgabe: true

In diesem Beispiel:

  • Person ist eine Konstruktorfunktion.
  • Person.prototype ist das Objekt, das als Prototyp für alle mit new Person() erstellten Instanzen dient.
  • sayHello ist eine Methode, die dem Prototyp hinzugefügt wurde. Alle Person-Instanzen erben diese Methode.
  • Wenn person1.sayHello() aufgerufen wird, sucht die JavaScript-Engine sayHello in person1. Falls nicht gefunden, wird auf den [[Prototype]] von person1 (der Person.prototype entspricht) zugegriffen und die Methode dort gefunden.

Prototypen ermöglichen eine effiziente Speichernutzung, da Methoden und gemeinsame Eigenschaften im Prototyp gespeichert werden, anstatt in jeder Objekterstellung dupliziert zu werden.