Prototype

Beaucoup de langages orientés objet transmettent le comportement par des classes rigides ; JavaScript, lui, relie directement les objets entre eux dans une chaîne de prototypes, et va chercher une propriété manquante chez le prototype quand elle n’existe pas sur l’objet lui-même.

Sous le capot des classes ES6

La syntaxe class, largement utilisée dans les blocs Gutenberg écrits en orienté objet ou dans du code PHP porté conceptuellement en JavaScript, reste en réalité du sucre syntaxique au-dessus du prototype : chaque méthode déclarée dans une classe est en fait ajoutée au prototype partagé par toutes les instances, ce qui évite de dupliquer le code en mémoire pour chaque objet créé.

Exemple

function Produit(nom, prix) {
  this.nom = nom;
  this.prix = prix;
}

Produit.prototype.afficherPrix = function () {
  return this.prix.toFixed(2) + ' €';
};

const stylo = new Produit('Stylo', 2.5);
console.log(stylo.afficherPrix()); // "2.50 €"

La méthode afficherPrix n’est définie qu’une seule fois sur le prototype, mais tous les objets créés avec new Produit() peuvent l’utiliser comme si elle leur appartenait.

Bon à savoir

• Object.create() permet de créer un objet en spécifiant explicitement son prototype, sans passer par une fonction constructeur.
• La méthode hasOwnProperty() distingue une propriété portée directement par un objet d’une propriété héritée via la chaîne de prototypes.
• Modifier le prototype d’un objet natif comme Array.prototype est fortement déconseillé : cela peut provoquer des conflits difficiles à diagnostiquer avec d’autres scripts ou plugins chargés sur la même page.