Plongée dans les prototypes : l'épine dorsale de JavaScript

Les prototypes sont un concept central de JavaScript, constituant le fondement de ses capacités de programmation orientée objet (POO). Alors que d'autres langages utilisent des classes comme base d'héritage, JavaScript s'appuie sur des prototypes. Dans cet article, nous explorerons les prototypes en profondeur et découvrirons comment ils alimentent l'héritage, le comportement des objets et bien plus encore en JavaScript.

---

Que sont les prototypes ?

En JavaScript, chaque objet possède une propriété interne appelée [[Prototype]] qui pointe vers un autre objet. Il s'agit du prototype de l'objet, et il agit comme un mécanisme de secours pour les propriétés ou méthodes qui ne se trouvent pas directement sur l'objet.

Chaîne prototype

La chaîne de prototypes est une série de prototypes liés. Si une propriété ou une méthode n'est pas trouvée sur un objet, JavaScript recherche la chaîne jusqu'à ce qu'elle atteigne null.

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

Ici, l'enfant n'a pas de méthode greet, donc JavaScript recherche la chaîne de prototypes vers le parent et la trouve là-bas.

---

La confusion __proto__ et prototype

JavaScript fournit deux termes différents liés aux prototypes qui peuvent prêter à confusion :

1. __proto__ :

   • Il s'agit d'une propriété d'accesseur disponible sur tous les objets qui pointe vers le prototype de l'objet.
   • C'est un moyen d'accéder au [[Prototype]] d'un objet.

2. prototype :

   • Il s'agit d'une propriété disponible uniquement sur les fonctions (en particulier les fonctions constructeur).
   • Il est utilisé pour définir le prototype des objets créés par cette fonction.

Exemple :

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

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

---

L'héritage des prototypes en action

L'héritage de JavaScript est basé sur un prototype, ce qui signifie que les objets héritent directement d'autres objets plutôt que de classes.

Créer un héritage

const animal = {
  eat() {
    console.log("Eating...");
  }
};

const dog = Object.create(animal);
dog.bark = function () {
  console.log("Barking...");
};

dog.eat();  // Output: "Eating..."
dog.bark(); // Output: "Barking..."

L'objet dog hérite de la méthode eat de l'objet animal.

---

Utilisation d'Object.create pour un héritage propre

La méthode Object.create crée un nouvel objet avec un prototype spécifié. C'est une manière plus propre et plus intuitive de configurer l'héritage.

Exemple :

const person = {
  introduce() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

const student = Object.create(person);
student.name = "John";
student.introduce();  // Output: "Hi, I'm John"

---

Extension des prototypes intégrés

Bien qu'il soit possible d'étendre des prototypes intégrés comme Array ou Object, cela est généralement déconseillé car cela peut conduire à des conflits.

Exemple :

Array.prototype.last = function () {
  return this[this.length - 1];
};

console.log([1, 2, 3].last());  // Output: 3

Pourquoi l’éviter ?

• Problèmes de compatibilité : d'autres bibliothèques peuvent s'appuyer sur des prototypes par défaut.
• Maintenance : vos modifications peuvent casser le code existant.

---

Prototypes vs classes

Avec ES6, JavaScript a introduit la syntaxe de classe, offrant une expérience POO plus familière. Cependant, sous le capot, les classes utilisent toujours des prototypes.

Exemple :

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

Même avec la classe, l'héritage est basé sur un prototype.

---

L’angle des performances

L'héritage basé sur un prototype est plus efficace en termes de mémoire car les méthodes sont partagées entre les instances plutôt que d'être dupliquées.

Exemple :

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

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

Ici, le trajet n'est pas dupliqué pour chaque voiture ; au lieu de cela, les deux instances partagent la même méthode.

---

Points clés à retenir

1. Les prototypes activent l'héritage : les objets héritent d'autres objets via leur prototype.
2. Chaîne de prototypes : JavaScript résout les propriétés et les méthodes en parcourant la chaîne de prototypes.
3. Object.create : une manière simple de configurer l'héritage.
4. Évitez d'étendre les prototypes intégrés : cela peut entraîner des comportements inattendus et des conflits.
5. Les classes utilisent des prototypes : les classes ES6 fournissent du sucre syntaxique mais s'appuient toujours sur des prototypes sous le capot.

Comprendre les prototypes est essentiel pour maîtriser JavaScript. Même si les classes ES6 ont rendu la programmation orientée objet en JavaScript plus accessible, le système prototype reste au cœur du langage. En plongeant profondément dans les prototypes, vous débloquez la possibilité d'écrire du code efficace, évolutif et maintenable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!