Method-Chaining-Pattern

Teil des Abschnitts Objektorientierte Programmierung der JavaScript-Journey von Coddy — Lektion 16 von 56.

Methodenverkettung (Method Chaining) ist ein Programmiermuster, das es Ihnen ermöglicht, mehrere Methoden auf demselben Objekt in einer einzigen Anweisung aufzurufen. Jede Methode gibt das Objekt selbst zurück (this), was es Ihnen ermöglicht, die nächste Methode in derselben Zeile aufzurufen.

Erstellen Sie ein einfaches Counter-Objekt:

const counter = {
  count: 0,
  
  increment() {
    this.count++;
    return this;
  },
  
  decrement() {
    this.count--;
    return this;
  },
  
  getValue() {
    return this.count;
  }
};

Jetzt können Sie Methoden miteinander verketten:

// Mehrere Operationen verketten
counter.increment().increment().decrement();

// Der Zählerstand ist nun 1
console.log(counter.getValue()); // Ausgabe: 1

Der Schlüssel zum Method Chaining ist die Rückgabe von this aus jeder Methode, die verkettbar sein soll.

Aufgabe

Sie erhalten ein calculator-Objekt, das bereits über die Methoden add() und subtract() verfügt. Ihre Aufgabe ist es, die Methoden multiply und divide hinzuzufügen, die this zurückgeben, um Chaining zu ermöglichen.

Spickzettel

Methodenverkettung (Method Chaining) ermöglicht es Ihnen, mehrere Methoden auf demselben Objekt in einer einzigen Anweisung aufzurufen. Jede Methode gibt das Objekt selbst zurück (this), wodurch die nächste Methode in derselben Zeile aufgerufen werden kann.

Um Methodenverkettung zu ermöglichen, geben Sie this aus jeder Methode zurück:

const counter = {
  count: 0,
  
  increment() {
    this.count++;
    return this;
  },
  
  decrement() {
    this.count--;
    return this;
  },
  
  getValue() {
    return this.count;
  }
};

Verketten Sie mehrere Methoden miteinander:

counter.increment().increment().decrement();
console.log(counter.getValue()); // Output: 1

Probier es selbst

import { calculator } from './calculator.js';

// Testcode - nicht verändern
const result1 = calculator.add(10).multiply(2).getValue();
console.log(result1); // Sollte 20 ausgeben

// Zurücksetzen für den zweiten Test
calculator.value = 0;
const result2 = calculator.add(20).divide(4).subtract(1).getValue();
console.log(result2); // Sollte 4 ausgeben