Les Prototypes en JavaScript

Laisser un commentaire / cours javascript / Par

Les Prototypes (Object Prototype) en JavaScript

prototype en javascript image

 

En JavaScript, les prototypes d’objet sont une fondation de la programmation orientée objet. Saisir le concept des prototypes vous permettra de créer des objets plus hiérarchisés et réutilisables.

Les prototypes en JavaScript sont un concept central qui permet de comprendre comment l’héritage fonctionne dans ce langage.

Bienvenue dans cette article pour découvrir comment les prototypes façonnent le comportement des objets en JavaScript.

 

Qu’est-ce qu’un Prototype ?

 
 

En JavaScript, chaque objet a un prototype. Le prototype est lui-même un objet, et les objets peuvent hériter des propriétés et des méthodes de leur prototype. Autrement dit, il s’agit d’une chaîne de prototypes qui permet de partager des fonctionnalités entre objets sans duplication de code.

 

En JavaScript, tout objet possède un prototype, qui est un autre objet dont il hérite les propriétés et les méthodes. Cette relation d’héritage est définie par la propriété spéciale __proto__ (également accessible via Object.getPrototypeOf(obj) en ES5 et versions ultérieures).

 

La Chaîne de Prototypes

 

Quand vous accédez à une propriété ou à une méthode d’un objet, JavaScript cherche d’abord dans l’objet lui-même. Si elle n’existe pas, il se tourne vers le prototype de l’objet. Cette recherche se poursuit le long de la chaîne de prototypes jusqu’à ce que la propriété soit trouvée ou que la chaîne se termine.

 

Prenons un exemple simple :

 

 

 

