Erweitern
Das extends
Schlüsselwort wird in einer Klassendeklaration oder in einem Klassenausdruck verwendet, um eine, von einer anderen Klasse, abgeleitete Klasse zu erzeugen.
Syntax
class KindKlasse extends ElternKlasse { ... }
Beschreibung
Beispiele
Verwendung von extends
Das erste Beispiel erzeugt einen Klasse mit dem Namen Square,
die von der Klasse Polygon
abgeleitet ist. Dieses Beispiel wurde aus dieser live Demo (Quellcode) entnommen.
class Square extends Polygon {
constructor(length) {
// Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
// für die Parameter width und height wurde der übergebene length Parameter verwendet
super(length, length);
// Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
// bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
this.height = this.width = Math.sqrt(value);
this.area = value;
}
}
Verwendung mit standardmäßig eingebautem Objekt
In diesem Beispiel wird das standardmäßig eingebaute Date
Objekt erweitert. Dieses Beispiel wurde aus dieser live Demo (Quellcode) entnommen.
class myDate extends Date {
constructor() {
super();
}
getFormattedDate() {
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
}
}
Ableiten von null
Das Ableiten von null
funktioniert genauso wie mit jeder anderen Klasse, mit der Ausnahme, dass das prototype
Objekt nicht von Object.prototype
(en-US) abgeleitet ist.
class nullExtends extends null {
constructor() {}
}
Object.getPrototypeOf(nullExtends); // Function.prototype
Object.getPrototypeOf(nullExtends.prototype) // null
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) Die Definition von 'extends' in dieser Spezifikation. |
Standard | Initiale Definition. |
ECMAScript (ECMA-262) Die Definition von 'extends' in dieser Spezifikation. |
Lebender Standard |
Browserkompatibilität
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 42.0 | 45 (45) | ? | ? | ? |
Array subclassing | 43.0 | Nicht unterstützt | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|
Basic support | Nicht unterstützt | 45.0 (45) | ? | ? | ? | 42.0 |
Array subclassing | Nicht unterstützt | Nicht unterstützt | ? | ? | ? | 43.0 |