Sobes.tech
Junior

Explique comment fonctionne l'héritage en JavaScript.

sobes.tech IA

Réponse de l'IA

L'héritage en JavaScript est basé sur les prototypes. Chaque objet possède une propriété interne [[Prototype]] (accessible via __proto__ ou Object.getPrototypeOf()), qui pointe vers un autre objet.

Lorsqu'on tente d'accéder à une propriété ou méthode d'un objet, si celle-ci n'est pas trouvée directement dans l'objet, JavaScript la recherche dans [[Prototype]] de cet objet, puis dans celui de son prototype, et ainsi de suite le long de la chaîne de prototypes, jusqu'à atteindre la fin (Object.prototype), dont le [[Prototype]] est null.

C'est cela l'héritage basé sur les prototypes.

Les classes en ECMAScript 2015 (ES6) sont une syntaxe sugar sur l'héritage prototype. Elles offrent une syntaxe plus familière pour travailler avec les prototypes et créer des hiérarchies d'objets.

Exemple d'utilisation de l'héritage prototype avant ES6:

// Constructeur du parent
function Animal(name) {
  this.name = name;
}

// Méthode du parent sur le prototype
Animal.prototype.sayHi = function() {
  console.log(`Bonjour, je suis ${this.name}`);
};

// Constructeur de l'enfant
function Dog(name, breed) {
  // Appel du constructeur du parent
  Animal.call(this, name);
  this.breed = breed;
}

// Définir le prototype de l'enfant sur le prototype du parent
// En conservant la référence au constructeur Dog
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Ajouter une méthode à l'enfant
Dog.prototype.bark = function() {
  console.log("Gou-gou!");
};

// Créer une instance de l'enfant
const myDog = new Dog("Boby", "Labrador");

// Utiliser les méthodes du parent et de l'enfant
myDog.sayHi(); // Affiche: Bonjour, je suis Boby
myDog.bark();  // Affiche: Gou-gou!

Exemple d'utilisation des classes (ES6):

// Classe parent
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Bonjour, je suis ${this.name}`);
  }
}

// Classe enfant héritant de Animal
class Dog extends Animal {
  constructor(name, breed) {
    // Appel du constructeur du parent
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log("Gou-gou!");
  }
}

// Créer une instance de la classe enfant
const myDog = new Dog("Rex", "Berger allemand");

// Utiliser les méthodes du parent et de l'enfant
myDog.sayHi(); // Affiche: Bonjour, je suis Rex
myDog.bark();  // Affiche: Gou-gou!

Points clés de l'héritage en JavaScript:

  • Prototypes: Chaque objet a un prototype.
  • Chaîne de prototypes: La recherche de propriété ou méthode parcourt les prototypes vers le haut.
  • [[Prototype]]: Propriété interne pointant vers le prototype.
  • __proto__: Façon obsolète mais courante d'accéder à [[Prototype]].
  • Object.getPrototypeOf(): Façon recommandée d'accéder à [[Prototype]].
  • Constructeurs et prototype: Utilisés avant ES6 pour créer des objets et définir leurs prototypes.
  • Classes (ES6): Sucres syntaxiques pour l'héritage prototype utilisant class, extends, super.