Apprendre Comprendre l'Héritage avec extends et super() | Maîtrise des Classes et de l'Héritage en JavaScript

Qu'est-ce que l'héritage de classe ?

JavaScript utilise le mot-clé extends pour établir cette relation entre les classes. Une classe enfant peut ajouter ses propres propriétés et méthodes ou remplacer celles de la classe parente.

Considérez une classe enfant comme une version spécialisée de la classe parente. Si la classe parente est un plan pour une voiture, la classe enfant pourrait représenter un type spécifique de voiture, comme une voiture électrique. La voiture électrique hérite des fonctionnalités de base (roues, direction) mais peut ajouter ou modifier des caractéristiques (batterie, système de recharge).

Comment utiliser le mot-clé extends

Le mot-clé extends est utilisé pour faire hériter une classe d'une autre classe. La classe enfant hérite de toutes les propriétés et méthodes de la classe parente.


              1234567891011121314151617181920
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!

Dans cet exemple, la classe Dog étend la classe Animal, héritant de la méthode makeSound() de la classe parente. La classe Dog ajoute également sa propre méthode bark().

Utilisation du constructeur dans une classe enfant

Lors de la création d'une classe enfant, il est souvent nécessaire d'initialiser ses propres propriétés ainsi que celles de la classe parente. Cela se fait via la méthode constructor. Cependant, pour garantir que la classe parente soit correctement initialisée, il faut utiliser la fonction super() pour appeler le constructeur de la classe parente.

Important : Lorsqu'une classe enfant possède un constructeur, elle doit appeler super() avant d'accéder à this, sinon une erreur se produira.

Utilisation de super() pour appeler le constructeur de la classe parente

La fonction super() est utilisée pour appeler le constructeur de la classe parente depuis le constructeur de la classe enfant. Cela garantit que toutes les propriétés ou la logique définies dans le constructeur de la classe parente sont correctement initialisées avant d'ajouter de nouvelles fonctionnalités dans la classe enfant.


              1234567891011121314151617181920212223242526
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!

Dans cet exemple, une classe de base appelée Animal possède un constructeur qui initialise la propriété name ainsi qu'une méthode makeSound qui affiche un message sonore générique. La classe Dog étend Animal, ajoutant son propre constructeur qui accepte à la fois name et breed comme arguments. À l'intérieur du constructeur de Dog, la fonction super() est utilisée pour appeler le constructeur de la classe parente, garantissant ainsi que name est correctement défini. De plus, Dog introduit une nouvelle méthode, bark, qui affiche un message spécifique à la race du chien. Lorsque l'on crée une nouvelle instance de Dog nommée Rex de race German Shepherd, il est possible d'appeler à la fois makeSound et bark, illustrant ainsi le comportement hérité et le nouveau comportement.

Points clés lors de l'utilisation de extends et super()

Héritage : Le mot-clé extends permet à la classe enfant d'hériter des propriétés et méthodes de la classe parente.

Constructeur dans la classe enfant : Lors de la définition d'un constructeur dans la classe enfant, il est nécessaire d'utiliser super() pour appeler le constructeur de la classe parente.

Accès à this : Il faut appeler super() avant d'accéder à this dans le constructeur de la classe enfant.

Redéfinition de méthode : Il est possible de redéfinir les méthodes de la classe parente dans la classe enfant en définissant une méthode portant le même nom. Il est également possible d'utiliser super.methodName() pour appeler la méthode de la classe parente depuis la classe enfant si nécessaire.

Exemple : Redéfinition de méthodes et utilisation de super()

Il est parfois nécessaire de redéfinir une méthode de la classe parente dans la classe enfant, tout en appelant la méthode de la classe parente dans la nouvelle logique. Cela peut être réalisé en utilisant super.methodName().


              1234567891011121314151617181920212223242526272829
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a generic sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.

Dans cet exemple, la classe Dog redéfinit la méthode makeSound mais appelle toujours la méthode makeSound de la classe parente en utilisant super.makeSound(). Cela permet à la classe enfant d'étendre le comportement de la classe parente sans le remplacer complètement.

Exemple concret : Classes Employee et Manager

Considérons un scénario où nous avons une classe Employee et une classe Manager qui l'étend. La classe Manager ajoute de nouvelles fonctionnalités en plus de celles de base de la classe Employee.


              12345678910111213141516171819202122232425262728
            
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.

Dans cet exemple, la classe Manager étend la classe Employee, en ajoutant une nouvelle propriété department. La méthode getDetails() dans la classe Manager appelle la méthode de la classe parente en utilisant super.getDetails() puis ajoute ses propres informations spécifiques au département.

