CodeGym /Cours /Frontend SELF FR /Héritage des classes

Héritage des classes

Frontend SELF FR
Niveau 40 , Leçon 0
Disponible

7.1 Les bases de l'héritage

L'héritage des classes en JavaScript permet de créer de nouvelles classes basées sur des classes existantes, en réutilisant et en étendant leur fonctionnalité. C'est un aspect clé de la programmation orientée objet (POO), qui permet de créer des hiérarchies de classes et de gérer le comportement des objets.

Pour l'héritage des classes, on utilise le mot-clé extends. La classe qui hérite d'une autre classe est appelée classe dérivée (subclass), et la classe de laquelle l'héritage est fait est appelée classe de base (superclass).

Exemple :

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

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          console.log(`${this.name} barks.`);
        }
      }

      const dog = new Dog('Rex');
      dog.speak(); // "Rex barks."
    
  

Explication :

  • La classe Animal est la classe de base avec un constructeur et une méthode speak()
  • La classe Dog hérite de Animal et redéfinit la méthode speak()
  • L'instance dog de la classe Dog utilise la méthode redéfinie speak()

7.2 Le mot-clé super

Le mot-clé super est utilisé pour appeler le constructeur ou les méthodes de la classe de base depuis la classe dérivée.

1. Appel du constructeur de la classe de base

La classe dérivée doit appeler le constructeur de la classe de base avec super() avant d'utiliser this.

Exemple :

Le constructeur Dog appelle super(name) pour initialiser la propriété name de la classe de base Animal.

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

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

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

        speak() {
          console.log(`${this.name} barks.`);
        }
      }

      const dog = new Dog('Rex', 'Labrador');
      console.log(dog.name); // "Rex"
      console.log(dog.breed); // "Labrador"
      dog.speak(); // "Rex barks."
    
  

2. Appel des méthodes de la classe de base

Les méthodes de la classe de base peuvent être appelées depuis la classe dérivée en utilisant super.

Exemple :

La méthode speak() de la classe Dog appelle la méthode speak() de la classe de base Animal en utilisant super.speak(), puis exécute sa propre logique.

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

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          super.speak(); // Appel de la méthode de la classe de base
          console.log(`${this.name} barks.`);
        }
      }

      const dog = new Dog('Rex');
      dog.speak();

      // "Rex makes a noise."
      // "Rex barks."
    
  

7.3 Héritage et redéfinition des méthodes

L'héritage permet aux classes dérivées de redéfinir les méthodes de la classe de base. Cela permet de modifier ou d'étendre la fonctionnalité des méthodes.

Exemple :

La méthode speak() de la classe Dog redéfinit la méthode speak() de la classe de base Animal, en fournissant sa propre implémentation.

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

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          console.log(`${this.name} barks.`);
        }
      }

      const animal = new Animal('Generic Animal');
      animal.speak(); // "Generic Animal makes a noise."

      const dog = new Dog('Rex');
      dog.speak(); // "Rex barks."
    
  

7.4 Héritage et méthodes supplémentaires

Une classe dérivée peut ajouter de nouvelles méthodes qui n'existent pas dans la classe de base.

Exemple :

La classe Dog ajoute une nouvelle méthode fetch(), qui n'existe pas dans la classe de base Animal.

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

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          console.log(`${this.name} barks.`);
        }

        fetch() {
          console.log(`${this.name} is fetching.`);
        }
      }

      const dog = new Dog('Rex');
      dog.speak(); // "Rex barks."
      dog.fetch(); // "Rex is fetching."
    
  

7.5 Vérification de l'héritage

Pour vérifier l'héritage, on peut utiliser l'opérateur instanceof et la méthode isPrototypeOf().

Exemple :

L'opérateur instanceof vérifie si un objet est une instance d'une classe. La méthode isPrototypeOf() vérifie si le prototype d'un objet fait partie de la chaîne de prototypes d'un autre objet.

JavaScript
    
      console.log(dog instanceof Dog); // true
      console.log(dog instanceof Animal); // true
      console.log(Animal.prototype.isPrototypeOf(Dog.prototype)); // true
    
  
Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION