Sobes.tech
Middle

Qu'est-ce que l'héritage par prototype en JavaScript?

sobes.tech IA

Réponse de l'IA

En JavaScript, les objets héritent des propriétés et méthodes de leurs prototypes. Le prototype de chaque objet est un autre objet, dont les propriétés et méthodes sont accessibles via la chaîne de prototypes.

Lors de l'accès à une propriété d'un objet, JavaScript la recherche d'abord directement dans l'objet lui-même. Si la propriété n'est pas trouvée, la recherche continue dans le prototype de cet objet, puis dans le prototype du prototype, et ainsi de suite, jusqu'à ce que la propriété soit trouvée ou que la fin de la chaîne soit atteinte (null).

L'héritage par prototype diffère de l'héritage classique (comme en Java ou C++), où les objets sont créés à partir de classes décrivant leur structure et leur comportement. En JavaScript, les classes, apparues dans ES6, sont une syntaxe sucre sur l'héritage par prototype.

Aspects principaux:

  • __proto__ : propriété interne de l'objet référant à son prototype.
  • prototype : propriété du constructeur (fonction utilisée comme constructeur), référant à l'objet qui servira de prototype pour les instances créées.
  • Object.getPrototypeOf(obj) : méthode standard pour obtenir le prototype d'un objet.
  • Object.setPrototypeOf(obj, proto) : méthode standard pour définir le prototype d'un objet.

Exemple :

// Fonction constructeur
function Animal(name) {
  this.name = name;
}

// Ajout d'une méthode au prototype Animal
Animal.prototype.sayHello = function() {
  console.log(`Bonjour, je m'appelle ${this.name}`);
};

// Création d'une instance
const dog = new Animal("Buddy");

// Appel de la méthode du prototype
dog.sayHello(); // Affiche : Bonjour, je m'appelle Buddy

// Le prototype de dog est Animal.prototype
console.log(Object.getPrototypeOf(dog) === Animal.prototype); // true

// Le prototype de Animal.prototype est Object.prototype
console.log(Object.getPrototypeOf(Animal.prototype) === Object.prototype); // true

// La fin de la chaîne de prototypes est null
console.log(Object.getPrototypeOf(Object.prototype) === null); // true

Comparaison avec l'héritage classique (utilisant des classes ES6) :

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

  sayHello() {
    console.log(`Bonjour, je m'appelle ${this.name}`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Appel au constructeur de la classe parente
    this.breed = breed;
  }

  bark() {
    console.log("Woof!");
  }
}

const buddy = new Dog("Buddy", "Golden Retriever");
buddy.sayHello(); // Affiche : Bonjour, je m'appelle Buddy (hérité de Animal)
buddy.bark(); // Affiche : Woof! (méthode de Dog)

// Les classes en ES6 sont du sucre syntaxique sur les prototypes
console.log(Object.getPrototypeOf(Dog) === Animal); // true (héritage de classes)
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true (héritage de méthodes via prototypes)
console.log(Object.getPrototypeOf(buddy) === Dog.prototype); // true (l'instance hérite du prototype de la classe)

L'héritage par prototype est une notion clé en JavaScript, dont la compréhension est essentielle pour travailler efficacement avec le langage.