Contenu du cours
Maîtrise Avancée de JavaScript
Maîtrise Avancée de JavaScript
Héritage avec Extends et Utilisation de super()
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.
Pensez à 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 de la fonctionnalité de base (roues, direction) mais peut ajouter ou modifier des caractéristiques (batterie, système de charge).
Comment utiliser le mot-clé extends
Le mot-clé extends est utilisé pour faire en sorte qu'une classe hérite d'une autre classe. La classe enfant hérite de toutes les propriétés et méthodes de la classe parente.
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().
Travailler avec le Constructeur dans une Classe Enfant
Lorsque vous créez une classe enfant, elle doit souvent initialiser ses propres propriétés ainsi que celles de la classe parente. Cela se fait via la méthode constructor. Cependant, pour s'assurer que la classe parente est correctement initialisée, vous devez utiliser la fonction super() pour appeler le constructeur de la classe parente.
Important : Lorsqu'une classe enfant a un constructeur, elle doit appeler super() avant d'accéder à this, sinon une erreur se produira.
Utiliser 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 logiques définies dans le constructeur de la classe parente sont correctement initialisées avant d'ajouter de nouvelles fonctionnalités dans la classe enfant.
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, nous avons une classe de base appelée Animal avec un constructeur qui initialise la propriété name et une méthode makeSound qui enregistre 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 que name est correctement défini. De plus, Dog introduit une nouvelle méthode, bark, qui enregistre un message spécifique à la race du chien. Lorsque nous créons une nouvelle instance de Dog nommée Rex de la race German Shepherd, nous pouvons appeler à la fois makeSound et bark, montrant le comportement hérité et nouveau.
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, utilisez toujours super() pour appeler le constructeur de la classe parente.
Accès à this: Vous devez appeler super() avant d'accéder à this dans le constructeur de la classe enfant.
Redéfinition de Méthode: Vous pouvez redéfinir les méthodes de la classe parente dans la classe enfant en définissant une méthode avec le même nom. Vous pouvez également utiliser super.methodName() pour appeler la méthode de la classe parente depuis la classe enfant si nécessaire.
Exemple : Redéfinir des Méthodes et Utiliser super()
Parfois, vous pourriez vouloir redéfinir une méthode de la classe parente dans la classe enfant, mais toujours appeler la méthode de la classe parente dans le cadre de la nouvelle logique. Vous pouvez le faire en utilisant super.methodName().
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 remplace 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 du monde réel : 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 des fonctionnalités de base de Employee.
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, 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.
1. Que fait le mot-clé extends ?
2. Dans une classe enfant, pourquoi utilisons-nous super() dans le constructeur ?
3. Quelle sera la sortie du code suivant ?
Merci pour vos commentaires !
