Polymorphie in JavaScript: Methoden überschreiben mit Beispielen

Problem

Das Gehalt mit einem if für jede Art

Die Firma hat normale Mitarbeiter, Manager mit Bonus und Praktikanten in Teilzeit. Jemand hat eine Klasse Employee mit einem Feld „Rolle“ gemacht, und das Gehalt wird so berechnet:

function monthlyPay(e) {
  if (e.role === "Manager") {
    return e.salary + e.bonus;
  } else if (e.role === "Praktikant") {
    return Math.trunc(e.salary / 2);
  }
  return e.salary;
}

Es funktioniert. Aber dann kommt eine neue Art von Mitarbeiter dazu: eine Honorarkraft. Du brauchst ein neues else if hier, und in der Funktion für die Steuern, und in der Funktion für den Lohnzettel, und überall, wo jemand nach der Rolle gefragt hat. Und jeder Mitarbeiter trägt ein Feld für den Bonus mit sich, obwohl nur Manager einen Bonus bekommen.

Der Code für den Manager ist über das ganze Programm verstreut, statt im Manager zu stehen.

Die Idee

Jede Klasse entscheidet selbst

Mit der Vererbung aus der letzten Lektion sind Manager und Intern eigene Klassen. Lass jede selbst sagen, wie hoch ihr Monatsgehalt ist. Die Basisklasse hat eine allgemeine Version, und die Unterklasse schreibt ihre eigene Version derselben Methode:

class Employee {
  // ... #name, #salary, der Konstruktor und die Getter

  monthlyPay() {
    return this.#salary;
  }
}

class Manager extends Employee {
  // ... #bonus und der Konstruktor

  monthlyPay() {
    return this.salary + this.#bonus;
  }
}

const ivan = new Employee("Ivan", 2000);
const maria = new Manager("Maria", 3000, 500);
console.log(ivan.monthlyPay());
console.log(maria.monthlyPay());

2000
3500

Das nennt man Überschreiben einer Methode (override). Die Unterklasse schreibt eine Methode mit demselben Namen. Für Objekte der Unterklasse ersetzt ihre Version die der Basisklasse.

Mehr brauchst du nicht: Es gibt kein Schlüsselwort und keine Prüfung. Jede Methode lässt sich überschreiben. JavaScript schaut nur auf den Namen, nicht auf die Parameter. Das ist bequem, aber es bedeutet, dass nichts einen Fehler im Namen oder in den Parametern aufhält. Gleich siehst du, was dann passiert.

Genauer, für Neugierige

In JavaScript gibt es keine Möglichkeit, das Überschreiben einer Methode zu verbieten.
TypeScript, JavaScript mit Typen, hat ein Schlüsselwort override und prüft es, bevor das Programm startet. Reines JavaScript hat kein solches Schlüsselwort.

Probier es aus

Was hat sich geändert?

Die Praktikantin überschreibt nur die Methode für das Monatsgehalt:

Was gibt das Programm aus?

class Intern extends Employee {
  monthlyPay() {
    return Math.trunc(this.salary / 2);
  }
}

const ana = new Intern("Ana", 1600);
console.log(ana.monthlyPay());
console.log(ana.salary);

Antwort

1600
1600

800
800

800
1600

Die Idee

Ein Array für alle

Ein Manager ist ein Mitarbeiter. Also können Mitarbeiter, Manager und Praktikanten in einem Array stehen und in einer Schleife behandelt werden:

const staff = [
  new Employee("Ivan", 2000),
  new Manager("Maria", 3000, 500),
  new Intern("Ana", 1600),
];
for (const e of staff) {
  console.log(`${e.name}: ${e.monthlyPay()} €`);
}

Ivan: 2000 €
Maria: 3500 €
Ana: 800 €

Die Schleife ruft dieselbe Methode auf, e.monthlyPay(), und das Ergebnis ist verschieden. Es läuft die Version des Objekts, nicht die des Typs der Variable. Das nennt man Polymorphie: griechisch für „Vielgestaltigkeit“. Ein Aufruf, und jedes Objekt antwortet auf seine Weise.

