7.4.5 Vererbung in JavaScript

JavaScript unterstützt Vererbung, allerdings funktioniert sie anders als in vielen anderen objektorientierten Programmiersprachen. JavaScript ist eine prototypbasierte Sprache, was bedeutet, dass Objekte auf sogenannte Prototyp-Objekte zugreifen können. Eigenschaften und Methoden eines Prototyps werden an das aktuelle Objekt "vererbt".

Prototyp-Objekt

Ein Prototyp-Objekt ist ein spezielles Objekt, von dem "normale" Objekte in JavaScript Eigenschaften und Methoden bekommen (erben) können. Jedes Objekt in JavaScript hat also ein unsichtbares Prototyp-Objekt, auf das es verweist. Wenn eine Eigenschaft oder Methode in einem Objekt nicht gefunden wird, durchsucht JavaScript automatisch das Prototyp-Objekt des aktuellen Objekts – dies ist Teil der sogenannten Prototyp-Kette (prototype chain).

  • Beispiel: Ein Objekt student kann Methoden wie toString() verwenden, die eigentlich im Prototyp-Objekt Object definiert sind.

Tabelle: Wichtige Methoden von Object.prototype

Wichtige Methoden von Object.prototype Beschreibung
toString() Gibt eine String-Darstellung des Objekts zurück.
hasOwnProperty() Prüft, ob eine Eigenschaft direkt im Objekt definiert ist (nicht im Prototyp).
valueOf() Gibt den primitiven Wert des Objekts zurück.
isPrototypeOf() Prüft, ob ein Objekt das Prototyp-Objekt eines anderen Objekts ist.

Da wir hier erst mit der Vererbung beginnen, gibt es zu den in der Tabelle genannten Methoden leider kein anschauliches Beispiel. Wir nehmen einfach mit, dass es zu jedem von uns erzeugten Objekt bereits ein übergeordnetes Prototyp-Objekt mit einige Methoden gehört.

Prototyp-basierte Vererbung

Hier wird ein Student-Objekt erstellt, das von der Klasse Person erbt. Dazu wird das Schlüsselwort extends verwendet.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  info() {
    return this.name + ' ist ' + this.age + ' Jahre alt.';
  }
}

class Student extends Person {
  constructor(name, age, studiengang, matrikelnummer) {
    super(name, age); // Konstruktor der Basisklasse aufrufen
    this.studiengang = studiengang;
    this.matrikelnummer = matrikelnummer;
  }

  info() {
    return super.info() + ' Er/sie studiert ' + this.studiengang 
    + ' (Matrikelnummer: ' + this.matrikelnummer + ').';
  }
}

// Hauptprogramm 
const studentLena = new Student('Lena', 22, 'Medientechnik', '720234');
console.log(studentLena.info()); 

// Ausgabe: Lena ist 22 Jahre alt. Er/sie studiert Medientechnik (Matrikelnummer: 720234).

In diesem Beispiel wird die Vererbung in JavaScript gezeigt, indem die Klasse Student die Klasse Person erweitert (man sagt auch, dass Student von der Klasse Person erbt).

Die Methode info() in Student erweitert die gleichnamige Methode der Basisklasse.

Klassenvererbung mit extends

Mit dem Schlüsselwort extends kann eine Klasse also von einer anderen Klasse erben. Der Konstruktor der Basisklasse wird dabei mit super() aufgerufen, was sicherstellt, dass die Initialisierung korrekt durchgeführt wird.

Beispiel: Erweiterte Vererbung

Wir erweitern das Student-Beispiel, um eine zusätzliche Methode hinzuzufügen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Tutor extends Student {
  constructor(name, age, studiengang, matrikelnummer, betreuteFächer) {
    super(name, age, studiengang, matrikelnummer); // Konstruktor von Student aufrufen
    this.betreuteFächer = betreuteFächer;
  }
  info() {
    return super.info() + ' Als Tutor betreut er/sie folgende Fächer: ' 
    + this.betreuteFächer.join(', ') + '.';
  }
}

// Hauptprogramm 
const tutorMax = new Tutor(
  'Max', 
  25, 
  'Medientechnik',
  '654321', 
  ['Computergrafik', 'Nachrichtentechnik']
);


console.log(tutorMax.info());
// Ausgabe: Max ist 25 Jahre alt. Er/sie studiert Medientechnik (Matrikelnummer: 654321). 
// Als Tutor betreut er/sie folgende Fächer: Computergrafik, Nachrichtentechnik.

In diesem Beispiel wird die Vererbungshierarchie um die Klasse Tutor erweitert.

Weiterführende Links