Héritage via prototypes

4.1 Héritage — c'est simple

L'héritage est un concept fondamental de la programmation orientée objet (OOP) qui permet à une classe (appelée classe fille ou sous-classe) d'hériter des champs et méthodes d'une autre classe (appelée classe parent ou super-classe).

Cette approche permet de créer des classes plus générales et de réutiliser le code, améliorant ainsi l'organisation et la maintenabilité du code.

Pourquoi a-t-on besoin de l'héritage ?

Disons que tu dois écrire un code, et tu as décidé de le faire sous forme de classe. Puis tu as découvert qu'il existe déjà une classe dans ton projet qui fait presque tout ce qu'il te faut dans ta classe. Tu peux simplement copier le code de cette classe dans la tienne et l'utiliser à ta guise.

Ou tu peux "copier comme si". Tu peux déclarer cette classe comme parent de ta classe, et alors JavaScript ajoutera à ta classe le comportement de la classe parent.

Imaginons que tu es la nature et que tu veux créer un Chien. Qu'est-ce qui sera plus rapide : créer un chien à partir d'une bactérie en un milliard d'années ou domestiquer un loup en 200 mille ?

4.2 Concept d'héritage via prototypes

L'héritage via prototypes en JavaScript est l'un des principaux mécanismes qui permet aux objets d'hériter des propriétés et méthodes d'autres objets. Cela permet de créer des hiérarchies d'objets complexes et de réutiliser le code.

Chaque objet en JavaScript a une propriété cachée [[Prototype]] qui pointe vers son prototype. Les prototypes sont utilisés pour réaliser l'héritage, ce qui permet aux objets d'hériter des propriétés et méthodes d'autres objets.

Exemple d'héritage simple

Étape 1: Création de l'objet de base

    
      const animal = {
        eat() {
          console.log('Manger...');
        },

        sleep() {
          console.log('Dormir...');
        }
      };
    
  

Étape 2: Création de l'objet héritier

    
      const dog = Object.create(animal);

      dog.bark = function() {
        console.log('Aboyer...');
      };
    
  

Étape 3: Utilisation des propriétés et méthodes héritées

    
      dog.eat();   // Affichera: Manger...
      dog.sleep(); // Affichera: Dormir...
      dog.bark();  // Affichera: Aboyer...
    
  

Dans cet exemple, l'objet dog hérite des méthodes eat() et sleep() de l'objet animal et ajoute sa propre méthode — bark().

4.3 Héritage profond via prototypes

Chaîne de prototypes

En JavaScript, l'héritage peut être plus complexe lorsque les objets héritent les uns des autres, formant une chaîne de prototypes.

Exemple de chaîne de prototypes

Dans cet exemple, l'objet dog hérite de mammal, qui à son tour hérite de animal. Cela crée une chaîne de prototypes où dog a accès à toutes les méthodes de mammal et animal.

    
      const animal = {
        eat() {
          console.log('Manger...');
        }
      };

      const mammal = Object.create(animal);

      mammal.walk = function() {
        console.log('Marcher...');
      };

      const dog = Object.create(mammal);
      dog.bark = function() {
        console.log('Aboyer...');
      };

      dog.eat();   // Affichera: Manger...
      dog.walk();  // Affichera: Marcher...
      dog.bark();  // Affichera: Aboyer...
    
  

Vérification de la chaîne de prototypes

La méthode isPrototypeOf() permet de vérifier si un objet est le prototype d'un autre objet.

Exemple:

    
      console.log(animal.isPrototypeOf(mammal)); // Affichera: true
      console.log(mammal.isPrototypeOf(dog));    // Affichera: true
      console.log(animal.isPrototypeOf(dog));    // Affichera: true
    
  

4.4 Redéfinition de méthodes

L'héritage via prototypes permet non seulement d'ajouter de nouvelles méthodes, mais aussi de redéfinir des méthodes existantes.

Exemple de redéfinition de méthodes

Dans cet exemple, la méthode speak() de l'objet dog redéfinit la méthode speak() de l'objet animal:

    
      const animal = {
        speak() {
          console.log('Animal parle');
        }
      };

      const dog = Object.create(animal);
      dog.speak = function() {
        console.log('Chien aboie');
      };

      animal.speak(); // Affichera: Animal parle
      dog.speak();    // Affichera: Chien aboie
    
  

Appel d'une méthode de l'objet parent

Pour appeler une méthode de l'objet parent en JavaScript, on peut utiliser la méthode call() ou apply().

Exemple:

    
      const animal = {
        speak() {
          console.log('Animal parle');
        }
      };

      const dog = Object.create(animal);
      dog.speak = function() {
        animal.speak.call(this);
        console.log('Chien aboie');
      };

      dog.speak();

      // Affichera:
      // Animal parle
      // Chien aboie
    
  

4.5 Utilisation approfondie de l'héritage par prototype

Extension des objets intégrés

Tu peux étendre les objets intégrés de JavaScript en ajoutant des méthodes à leurs prototypes.

Exemple:

    
      Array.prototype.sum = function() {
        return this.reduce((acc, value) => acc + value, 0);
      };

      const numbers = [1, 2, 3, 4, 5];

      console.log(numbers.sum()); // Affichera: 15
    
  

Création de hiérarchies multi-niveaux

Tu peux créer des hiérarchies d'objets plus complexes à plusieurs niveaux en utilisant l'héritage par prototype.

Exemple:

    
      const livingBeing = {
        breathe() {
          console.log('Respirer...');
        }
      };

      const animal = Object.create(livingBeing);
      animal.eat = function() {
        console.log('Manger...');
      };

      const mammal = Object.create(animal);
      mammal.walk = function() {
        console.log('Marcher...');
      };

      const dog = Object.create(mammal);
      dog.bark = function() {
        console.log('Aboyer...');
      };

      dog.breathe(); // Affichera: Respirer...
      dog.eat();     // Affichera: Manger...
      dog.walk();    // Affichera: Marcher...
      dog.bark();    // Affichera: Aboyer...