Jetzt ist eine neue Art von Mitarbeiter eine neue Klasse mit eigenem monthlyPay(). Die Schleife und der Rest des Programms bleiben, wie sie sind. Es gibt kein if auf die Rolle und kein Bonusfeld bei Mitarbeitern, die keinen Bonus bekommen.

Die Variable e hat keinen Typ, also kannst du über sie schreiben, was du willst, auch e.bonus. Ist das Objekt ein Manager, funktioniert es. Ist es ein normaler Mitarbeiter, ist e.bonus einfach undefined, und das Programm läuft weiter, als wäre nichts gewesen. Wie du Objekte fragst, was sie können, steht in der Lektion „Typprüfungen“.

Sieh es dir an

Welche Methode läuft

const staff = [
  new Employee("Ivan", 2000),
  new Manager("Maria", 3000, 500),
  new Intern("Ana", 1600),
];
for (const e of staff) {
  console.log(`${e.name}: ${e.monthlyPay()} €`);
}

Schritt für Schritt, in Worten

Das Array enthält Objekte aus drei Klassen. In jedem Platz steht ein Pfeil.
e zeigt auf Ivan, einen einfachen Employee: Es läuft monthlyPay von Employee.
e zeigt auf Maria, einen Manager: Es läuft ihre eigene Methode, Gehalt plus Bonus.
e zeigt auf Ana, eine Praktikantin (Intern): Sie bekommt das halbe Gehalt.
Dieselbe Zeile, drei verschiedene Methoden. Es entscheidet das Objekt, auf das e zeigt.

Das Array enthält drei Pfeile. Jeder zeigt auf ein Objekt einer anderen Klasse. In jeder Runde zeigt e auf das nächste Objekt, und der Aufruf geht an die Methode dieses Objekts: zuerst in Employee, dann in Manager, dann in Intern.

Die Wahl fällt, während das Programm läuft. In jeder Runde sucht JavaScript monthlyPay zuerst in der Klasse des Objekts, dann in ihrer Basisklasse. Niemand prüft im Voraus, dass jedes Objekt so eine Methode hat. Hat eines keine, bricht das Programm in seiner Runde ab.

Probier es aus

Finde den Fehler

Das Programm ist dasselbe, aber die Praktikantin bekommt das volle Gehalt:

Ivan: 2000 €
Maria: 3500 €
Ana: 1600 €

Hier ist die Klasse Intern. In welcher Zeile ist der Fehler?

Wähle die Zeile mit dem Fehler.

Die Methode heißt monthlypay, mit kleinem „p“. Das ist eine neue Methode, kein Überschreiben von monthlyPay. Deshalb wird die Version der Basisklasse aufgerufen. JavaScript sagt nichts: Für JavaScript ist es einfach eine Methode mehr. So einen Ausrutscher bemerkst du nur an der Ausgabe.

Die Idee

Die Basisklasse ergänzen, nicht neu schreiben

Manchmal will die Unterklasse die Methode nicht ganz ersetzen, sondern nur etwas hinzufügen. Ein Manager wird wie ein Mitarbeiter beschrieben, plus der Bonus. Die Version der Basisklasse rufst du mit super.toString() auf:

toString() {
  return `${super.toString()}, Bonus ${this.#bonus} €`;
}

console.log(String(new Employee("Ivan", 2000)));
console.log(String(new Manager("Maria", 3000, 500)));

Ivan (2000 €)
Maria (3000 €), Bonus 500 €

Ändert Employee, wie es sich beschreibt, zieht der Manager von selbst mit.

Das ist auch das toString() aus dem Modul „Klassen und Objekte“. Dort hast du schon eine Methode überschrieben: die Version in Object.

Genauer, für Neugierige

super.method() kannst du aus jeder Methode der Unterklasse aufrufen, nicht nur aus der überschreibenden.

