Étendre les classes

Le mot clé extends est utilisé dans les déclarations de classe ou les expressions pour créer un qui agit comme une sous-classe d'une autre, avec la classe parente (parfois appelée "classe de base") servant de prototype à la classe enfant (parfois appelée "sous-classe" ou "classe dérivée").

class ParentClass {}
class ChildClass extends ParentClass {}

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

Ces sous-classes héritent des propriétés et des méthodes de la classe parente. Ce vous permet d'étendre les fonctionnalités de base d'une classe pour qu'elle soit diffusée sans surcharger la classe parente pour répondre à tous les cas d'utilisation, ou la réimplémentation de code dans un but similaire.

Les classes enfants peuvent fournir leurs propres implémentations des méthodes héritées d'une classe parente:

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

Vous pouvez également appeler des méthodes définies sur la classe parente dans le contexte de classe enfant avec 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.'

Comme nous l'avons vu dans les exemples précédents, lorsque la méthode constructor() est omise dans dans le contexte d'une classe enfant, le constructeur implicite de JavaScript appelle le parent avec le même ensemble d'arguments. Toutefois, s'il existe un de la sous-classe, il doit d'abord appeler super() avec les les arguments nécessaires avant de référencer this.

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 }

Les getters et les setters sont des méthodes spéciales utilisées exclusivement pour récupérer et définir , respectivement. Les méthodes définies à l'aide des mots clés get et set permettent vous créez des méthodes avec lesquelles il est possible d'interagir comme si elles étaient statiques propriétés.

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

Les propriétés get et set sont définies sur la propriété prototype de la classe, et sont donc disponibles pour toutes les instances de la classe.

Testez vos connaissances

Sélectionnez les affirmations exactes concernant les classes créées avec le mot clé extends.

Il fait office d'enfant de la classe qu'il étend.
Elle fait office de parent de la classe qu'elle étend.
Elle hérite des propriétés et des méthodes de sa classe parente.
It can't overwrite methods from a parent class.