CodeGym/Cours/Frontend SELF FR/Héritage via prototypes

Héritage via prototypes

Disponible

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).

Héritage

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

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

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

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

JavaScript
const dog = Object.create(animal);

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

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

JavaScript
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.

JavaScript
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:

JavaScript
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:

JavaScript
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:

JavaScript
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:

JavaScript
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:

JavaScript
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...
1
Mission
Frontend SELF FR,  niveau 39leçon 3
Bloqué
Redéfinition des méthodes
Redéfinition des méthodes
1
Mission
Frontend SELF FR,  niveau 39leçon 3
Bloqué
Méthode sum dans Array
Méthode sum dans Array
Commentaires
  • Populaires
  • Nouveau
  • Anciennes
Tu dois être connecté(e) pour laisser un commentaire
Cette page ne comporte pas encore de commentaires