Das Schlüsselwort extends
wird in Klassendeklarationen oder Ausdrücken verwendet, um ein
-Klasse, die als Unterklasse einer anderen Klasse mit der übergeordneten Klasse fungiert (manchmal
namens "Basisklasse", der als Prototyp der untergeordneten Klasse dient (manchmal
als „untergeordnete Klasse“ bezeichnet, oder „abgeleitete Klasse“).
class ParentClass {}
class ChildClass extends ParentClass {}
Object.getPrototypeOf( ChildClass );
> class ParentClass {}
Diese Unterklassen erben die Eigenschaften und Methoden der übergeordneten Klasse. Dieses ermöglicht es Ihnen, die Hauptfunktion einer Klasse zu erweitern, ohne die übergeordnete Klasse so zu überlasten, oder Code, der einem ähnlichen Zweck dient, neu zu implementieren.
Untergeordnete Klassen können ihre eigenen Implementierungen der übernommenen Methoden bereitstellen aus einer übergeordneten Klasse:
class MyClass {
constructor( myPassedValue ) {
this.instanceProp = myPassedValue;
}
classMethod() {
console.log( `The value was '${ this.instanceProp }.'`)
}
}
class ChildClass extends MyClass {
classMethod() {
console.log( `The value was '${ this.instanceProp },' and its type was '${ typeof this.instanceProp }.'`)
}
}
const myParentClassInstance = new MyClass( "My string." );
const mySubclassInstance = new ChildClass( 100 );
myParentClassInstance.classMethod();
> "The value type was 'string.'"
mySubclassInstance.classMethod();
> "The value was '100,' and its type was 'number.'"
Sie können auch Methoden aufrufen, die in der übergeordneten Klasse im Kontext der
untergeordnete Klasse mit super
:
class MyClass {
constructor( myPassedValue ) {
this.instanceProp = myPassedValue;
}
classMethod() {
console.log( `The value was '${ this.instanceProp }.'`)
}
}
class ChildClass extends MyClass {
subclassMethod() {
super.classMethod();
console.log( `The value type was '${ typeof this.instanceProp }.'`)
}
}
const mySubclassInstance = new ChildClass( 100 );
mySubclassInstance.subclassMethod();
> The value was '100.'
> The value type was 'number.'
Wie in den vorherigen Beispielen gezeigt, wird die Methode constructor()
in
Kontext einer untergeordneten Klasse betrachtet, ruft der implizite Konstruktor von JavaScript das übergeordnete Element
mit demselben Satz von Argumenten. Wenn es jedoch eine
in der Unterklasse verwenden, muss er zuerst super()
zusammen mit allen
erforderlichen Argumente, bevor auf this
verwiesen wird.
class MyClass {
constructor( myPassedValue ) {
this.instanceProp = myPassedValue;
}
classMethod() {
console.log( `The value was '${ this.instanceProp }.'`)
}
}
class ChildClass extends MyClass {
constructor( myPassedValue ) {
super( myPassedValue );
this.modifiedProp = myPassedValue + 50;
}\
subclassMethod() {
super.classMethod();
console.log( `The value type was '${ typeof this.instanceProp }.'`)
}
}
const mySubclassInstance = new ChildClass( 100 );
mySubclassInstance;
> MyClass { instanceProp: 100, modifiedProp: 150 }
Getter und Setter sind spezielle Methoden, die ausschließlich zum Abrufen und Definieren
-Werten entsprechen. Mit Methoden, die mit den Keywords get
und set
definiert werden,
entwickeln Sie Methoden, mit denen
als statisch interagiert werden kann.
Eigenschaften.
class MyClass {
constructor( originalValue ) {
this.totalValue = 0;
}
set doubleThisValue( newValue ) {
this.totalValue = newValue * 2;
}
get currentValue() {
console.log( `The current value is: ${ this.totalValue }` );
}
}
const myClassInstance = new MyClass();
myClassInstance;
> MyClass { totalValue: 0 }
myClassInstance.doubleThisValue = 20;
myClassInstance.currentValue;
> The current value is: 40
Die Eigenschaften get
und set
werden in der Eigenschaft „Prototype“ der Klasse definiert.
und sind daher für alle Instanzen der Klasse verfügbar.
Wissen testen
Welche Aussagen über Klassen, die mit dem Schlüsselwort extends
erstellt wurden, sind richtig?
It can't overwrite methods from a parent class.