JavaScript vergleicht die Parameter nicht. Schreibst du monthlyPay(extra) in Manager, ist es trotzdem ein Überschreiben, und die Schleife, die e.monthlyPay() aufruft, liefert für den Manager NaN: extra ist undefined, und eine Zahl plus undefined ist keine Zahl. Deshalb nimmt die überschreibende Methode dieselben Parameter wie die der Basisklasse.

Probier es aus

Was fehlt?

Die Praktikantin wird wie ein Mitarbeiter beschrieben, plus das Wort „Praktikant“. Was steht in der Lücke?

class Intern extends Employee {
  toString() {
    return `${.toString()}, Praktikant`;
  }
}

Übung

Jeder auf seine Weise

Löse die Aufgaben in deinem Editor. Jede Aufgabe hat ein Array mit Objekten mehrerer Klassen und eine Schleife.

1. Tierheim. Eine Klasse Animal mit einem Namen und einer Methode makeSound(), die „irgendein Laut“ ausgibt. Dog und Cat überschreiben sie. Leg von allen dreien je eins in ein Array:

Gast: irgendein Laut
Rex: Wau!
Mieze: Miau, miau!

2. Die Studentin stellt sich vor. Student aus der letzten Lektion hat schon einen Notendurchschnitt. Überschreib introduce(), sodass auch der Notendurchschnitt genannt wird. Benutze super.introduce(); kopier die Zeile nicht aus Person.

Ich bin Georg, 45 Jahre alt.
Ich bin Elena, 19 Jahre alt.
Notendurchschnitt: 5.5

3. Party. Eine Klasse Performance mit einem Titel und einer Methode start(). DanceMove, BreakDanceMove (erbt von DanceMove, fügt eine Schwierigkeit hinzu) und Song überschreiben sie. Eine Klasse Party enthält ein Array von Auftritten und hat eine Methode startParty(), die alles der Reihe nach startet und am Ende sagt, dass die Party begonnen hat.

Wir tanzen moonwalk
Wir tanzen windmill
  Schwierigkeit 8 von 10
Wir singen 'Bohemian Rhapsody'
Es beginnt: Tombola
Die Party hat begonnen!

Weitere Aufgaben

Honorarkraft. Füg den Mitarbeitern einen Contractor hinzu, mit Stunden und einem Stundensatz. Sein Monatsgehalt ist Stunden × Satz. Berechne die Lohnsumme für Ivan, Maria, Ana und Peter (60 Stunden zu 25 €):

Lohnsumme: 7800 €

Lohnzettel. Gib Employee eine Methode payslip(), die den Text „Name: Gehalt €“ mit dem Monatsgehalt zurückgibt. Schreib sie nur in Employee. Warum funktioniert sie auch für den Manager und die Praktikantin richtig?

Test

Teste dich

1. const e = new Manager("Maria", 3000, 500); Welches monthlyPay läuft bei e.monthlyPay()?Das von Manager, weil das Objekt ein Manager istDas von Employee, weil Manager von Employee erbtBeide, nacheinander

2. const staff = [new Employee("Ivan", 2000), new Manager("Maria", 3000, 500)]; Was gibt console.log(staff[0].bonus) aus?0Das Programm bricht mit einem Fehler abundefined: Ein normaler Mitarbeiter hat keinen Bonus, und JavaScript hält nicht an

3. Woher weiß JavaScript, dass die Methode in der Unterklasse die der Basisklasse überschreibt?Am Namen: Eine Methode mit demselben Namen in der Unterklasse ersetzt die der BasisklasseMethoden lassen sich in JavaScript nicht überschreibenAm Schlüsselwort override

4. Was macht super.toString() im toString() der Unterklasse?Es erzeugt ein Objekt der BasisklasseEs ruft dieselbe Methode wieder auf, endlosEs ruft die Version der Basisklasse auf

5. Manager hat monthlyPay(extra), Employee dagegen keinen Parameter. Die Schleife ruft e.monthlyPay() für jeden Mitarbeiter auf. Was gibt sie für Maria aus?3000NaN: extra ist undefined, und eine Zahl plus undefined ist keine ZahlDas Programm startet nicht

Polymorphie

Cookies