Verwendung von super

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

Wenn Sie eine Methode überschreiben, können Sie mithilfe von super.methodName() weiterhin auf die Originalversion der Elternklasse zugreifen. Dies ermöglicht es Ihnen, das Verhalten der Elternklasse zu erweitern oder zu ändern, anstatt es vollständig zu ersetzen.

Erstellen Sie eine Basisklasse mit einer Methode:

class Animal {
  makeSound() {
    return "Generic animal sound";
  }
}

Erstellen Sie eine Kindklasse, die die Elternklasse erweitert:

class Dog extends Animal {
  makeSound() {
    // Zuerst die Methode der Elternklasse aufrufen
    const parentSound = super.makeSound();
    // Dann mit zusätzlicher Funktionalität erweitern
    return `${parentSound}, but also Woof!`;
  }
}

Erstellen Sie eine Instanz der Unterklasse:

const myDog = new Dog();
console.log(myDog.makeSound());
// Ausgabe: "Generic animal sound, but also Woof!"

Das Schlüsselwort super ermöglicht es Ihnen, die Methoden der Elternklasse aufzurufen, während Sie in der Kindklasse weiterhin Ihre eigene Funktionalität hinzufügen.

Aufgabe

Ihnen ist eine Shape-Klasse mit einer calculateArea()-Methode und eine Rectangle-Klasse, die diese erweitert, gegeben. Ihre Aufgabe ist es, die calculateArea()-Methode in Rectangle unter Verwendung von super zu überschreiben.

Ihre Aufgabe ist es, die calculateArea()-Methode in der Rectangle-Klasse zu vervollständigen, um:

Rufen Sie die calculateArea()-Methode der Elternklasse mit super auf und speichern Sie das Ergebnis
Berechnen Sie die tatsächliche Fläche des Rechtecks: width × height
Geben Sie einen kombinierten String zurück: Nachricht der Elternklasse + Fläche des Rechtecks. Beispiel: Calculating area... Rectangle area: 50

Spickzettel

Verwenden Sie super.methodName(), um beim Überschreiben auf die ursprüngliche Methode der Elternklasse zuzugreifen:

class Animal {
  makeSound() {
    return "Generic animal sound";
  }
}

class Dog extends Animal {
  makeSound() {
    const parentSound = super.makeSound();
    return `${parentSound}, but also Woof!`;
  }
}

const myDog = new Dog();
console.log(myDog.makeSound());
// Ausgabe: "Generic animal sound, but also Woof!"

Dies ermöglicht es Ihnen, die Funktionalität der Elternklasse zu erweitern, anstatt sie vollständig zu ersetzen.

Probier es selbst

import { Shape } from './shapes.js';
import { Rectangle } from './shapes.js';

// Testcode - nicht ändern
const rectangle = new Rectangle(5, 10);
console.log(rectangle.calculateArea()); // Erwartet: "Calculating area... Rectangle area: 50"