Geerbte Methoden überschreiben

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

Method Overriding (Methoden-Überschreiben) tritt auf, wenn eine Kindklasse eine eigene Implementierung einer Methode bereitstellt, die sie von einer Elternklasse geerbt hat. Die Version der Kindklasse „überschreibt“ (ersetzt) die Version der Elternklasse.

Einfaches Beispiel:

Erstellen Sie eine Basisklasse mit einer Methode:

class Vehicle {
  start() {
    return "Vehicle starting...";
  }
}

Erstellen Sie eine Kind-Klasse, die die Eltern-Klasse erweitert:

class Car extends Vehicle {
  // Dies ÜBERSCHREIBT die start()-Methode von Vehicle
  start() {
    return "Car engine roaring to life!";
  }
}

Verwenden Sie die Klassen:

const vehicle = new Vehicle();
const car = new Car();

console.log(vehicle.start());      // "Vehicle starting..." (Original)
console.log(car.start());          // "Car engine roaring to life!" (überschrieben)

Wichtige Regeln für das Überschreiben:

Gleicher Methodenname wie beim Parent

Gleiche oder kompatible Parameter

Die Version des Kind-Objekts wird aufgerufen bei Kind-Objekten

Keine speziellen Schlüsselwörter erforderlich – definieren Sie einfach die Methode

Aufgabe

Dir ist eine Elternklasse Shape und eine Kindklasse Circle gegeben. Die Elternklasse verfügt über eine Methode calculateArea(), die 0 zurückgibt.

Deine Aufgabe ist es, die Methode calculateArea() in der Klasse Circle zu überschreiben, um den tatsächlichen Flächeninhalt eines Kreises zu berechnen.

Die Formel für den Kreisinhalt lautet: π × radius²
In JavaScript: Math.PI * this.radius * this.radius

Spickzettel

Methodenüberschreibung (Method Overriding) tritt auf, wenn eine untergeordnete Klasse ihre eigene Implementierung einer Methode bereitstellt, die von einer übergeordneten Klasse geerbt wurde. Die Version der untergeordneten Klasse ersetzt die Version der übergeordneten Klasse.

Beispiel:

class Vehicle {
  start() {
    return "Vehicle starting...";
  }
}

class Car extends Vehicle {
  // Überschreibt die start()-Methode von Vehicle
  start() {
    return "Car engine roaring to life!";
  }
}

const vehicle = new Vehicle();
const car = new Car();

console.log(vehicle.start());  // "Vehicle starting..."
console.log(car.start());      // "Car engine roaring to life!"

Wichtige Regeln:

Verwenden Sie den gleichen Methodennamen wie die übergeordnete Klasse
Verwenden Sie gleiche oder kompatible Parameter
Die Version der untergeordneten Klasse wird aufgerufen bei Objekten der untergeordneten Klasse
Keine speziellen Schlüsselwörter erforderlich – definieren Sie einfach die Methode in der untergeordneten Klasse

Probier es selbst

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

// Teste deine Implementierung
const myCircle = new Circle(5);
console.log(myCircle.calculateArea());