Introduction aux prototypes

3.1 Concept de prototypes

Les prototypes sont l'une des concepts clés en JavaScript, permettant aux objets d'hériter des propriétés et des méthodes d'autres objets. Contrairement à de nombreux autres langages de programmation où l'héritage est réalisé via des classes, en JavaScript, il est basé sur des prototypes. Nous allons maintenant examiner ce que sont les prototypes, comment ils fonctionnent et comment les utiliser.

Un prototype en JavaScript est un objet dont d'autres objets peuvent hériter les propriétés et les méthodes. Chaque objet en JavaScript a un lien caché vers un autre objet — une propriété cachée [[Prototype]] qui pointe vers son prototype.

Ce prototype peut avoir ses propres prototypes, formant une chaîne de prototypes (prototype chain). Les propriétés et méthodes d'un objet peuvent être héritées le long de cette chaîne. Cela permet aux objets de partager des fonctionnalités et de créer des hiérarchies d'objets.

Propriété proto

En JavaScript, chaque objet a une propriété __proto__ qui pointe vers son prototype. Cette propriété est utilisée pour chercher des propriétés et des méthodes si elles ne sont pas trouvées dans l'objet lui-même.

Dans cet exemple, l'objet child hérite de la méthode greet() de l'objet parent:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = {
        __proto__: parent
      };

      child.greet(); // Affichera : Hello from parent
    
  

3.2 Création et utilisation de prototypes

1. Object.create()

La méthode Object.create() permet de créer un nouvel objet avec le prototype spécifié.

Exemple :

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.greet(); // Affichera : Hello from parent
    
  

2. Ajout de propriétés et de méthodes au prototype

Des propriétés et des méthodes peuvent être ajoutées au prototype afin qu'elles soient accessibles à tous les objets qui l'héritent.

Dans cet exemple, la méthode speak() est ajoutée au prototype animal et est accessible à l'objet dog:

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

      const dog = Object.create(animal);
      dog.name = 'Buddy';
      dog.speak(); // Affichera : Buddy makes a noise.
    
  

3. Modification du prototype d'un objet

Le prototype d'un objet peut être modifié avec la méthode Object.setPrototypeOf().

Dans cet exemple, le prototype de l'objet duck est modifié de animal à bird:

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

      const bird = {
        fly() {
          console.log('Bird flies');
        }
      };

      const duck = {
        __proto__: animal,
        quack() {
          console.log('Duck quacks');
        }
      };

      Object.setPrototypeOf(duck, bird);
      duck.fly();   // Affichera : Bird flies
      duck.quack(); // Affichera : Duck quacks
    
  

3.3 Travail avec les prototypes

1. Vérifier le prototype d'un objet

La méthode Object.getPrototypeOf() permet d'obtenir le prototype d'un objet.

Exemple :

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);

      console.log(Object.getPrototypeOf(child) === parent); // Affichera : true
    
  

2. Vérification de l'appartenance d'un objet à un prototype

L'opérateur instanceof est utilisé pour vérifier si un objet est une instance d'un constructeur ou d'un prototype donné.

Exemple :

    
      function Person(name) {
        this.name = name;
      }

      const john = new Person('John');

      console.log(john instanceof Person); // Affichera : true
    
  

3. Parcourir les propriétés d'un objet et de son prototype

Pour parcourir les propriétés d'un objet et de son prototype, on peut utiliser la boucle for...in qui énumère toutes les propriétés énumérables.

Exemple :

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.name = 'Child';

      for (let key in child) {
        console.log(key);
      }

      // Affichera :
      // name
      // greet
    
  

Pour ne parcourir que les propriétés propres de l'objet, on utilise la méthode Object.keys() ou la boucle for...of avec la méthode Object.entries().

Exemple :

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.name = 'Child';

      console.log(Object.keys(child)); // Affichera : ['name']

      for (const [key, value] of Object.entries(child)) {
        console.log(key, value);
      }

      // Affichera :
      // name Child