const parentObj = {
    greet: function() {
        console.log('Bonjour du parent de l'Objet Parent!');
    }
};

const childObj = Object.create(parentObj);
childObj.sayBye = function() {
    console.log('Au revoir de l'Objet Enfant !');
};

childObj.greet(); // 'Bonjour du parent de l'Objet Parent!'
childObj.sayBye(); // 'Au revoir de l'Objet Enfant !'
 
 
 Dans cet exemple, childObj hérite de parentObj. Lorsque vous appelez childObj.greet(), JavaScript recherche la méthode greet dans childObj. Ne la trouvant pas, il la cherche ensuite dans parentObj.
 
 
 

Prototype Chain (Chaîne de prototypes)

 
 

La « chaîne de prototypes » (ou prototype chain) est la chaîne d’héritage qui lie les objets entre eux à travers leurs prototypes. Si un objet ne possède pas une propriété demandée, JavaScript la recherche dans son prototype, puis dans le prototype de ce prototype, et ainsi de suite jusqu’à ce qu’il atteigne null, qui est le prototype final de la chaîne.(voir article sur l’héritage des prototypes)

 

Lien entre Fonctions Constructeurs et Prototypes

 
 

Les fonctions constructeurs en JavaScript utilisent les prototypes pour partager des méthodes entre toutes les instances créées par cette fonction. Par exemple, si vous créez un constructeur Person, toutes les instances de Person partageront le même prototype, ce qui est efficace pour la mémoire et facilite la gestion des méthodes partagées.

 

Modifier le Prototype

Vous pouvez également modifier le prototype d’un objet après sa création. Cela est souvent réalisé en modifiant le prototype d’un constructeur.

 

Exemple avec un Constructeur :

 

function Person(name, age) {
    this.name = name;
    this.age = age;
}
// Ajout d'une méthode au prototype
Person.prototype.introduce = function() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
};
// Création d'une instance
const john = new Person('John', 30);
john.introduce(); // 'Hi, I'm John and I'm 30 years old.'

const jane = new Person('Jane', 25);
jane.introduce(); // 'Hi, I'm Jane and I'm 25 years old.'
 
 
Dans cet exemple, introduce est définie sur Person.prototype. Ainsi, toutes les instances de Person peuvent accéder à introduce sans que cette méthode ne soit dupliquée pour chaque objet.
 
 
 

Attention différence des fonctions constructrices et l’ajout de méthode aux prototypes avec les objets directement

 
 

Effectivement, il y a une distinction importante à faire entre les objets créés littéralement (par des objets littéraux ou Object.create) et ceux créés via des fonctions constructrices ou des classes.

 

Cette distinction explique pourquoi l’ajout de méthodes aux prototypes semble parfois ne pas fonctionner pour les objets créés littéralement.

 

Lors de la Création d’Objets Créés Littéralement

 
 

Lorsque vous créez un objet avec une syntaxe littérale ou via Object.create, ce dernier est directement lié à un prototype spécifique (comme Object.prototype par défaut).

Contrairement aux objets créés par des constructeurs, l’ajout de méthodes au prototype d’un objet littéral directement n’est pas possible de manière automatique, car ces objets ne possèdent pas un constructeur spécifique dont le prototype pourrait être modifié pour affecter toutes les instances.

 

Exemple pour ajouter une méthode à un prototype dans un Objet Littéral Il faudra passer par Object :

 
 
const myObject = {
    name: "John",
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

// Ajouter une méthode directement à cet objet ne changera pas son prototype
myObject.sayGoodbye = function() {
    console.log("Goodbye!");
};

// Mais si vous ajoutez une méthode au prototype de Object, ce changement n'affectera pas myObject
Object.prototype.sayHello = function() {
    console.log("Hello from Object prototype");
};

// myObject.sayHello(); // Fonctionne
 
Dans cet exemple, myObject hérite de Object.prototype, mais ajouter des méthodes au prototype de Object ne modifie pas myObject de manière spécifique. La méthode sayHello ajoutée à Object.prototype sera accessible pour tous les objets, y compris myObject.
 
 
 

En JavaScript, Object est une fonction constructeur qui est au cœur de tout le système d’objets du langage. Tous les objets en JavaScript sont des instances d’Object ou de ses dérivés. Comprendre ce qu’est Object est essentiel pour maîtriser la programmation orientée objet dans ce langage.

 

Object : La Base de Tous les Objets

 
 

Object est la superclasse (ou prototype de base) de tous les objets en JavaScript. Lorsque vous créez un objet littéral, une fonction, un tableau, ou même un autre type d’objet personnalisé, ces objets héritent tous de Object.prototype. Cela signifie qu’ils ont accès à des méthodes et des propriétés définies sur le prototype d’Object.

 

Création d’un Objet

 

Il existe plusieurs façons de créer un objet en JavaScript, mais au fond, chaque méthode se rattache à Object.

 

Littéraux d’Objets

 
 

 

 

 
 
const obj = {
    name: "Fabrice",
    age: 33
};
 
 

Dans cet exemple, obj est un objet littéral, qui est une instance d’Object.

 

Utilisation de new Object()

 
 
 
const obj = new Object();
obj.name = "Jean";
obj.age = 28;
 
 
 

Ici, l’objet obj est explicitement créé en utilisant le constructeur Object. Cette méthode est équivalente à la création d’un objet littéral.

 

Utilisation de Object.create()

 
 
 
const prototype = {
    greet() {
        console.log("Hello!");
    }
};

const obj = Object.create(prototype);
obj.name = "Claude";
obj.greet(); // 'Hello!'
 

 

Les Propriétés et Méthodes d’Object

Object possède plusieurs méthodes et propriétés utilitaires essentielles pour manipuler les objets.  (voir article sur les objets) .

 

 

Les Objets Créés avec des Fonctions Constructrices

 

Lorsque vous utilisez une fonction constructrice pour créer un objet, vous pouvez modifier le prototype de cette fonction, ce qui affecte toutes les instances créées par ce constructeur. C’est pourquoi ajouter une méthode au prototype d’une fonction constructrice fonctionne comme prévu.

 

Pourquoi l’Ajout de Méthodes aux Prototypes Ne Fonctionne pas Toujours avec les Objets

 
 

L’une des raisons pour lesquelles l’ajout de méthodes au prototype peut ne pas fonctionner comme attendu avec des objets créés littéralement est que ces objets n’ont pas de constructeur spécifique autre que Object. Donc, les modifications apportées à Object.prototype affectent tous les objets qui n’ont pas un prototype spécifique, mais pas nécessairement comme on pourrait le vouloir pour des objets individuels.

 

 

 

Travailler avec des Objets Littéraux et les Prototypes

 
 

Si vous souhaitez étendre les fonctionnalités des objets littéraux de manière similaire à ce que vous faites avec des fonctions constructrices, vous pouvez créer un prototype personnalisé et utiliser Object.create.

 

Mais il existe encore d’autre méthode pour les prototypes avec Object. comme :

 

Object.setPrototypeOf qui est une méthode en JavaScript qui permet de définir explicitement le prototype d’un objet existant. Elle fait partie des outils avancés de manipulation des prototypes, mais son utilisation doit être faite avec précaution en raison des implications en termes de performance et de lisibilité du code.

 

 

Comprendre Object.setPrototypeOf

 

 

La méthode Object.setPrototypeOf(obj, prototype) change le prototype de l’objet obj pour qu’il devienne prototype. Le prototype d’un objet détermine à quel autre objet (ou null) cet objet va déléguer les propriétés non trouvées directement sur lui.

Syntaxe

 
 
 
Object.setPrototypeOf(obj, prototype);
 
 
  • obj : L’objet dont vous souhaitez changer le prototype.
  • prototype : Le nouvel objet prototype ou null pour retirer l’héritage. (voir article héritage)

 

Exemple d’Utilisation

 

Imaginons que vous avez un objet simple, et vous souhaitez lui donner un nouveau prototype :

 
 
 
const car = {
    drive() {
        console.log('Driving');
    }
};

const bike = {
    pedal() {
        console.log('Pedaling');
    }
};

// Changer le prototype de 'bike' pour qu'il hérite de 'car'
Object.setPrototypeOf(bike, car);

bike.drive(); // 'Driving'
 
 

Dans cet exemple, avant l’appel à Object.setPrototypeOf, l’objet bike ne possédait pas de méthode drive. Cependant, en changeant son prototype pour celui de car, bike hérite désormais de la méthode drive.

 

 

Quand Utiliser Object.setPrototypeOf ?

 
 

  1. Héritage Dynamique : Vous pouvez utiliser Object.setPrototypeOf lorsque vous avez besoin de changer dynamiquement le comportement d’un objet en modifiant son prototype. Cela peut être utile dans des situations où les objets doivent changer de rôle ou de comportement en cours de route.

  2. Refactoring ou Migration : Lorsque vous refactorez du code ou migrez des objets vers de nouvelles structures, Object.setPrototypeOf peut vous aider à modifier les prototypes sans recréer des objets à partir de zéro.

 
 

Limites et Précautions

 
 

Bien que Object.setPrototypeOf soit puissant, son usage comporte plusieurs inconvénients :

 

 

1. Impact sur la Performance

Changer le prototype d’un objet existant peut affecter négativement les performances. JavaScript optimise habituellement les objets en présumant que leur structure (y compris leur prototype) ne change pas après leur création. Lorsque vous modifiez un prototype avec Object.setPrototypeOf, cela peut forcer le moteur JavaScript à désoptimiser le code pour cet objet, ralentissant ainsi son exécution.

 

2. Complexité Accrue

Utiliser Object.setPrototypeOf peut rendre le code plus difficile à comprendre et à maintenir. Les objets qui changent de prototype en cours de route peuvent être déroutants pour les autres développeurs, car le comportement attendu d’un objet pourrait changer de manière inattendue.

 

3. Privilégier Object.create

Dans de nombreux cas, il est préférable d’utiliser Object.create pour créer un nouvel objet avec le prototype désiré dès le départ plutôt que de changer le prototype d’un objet existant.

 
 
 
 
const car = {
    drive() {
        console.log('Driving');
    }
};

const bike = Object.create(car);
bike.pedal = function() {
    console.log('Pedaling');
};

bike.drive(); // 'Driving'
 
 

Avec Object.create, vous définissez directement le prototype lors de la création de l’objet, ce qui est plus performant et plus clair.

 

Object.getPrototypeOf : Le Complément

 

Le complément naturel de Object.setPrototypeOf est Object.getPrototypeOf, qui vous permet de récupérer le prototype actuel d’un objet.

 
 
 
const proto = Object.getPrototypeOf(bike);
console.log(proto === car); // true
 

Cette méthode est utile pour inspecter la chaîne de prototypes et comprendre d’où proviennent les propriétés et méthodes d’un objet.

 

Object.setPrototypeOf est une méthode qui doit être utilisée avec précaution. Elle permet de modifier dynamiquement le prototype d’un objet, offrant ainsi de la flexibilité dans la gestion des objets et de leur héritage.

Cependant, en raison de son impact potentiel sur les performances et de la complexité qu’elle peut introduire, il est souvent recommandé de l’utiliser dans des cas spécifiques et d’envisager des alternatives comme Object.create pour la plupart des besoins en héritage de prototypes.

 

Voici Les Limites des Prototypes

 

Bien que puissants, les prototypes ont certaines limites :

 

Difficultés de Débogage

 

L’utilisation extensive des prototypes, surtout dans les chaînes complexes, peut rendre le débogage difficile. Il peut devenir ardu de suivre la chaîne de prototypes pour comprendre d’où provient une méthode ou une propriété.

 

Héritage Multiniveau

 

JavaScript ne supporte pas nativement l’héritage multiple (c’est-à-dire hériter de plusieurs prototypes à la fois). Vous ne pouvez pas directement créer un objet qui hérite de plusieurs objets en même temps. Cette limitation peut parfois compliquer la modélisation de concepts complexes. (voir article héritage des prototypes)

 

Coût de Performance

 

Bien que le mécanisme de chaîne de prototypes soit efficace, l’accès aux propriétés et méthodes via cette chaîne peut entraîner des coûts de performance si elle est trop longue. Chaque recherche de propriété dans la chaîne prend du temps, surtout si elle doit parcourir plusieurs niveaux avant de trouver la propriété recherchée.

 

Propriétés Non-Enumérables

 

Les propriétés définies sur un prototype sont non-enumérables par défaut. Cela signifie qu’elles ne seront pas listées lors d’un for...in sur une instance. Ceci est souvent un avantage, mais peut aussi être source de confusion lorsque vous essayez de parcourir les propriétés d’un objet et que certaines semblent « cachées ».

 

Comment Manipuler et Tirer Parti des Prototypes ?

 

Pour manipuler les prototypes efficacement, voici quelques bonnes pratiques courantes :

 

Définir des Méthodes sur le Prototype

 

Définissez les méthodes partagées par toutes les instances d’un constructeur sur son prototype pour éviter la duplication et économiser de la mémoire.

 

Utiliser Object.create pour L’héritage

 

Utilisez Object.create pour créer des objets avec un prototype spécifique, ce qui offre une grande flexibilité dans la création de hiérarchies d’objets.

 

Manipuler les Prototypes avec Précaution

 

Soyez prudent lorsque vous modifiez directement un prototype existant, car cela peut affecter tous les objets qui en héritent, ce qui peut entraîner des comportements inattendus dans votre code.

 

Vérifier l’Héritage

Utilisez instanceof et Object.getPrototypeOf() pour vérifier si un objet hérite d’un certain prototype ou pour obtenir des informations sur la chaîne de prototypes.

 
 
 
console.log(john instanceof Person); // true
console.log(Object.getPrototypeOf(john) === Person.prototype); // true
 
 

Les Prototypes dans ES6 et les Classes

 

Avec l’introduction des classes en ES6, la syntaxe pour créer des objets et gérer l’héritage est devenue plus intuitive. Cependant, sous le capot, les classes ne sont qu’une abstraction sur les prototypes. Ainsi, tout ce que vous faites avec les classes repose toujours sur le système de prototypes.

 

Voici un Exemple avec des Classes

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

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Rex');
dog.speak(); // 'Rex barks.'
 

Dans cet exemple, Dog hérite de Animal, et la méthode speak est redéfinie dans Dog. Le concept de prototype est toujours en jeu, mais la syntaxe est plus simple.

 

Pour Résumé :

 

Les prototypes en JavaScript sont une fonctionnalité de la POO (programmation orientée objet), mais ils nécessitent une bonne compréhension pour être utilisés efficacement.

Bien qu’ils puissent parfois compliquer le code, ils permettent une grande réutilisabilité et extensibilité. Maîtriser les prototypes te permettra de créer des architectures de code orientée objet et en modules.

En Bref, si tu maîtrise les prototypes, tu possèdes l’une des méthodes les plus puissantes pour écrire du code JavaScript avancé.

Et pour continuer à progresser, n’oublie pas ce bonus exclusif pour t’aider à aller plus loin dans la compréhension des concepts de JavaScript.

Un Guide offert pour les développeurs qui veulent perfectionner leurs compétences en JavaScript, j’offre un bonus exclusif. Télécharge ce Guide gratuit « Avec plein de Secrets et d’astuces en JavaScript » pour découvrir des techniques et astuces supplémentaires qui amélioreront ton code et ton expertise.

 

Le Guide Bonus Exclusif

 

Va plus loin, avec ce Guide Bonus Exclusif rien que pour Toi !

Voici un guide complet sur le JavaScript, où tu verras des techniques pour performer en programmation Js.

Ce guide te permettra de perfectionner tes compétences et de devenir un expert JavaScript. Ne le rate pas et développe ton expertise !

 

En adoptant ce qu’il contient, tu rends ton apprentissage de JavaScript plus performant avec une plus grande facilité tous les jours . Voici de quoi enrichir tout de suite ton savoir-faire ? Le guide complet t’attend !

 
 

Quelques liens en supplément de ce cours :

https://developpeur-pro.com/cours-javascript-les-bases

https://developer.mozilla.org/fr

https://stackoverflow.com/

Rejoignez notre Newsletter et Restez Informé !

Vous souhaitez rester à jour avec les dernières tendances et actualités du monde du développement et le métier de développeur. Comment devenir développeur pro ? Rejoignez notre newsletter pour obtenir un accès exclusif à du contenu premium, des astuces de codage, des mises à jour sur les nouvelles fonctionnalités et bien plus encore !

Avantages de l’Inscription

  • Restez Informé: Recevez des articles informatifs sur les dernières avancées et les meilleures pratiques de codage et les softkills.
  • Promos Exclusives: Accédez à des formations détaillés et à des exemples de code pour améliorer vos compétences en programmation.
  • Aperçus des Nouveautés: Soyez parmi les premiers à découvrir les nouvelles fonctionnalités et les frameworks émergents dans l’écosystème du développement FrontEnd et Backend.
  • Communauté Engagée: Rejoignez une communauté passionnée de développeurs et partagez vos idées, questions et expériences.

Comment S’Inscrire

C’est simple et rapide ! Remplissez le formulaire d’inscription avec votre adresse e-mail et cliquez sur « S’Inscrire ». Vous recevrez régulièrement notre newsletter dans votre boîte de réception.

L’inscription à notre newsletter est un moyen idéal de rester informé et de progresser dans le domaine de la programmation et du développement pour devenir un développeur professionnel ou une développeuse pro.

S'inscrire Maintenant

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *