JavaScript - Vererbung

Hallo da draußen, zukünftige JavaScript-Zauberer! Heute machen wir uns auf eine aufregende Reise durch die magische Welt der Vererbung in JavaScript. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind; ich werde Ihr freundlicher Guide sein, und wir werden dieses Konzept Schritt für Schritt erkunden. Also, holen Sie sich Ihre virtuellen Zauberstäbe (Tastaturen), und tauchen wir ein!

Vererbung in JavaScript

Vererbung ist so, als würde man Familieneigenschaften weitergeben, aber in der Welt der Programmierung. Stellen Sie sich vor, Sie erstellen einen Stammbaum von Objekten, bei dem Kinder Eigenschaften und Methoden von ihren Eltern erben können. Cool, oder?

Lassen Sie mit einem einfachen Beispiel beginnen:

class Animal {
constructor(name) {
this.name = name;
}

speak() {
console.log(`${this.name} macht einen Sound.`);
}
}

class Dog extends Animal {
bark() {
console.log(`${this.name} bellt: Wuff wuff!`);
}
}

const myDog = new Dog("Buddy");
myDog.speak(); // Ausgabe: Buddy macht einen Sound.
myDog.bark();  // Ausgabe: Buddy bellt: Wuff wuff!

In diesem Beispiel erbt Dog von Animal. Das bedeutet, Dog erhält alle Eigenschaften und Methoden von Animal, plus seine eigene einzigartige Methode bark(). Es ist, als würde Buddy die Fähigkeit zu sprechen von allen Tieren erben, aber auch seine spezielle Bellen-Superkraft haben!

JavaScript-Einfachvererbung

Einfachvererbung ist, wenn eine Klasse nur von einer Elternklasse erbt. Es ist so, als hätte man einen super coolen Elternteil, von dem man alles lernen möchte.

Hier ist ein weiteres Beispiel:

class Vehicle {
constructor(brand) {
this.brand = brand;
}

start() {
console.log(`Starte den ${this.brand}.`);
}
}

class Car extends Vehicle {
honk() {
console.log(`${this.brand} Auto macht beep beep!`);
}
}

const myCar = new Car("Toyota");
myCar.start(); // Ausgabe: Starte den Toyota.
myCar.honk();  // Ausgabe: Toyota Auto macht beep beep!

Hier erbt Car von Vehicle. Es ist, als würde Ihr Auto das Starten von dem allgemeinen Konzept der Fahrzeuge erlernen, aber auch wissen, wie man klingelt, weil, na ja, es ein Auto ist!

JavaScript super()-Schlüsselwort

Nun sprechen wir über das super()-Schlüsselwort. Es ist wie ein respektvolles Nicken zu Ihren Eltern, das ihre Beiträge zu Ihrem tollen Dasein anerkennt.

class Animal {
constructor(name) {
this.name = name;
}
}

class Dog extends Animal {
constructor(name, breed) {
super(name); // Aufruf des Elternconstructors
this.breed = breed;
}

introduce() {
console.log(`Ich bin ${this.name}, ein ${this.breed} Hund.`);
}
}

const myDog = new Dog("Max", "Labrador");
myDog.introduce(); // Ausgabe: Ich bin Max, ein Labrador Hund.

Der Aufruf von super(name) im Dog-Constructor ist so, als würde man sagen: "Hey, Animal-Elternteil, kannst du mir den Namen einrichten?" Es ist eine Möglichkeit, die Konstruktionslogik der Elternklasse wiederzuverwenden.

JavaScript-Mehrzebenenvererbung

Mehrzebenenvererbung ist wie ein Familienstammbaum mit mehreren Generationen. Sehen wir uns ein Beispiel an:

class Animal {
constructor(name) {
this.name = name;
}

eat() {
console.log(`${this.name} ist am Essen.`);
}
}

class Dog extends Animal {
bark() {
console.log(`${this.name} sagt wuff!`);
}
}

class Labrador extends Dog {
swim() {
console.log(`${this.name} schwimmt.`);
}
}

const myDog = new Labrador("Charlie");
myDog.eat();  // Ausgabe: Charlie ist am Essen.
myDog.bark(); // Ausgabe: Charlie sagt wuff!
myDog.swim(); // Ausgabe: Charlie schwimmt.

