Przedłużenie zajęć

Słowo kluczowe extends jest używane w deklaracjach lub wyrażeniach klas do tworzenia klasy, która działa jako podklasa innej, przy czym klasa nadrzędna (czasem nazywana „klasą bazową”) pełni funkcję prototypu klasy podrzędnej (czasami nazywanej „podklasą” lub „klasą derywowaną”).

class ParentClass {}
class ChildClass extends ParentClass {}

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

Te podklasy dziedziczą właściwości i metody klasy nadrzędnej. Umożliwia to rozszerzenie głównej funkcjonalności klasy w celu realizacji bardziej szczegółowych celów bez przeciążania klasy nadrzędnej tak, aby odpowiadała każdemu możliwemu użyciu, oraz ponownej implementacji kodu o podobnym celu.

Klasy podrzędne mogą udostępniać własne implementacje metod dziedziczonych z klasy nadrzędnej:

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.'"

Metody zdefiniowane w klasie nadrzędnej możesz też wywoływać w kontekście klasy podrzędnej za pomocą funkcji 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.'

Tak jak w poprzednich przykładach, gdy metoda constructor() zostanie pominięta w kontekście klasy podrzędnej, konstruktor niejawny JavaScriptu wywołuje konstruktor nadrzędny wraz z tym samym zestawem argumentów. Jeśli jednak w klasie podrzędnej znajduje się konstruktor, przed odwołaniem do klasy this musi ona wywołać super() wraz z wszelkimi niezbędnymi argumentami.

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 }

Pobieranie i ustawianie to specjalne metody używane odpowiednio wyłącznie do pobierania i definiowania wartości. Metody zdefiniowane za pomocą słów kluczowych get i set pozwalają tworzyć metody, z którymi można wchodzić w interakcje tak, jakby były właściwościami statycznymi.

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

Właściwości get i set są zdefiniowane we właściwości prototypu klasy, dlatego są dostępne dla wszystkich instancji klasy.

Sprawdź swoją wiedzę