JavaScript Prototypal Inheritance

Summary : dans ce tutoriel, vous apprendrez comment fonctionne l’héritage prototypique JavaScript.

Introduction à l’héritage prototypique JavaScript

Si vous avez travaillé avec d’autres langages de programmation orientés objet tels que Java ou C++, vous avez été familiarisé avec le concept d’héritage.

Dans ce paradigme de programmation, une classe est un plan pour créer des objets. Si vous voulez qu’une nouvelle classe réutilise la fonctionnalité d’une classe existante, vous pouvez créer une nouvelle classe qui étend la classe existante. Cela s’appelle l’héritage classique.

JavaScript n’utilise pas l’héritage classique. Au lieu de cela, il utilise l’héritage prototypique.

Dans l’héritage prototypique, un objet « hérite » des propriétés d’un autre objet via le lien prototype.

L’héritage prototypique de JavaScript et __proto__

Prenons un exemple pour rendre le concept plus clair.

Ce qui suit définit un objet person:

Code language: JavaScript (javascript)

L’objet person a deux propriétés:

• name qui détient une valeur de chaîne de caractères.
• greet qui détient une valeur qui se trouve être une fonction. Le greet est connu comme une méthode de l’objet person.

Par défaut, JavaScript vous fournit une fonction Object() et un objet prototype auquel on peut accéder via la propriété prototype de la fonction Object():

Lorsque vous utilisez la syntaxe du littéral objet pour définir un objet, l’objet est une instance du Object. Par conséquent, l’expression person instanceof Object renvoie true:

Code language: JavaScript (javascript)

Sortie:

Code language: JavaScript (javascript)

L’objet person est également lié au Object.prototype via le lien ].

En d’autres termes, vous pouvez accéder à toutes les propriétés de l’objet Object.prototype via l’objet person. Par exemple:

Code language: JavaScript (javascript)

Sortie:

Code language: JavaScript (javascript)

Le est la conversion par défaut d’un objet en chaîne de caractères.

Lorsque vous appelez la méthode toString() sur l’objet person, JavaScript ne peut pas le trouver. JavaScript suit donc la chaîne de prototypes et recherche la méthode sur l’objet Object.prototype. JavaScript peut trouver la méthode toString() sur l’objet Object.prototype et l’exécute.

Pour accéder au prototype de l’objet person, vous pouvez utiliser sa propriété __proto__:

Code language: JavaScript (javascript)

Sortie:

Code language: JavaScript (javascript)

La suite définit un autre objet appelé teacher. L’objet teacher possède la méthode teach():

Code language: JavaScript (javascript)

Si vous voulez que l’objet teacher accède à toutes les propriétés de l’objet person, vous pouvez définir le prototype de l’objet teacher sur l’objet person :

Code language: JavaScript (javascript)

Notez que vous ne devez jamais utiliser le __proto__ dans le code de production. C’est juste à des fins d’apprentissage et de compréhension.

Maintenant, l’objet teacher peut accéder à la propriété name et à la méthode greet() de l’objet person via la chaîne de prototypes:

Code language: JavaScript (javascript)

Sortie:

Code language: JavaScript (javascript)

Lorsque vous appelez la méthode greet() sur l’objet teacher, JavaScript la trouve sur l’objet teacher en premier.

Puisque JavaScript ne peut pas trouver la méthode sur l’objet teacher, il suit la chaîne du prototype et cherche la méthode sur l’objet person. Cette fois, JavaScript peut trouver la méthode sur l’objet person et exécute la méthode greet().

En JavaScript, on dit que l’objet teacher hérite des propriétés de l’objet person. Et c’est l’héritage prototypique.

Une façon standard de mettre en œuvre l’héritage prototypique dans ES5

ES5 a fourni une façon standard de travailler avec l’héritage prototypique en utilisant la méthode Object.create().

Notez que maintenant vous devriez utiliser les nouveaux mots-clés ES6 class et extends pour mettre en œuvre l’héritage. C’est beaucoup plus simple.

La méthode Object.create() crée un nouvel objet et utilise un objet existant comme prototype du nouvel objet:

Code language: JavaScript (javascript)

La méthode Object.create() accepte deux arguments:

• Le premier argument (proto) est un objet utilisé comme prototype du nouvel objet.
• Le deuxième argument (propertiesObject), s’il est fourni, est un objet facultatif qui définit des propriétés supplémentaires pour le nouvel objet.

Supposons que vous ayez un objet person:

Code language: JavaScript (javascript)

Ce qui suit crée un objet teacher vide avec le __proto__ de l’objet person:

Code language: JavaScript (javascript)

Après cela, vous pouvez définir des propriétés pour l’objet teacher :

Code language: JavaScript (javascript)

Ou vous pouvez effectuer toutes ces étapes en une seule déclaration comme suit:

Code language: JavaScript (javascript)

ES5 a également introduit la méthode Object.getPrototypeOf() qui renvoie le prototype d’un objet. Par exemple:

Code language: JavaScript (javascript)

Sortie:

Code language: JavaScript (javascript)

Sommaire

• L’héritage permet à un objet d’utiliser les propriétés et les méthodes d’un autre objet.
• JavaScript utilise l’héritage prototypique réalisé via le linkage de prototype.

.