Klassen erweitern

Das Schlüsselwort extends wird in Klassendeklarationen oder Ausdrücken verwendet, um eine Klasse zu erstellen, die als Unterklasse einer anderen Klasse fungiert, wobei die übergeordnete Klasse (manchmal als "Basisklasse" bezeichnet) als Prototyp der untergeordneten Klasse (manchmal auch als "Unterklasse" oder "abgeleitete Klasse" bezeichnet) dient.

class ParentClass {}
class ChildClass extends ParentClass {}

Object.getPrototypeOf( ChildClass );
> class ParentClass {}

Diese abgeleiteten Klassen übernehmen die Eigenschaften und Methoden der übergeordneten Klasse. Auf diese Weise können Sie die Hauptfunktion einer Klasse so erweitern, dass sie bestimmten Zwecken dient, ohne die übergeordnete Klasse für jeden möglichen Anwendungsfall zu überlasten oder Code, der einem ähnlichen Zweck dient, neu zu implementieren.

Untergeordnete Klassen können ihre eigenen Implementierungen der von einer übergeordneten Klasse übernommenen Methoden bereitstellen:

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 mit super auch Methoden aufrufen, die in der übergeordneten Klasse im Kontext der untergeordneten Klasse definiert sind:

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, ruft der implizite Konstruktor von JavaScript den übergeordneten Konstruktor zusammen mit denselben Argumenten auf, wenn die Methode constructor() im Kontext einer untergeordneten Klasse weggelassen wird. Wenn die Unterklasse jedoch einen Konstruktor enthält, muss er zuerst super() zusammen mit allen erforderlichen Argumenten aufrufen, bevor this referenziert 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 bzw. Definieren von Werten verwendet werden. Mit Methoden, die mit den Keywords get und set definiert werden, können Sie Methoden erstellen, mit denen interagiert werden kann, als wäre es statische Attribute.

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 Attribute get und set werden für das Attribut „Prototyp“ der Klasse definiert und sind somit für alle Instanzen der Klasse verfügbar.

Wissen testen