Hier erbt Labrador von Dog, das wiederum von Animal erbt. Es ist, als würde Charlie der Labrador die Fähigkeit zu essen von allen Tieren, zu bellen von Hunden und seine eigene spezielle Schwimmfähigkeit erben.

JavaScript-Hierarchische Vererbung

Hierarchische Vererbung ist, wenn mehrere Klassen von einer einzigen Elternklasse erben. Es ist, als ob Geschwister Eigenschaften von demselben Elternteil erben.

class Vehicle {
constructor(brand) {
this.brand = brand;
}

start() {
console.log(`Starte den ${this.brand}.`);
}
}

class Car extends Vehicle {
drive() {
console.log(`Fahre das ${this.brand} Auto.`);
}
}

class Motorcycle extends Vehicle {
wheelie() {
console.log(`Mach einen Wheelie auf dem ${this.brand} Motorrad!`);
}
}

const myCar = new Car("Toyota");
const myBike = new Motorcycle("Harley");

myCar.start();    // Ausgabe: Starte den Toyota.
myCar.drive();    // Ausgabe: Fahre das Toyota Auto.

myBike.start();   // Ausgabe: Starte den Harley.
myBike.wheelie(); // Ausgabe: Mach einen Wheelie auf dem Harley Motorrad!

Sowohl Car als auch Motorcycle erben von Vehicle, aber sie haben jeweils ihre eigenen einzigartigen Methoden.

Vererbung von statischen Mitgliedern der Klasse

Statische Mitglieder gehören zur Klasse selbst und nicht zu den Instanzen. Aber sie können trotzdem vererbt werden! Sehen wir uns das an:

class MathOperations {
static PI = 3.14159;

static calculateCircleArea(radius) {
return this.PI * radius * radius;
}
}

class AdvancedMath extends MathOperations {
static calculateSphereVolume(radius) {
return (4/3) * this.PI * radius * radius * radius;
}
}

console.log(AdvancedMath.PI); // Ausgabe: 3.14159
console.log(AdvancedMath.calculateCircleArea(5)); // Ausgabe: 78.53975
console.log(AdvancedMath.calculateSphereVolume(3)); // Ausgabe: 113.09733

Hier erbt AdvancedMath die statische PI-Eigenschaft und die calculateCircleArea-Methode von MathOperations.

JavaScript-Prototypbasierte Vererbung

Bevor ES6-Klassen kamen, verwendete JavaScript prototypbasierte Vererbung. Es ist ein bisschen komplizierter, aber immer noch wichtig zu verstehen:

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

Animal.prototype.speak = function() {
console.log(`${this.name} macht einen Sound.`);
};

function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
console.log(`${this.name} bellt: Wuff wuff!`);
};

const myDog = new Dog("Rex");
myDog.speak(); // Ausgabe: Rex macht einen Sound.
myDog.bark();  // Ausgabe: Rex bellt: Wuff wuff!

Dies erreicht das gleiche Ergebnis wie unser erstes klassenbasiertes Beispiel, aber verwendet die ältere Prototyp-Syntax.

Vorteile der Vererbung

Vererbung in JavaScript bietet mehrere Vorteile:

1. Code-Wiederverwendbarkeit
2. Erweiterbarkeit
3. Wartbarkeit
4. Polymorphie

Hier ist eine Tabelle, die diese Vorteile zusammenfasst:

Vorteil	Beschreibung
Code-Wiederverwendbarkeit	Eigenschaften und Methoden von Elterklassen erben, um Dopplungen zu reduzieren
Erweiterbarkeit	Neue Funktionen leicht zu bestehenden Klassen hinzufügen
Wartbarkeit	Änderungen in Elterklassen werden automatisch in Kindklassen reflektiert
Polymorphie	Objekte verschiedener Klassen über das gleiche Interface verwenden

Denken Sie daran, dass mit großer Macht auch große Verantwortung kommt. Verwenden Sie Vererbung weise, und Ihr Code wird es Ihnen danken!

Und das war's, Leute! Wir haben die Welt der JavaScript-Vererbung bereist. Ich hoffe, dieser Leitfaden hat Ihnen den Weg erleuchtet. Weiter üben, neugierig bleiben und viel Spaß beim Programmieren!

Credits: Image by storyset