Klassen erweitern

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?

Sie fungiert als untergeordnetes Element der Klasse, die sie erweitert.

Sie übernimmt die Eigenschaften und Methoden der übergeordneten Klasse.

Sie fungiert als übergeordnetes Element der Klasse, die sie erweitert.

It can't overwrite methods from a parent class.