Einführung in Prototypen

3.1 Konzept der Prototypen

Prototypen sind eines der wichtigsten Konzepte in JavaScript, das es Objekten ermöglicht, Eigenschaften und Methoden von anderen Objekten zu erben. Im Gegensatz zu vielen anderen Programmiersprachen, in denen Vererbung durch Klassen realisiert wird, basiert sie in JavaScript auf Prototypen. Jetzt schauen wir uns an, was Prototypen sind, wie sie funktionieren und wie man sie nutzen kann.

Ein Prototyp in JavaScript ist ein Objekt, von dem andere Objekte Eigenschaften und Methoden erben können. Jedes Objekt in JavaScript hat einen versteckten Verweis auf ein anderes Objekt - die versteckte Eigenschaft [[Prototype]], die auf seinen Prototyp verweist.

Dieser Prototyp kann seine eigenen Prototypen haben und so eine Prototypenkette (prototype chain) bilden. Eigenschaften und Methoden eines Objekts können über diese Kette vererbt werden. Dies ermöglicht es Objekten, Funktionalität zu teilen und Objekt-Hierarchien zu erstellen.

Eigenschaft proto

In JavaScript hat jedes Objekt die Eigenschaft __proto__, die auf seinen Prototyp verweist. Diese Eigenschaft wird verwendet, um Eigenschaften und Methoden zu suchen, wenn sie nicht im Objekt selbst gefunden werden.

In diesem Beispiel erbt das Objekt child die Methode greet() vom Objekt parent:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = {
        __proto__: parent
      };

      child.greet(); // Gibt aus: Hello from parent
    
  

3.2 Erstellen und Nutzen von Prototypen

1. Object.create()

Die Methode Object.create() ermöglicht es, ein neues Objekt mit einem angegebenen Prototyp zu erstellen.

Beispiel:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.greet(); // Gibt aus: Hello from parent
    
  

2. Hinzufügen von Eigenschaften und Methoden zu einem Prototypen

Eigenschaften und Methoden können zu einem Prototypen hinzugefügt werden, damit sie allen Objekten, die davon erben, zur Verfügung stehen.

In diesem Beispiel wird die Methode speak() dem Prototypen animal hinzugefügt und ist für das Objekt dog verfügbar:

    
      const animal = {
        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      };

      const dog = Object.create(animal);
      dog.name = 'Buddy';
      dog.speak(); // Gibt aus: Buddy makes a noise.
    
  

3. Ändern des Prototyps eines Objekts

Der Prototyp eines Objekts kann mit der Methode Object.setPrototypeOf() geändert werden.

In diesem Beispiel wird der Prototyp des Objekts duck von animal zu bird geändert:

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

      const bird = {
        fly() {
          console.log('Bird flies');
        }
      };

      const duck = {
        __proto__: animal,
        quack() {
          console.log('Duck quacks');
        }
      };

      Object.setPrototypeOf(duck, bird);
      duck.fly();   // Gibt aus: Bird flies
      duck.quack(); // Gibt aus: Duck quacks
    
  

3.3 Arbeiten mit Prototypen

1. Überprüfen des Prototyps eines Objekts

Die Methode Object.getPrototypeOf() ermöglicht es, den Prototyp eines Objekts zu erhalten.

Beispiel:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);

      console.log(Object.getPrototypeOf(child) === parent); // Gibt aus: true
    
  

2. Überprüfen der Zugehörigkeit eines Objekts zu einem Prototypen

Der Operator instanceof wird verwendet, um zu überprüfen, ob ein Objekt eine Instanz eines bestimmten Konstruktors oder Prototyps ist.

Beispiel:

    
      function Person(name) {
        this.name = name;
      }

      const john = new Person('John');

      console.log(john instanceof Person); // Gibt aus: true
    
  

3. Durchlaufen von Eigenschaften eines Objekts und seines Prototyps

Um Eigenschaften eines Objekts und seines Prototyps zu durchlaufen, kann die Schleife for...in verwendet werden, die alle aufzählbaren Eigenschaften auflistet.

Beispiel:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.name = 'Child';

      for (let key in child) {
        console.log(key);
      }

      // Gibt aus:
      // name
      // greet
    
  

Um nur eigene Eigenschaften eines Objekts zu durchlaufen, wird die Methode Object.keys() oder die Schleife for...of mit der Methode Object.entries() verwendet.

Beispiel:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.name = 'Child';

      console.log(Object.keys(child)); // Gibt aus: ['name']

      for (const [key, value] of Object.entries(child)) {
        console.log(key, value);
      }

      // Gibt aus:
      // name Child