Tout était clair ?

Merci pour vos commentaires !

Section 1. Chapitre 14

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.22

Glissez pour afficher le menu

Qu'est-ce que l'héritage de classe ?

JavaScript utilise le mot-clé extends pour établir cette relation entre les classes. Une classe enfant peut ajouter ses propres propriétés et méthodes ou remplacer celles de la classe parente.

Comment utiliser le mot-clé extends

Le mot-clé extends est utilisé pour faire hériter une classe d'une autre classe. La classe enfant hérite de toutes les propriétés et méthodes de la classe parente.


              1234567891011121314151617181920
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!

Dans cet exemple, la classe Dog étend la classe Animal, héritant de la méthode makeSound() de la classe parente. La classe Dog ajoute également sa propre méthode bark().

Utilisation du constructeur dans une classe enfant

Important : Lorsqu'une classe enfant possède un constructeur, elle doit appeler super() avant d'accéder à this, sinon une erreur se produira.

Utilisation de super() pour appeler le constructeur de la classe parente


              1234567891011121314151617181920212223242526
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!

Points clés lors de l'utilisation de extends et super()

Héritage : Le mot-clé extends permet à la classe enfant d'hériter des propriétés et méthodes de la classe parente.

Constructeur dans la classe enfant : Lors de la définition d'un constructeur dans la classe enfant, il est nécessaire d'utiliser super() pour appeler le constructeur de la classe parente.

Accès à this : Il faut appeler super() avant d'accéder à this dans le constructeur de la classe enfant.

Exemple : Redéfinition de méthodes et utilisation de super()


              1234567891011121314151617181920212223242526272829
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a generic sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.

Exemple concret : Classes Employee et Manager


              12345678910111213141516171819202122232425262728
            
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.

Tout était clair ?

Merci pour vos commentaires !

Section 1. Chapitre 14

Comprendre l'Héritage avec extends et super()

Qu'est-ce que l'héritage de classe ?

Comment utiliser le mot-clé extends

Utilisation du constructeur dans une classe enfant

Utilisation de super() pour appeler le constructeur de la classe parente

Points clés lors de l'utilisation de extends et super()

Exemple : Redéfinition de méthodes et utilisation de super()

Exemple concret : Classes Employee et Manager

1. Que fait le mot-clé `extends` ?

2. Dans une classe enfant, pourquoi utilise-t-on `super()` dans le constructeur ?

3. Quelle sera la sortie du code suivant ?

Awesome!

Comprendre l'Héritage avec extends et super()

Qu'est-ce que l'héritage de classe ?

Comment utiliser le mot-clé extends

Utilisation du constructeur dans une classe enfant

Utilisation de super() pour appeler le constructeur de la classe parente

Points clés lors de l'utilisation de extends et super()

Exemple : Redéfinition de méthodes et utilisation de super()

Exemple concret : Classes Employee et Manager

1. Que fait le mot-clé `extends` ?

2. Dans une classe enfant, pourquoi utilise-t-on `super()` dans le constructeur ?

3. Quelle sera la sortie du code suivant ?

Comprendre l'Héritage avec extends et super()

Qu'est-ce que l'héritage de classe ?

Comment utiliser le mot-clé extends

Utilisation du constructeur dans une classe enfant

Utilisation de super() pour appeler le constructeur de la classe parente

Points clés lors de l'utilisation de extends et super()

Exemple : Redéfinition de méthodes et utilisation de super()

Exemple concret : Classes Employee et Manager

1. Que fait le mot-clé extends ?

2. Dans une classe enfant, pourquoi utilise-t-on super() dans le constructeur ?

3. Quelle sera la sortie du code suivant ?

Awesome!

Comprendre l'Héritage avec extends et super()

Qu'est-ce que l'héritage de classe ?

Comment utiliser le mot-clé extends

Utilisation du constructeur dans une classe enfant

Utilisation de super() pour appeler le constructeur de la classe parente

Points clés lors de l'utilisation de extends et super()

Exemple : Redéfinition de méthodes et utilisation de super()

Exemple concret : Classes Employee et Manager

1. Que fait le mot-clé extends ?

2. Dans une classe enfant, pourquoi utilise-t-on super() dans le constructeur ?

3. Quelle sera la sortie du code suivant ?

1. Que fait le mot-clé `extends` ?

2. Dans une classe enfant, pourquoi utilise-t-on `super()` dans le constructeur ?

1. Que fait le mot-clé `extends` ?

2. Dans une classe enfant, pourquoi utilise-t-on `super()` dans le constructeur ?