Accueil » JavaScript » Comprendre le prototypal inheritance en JavaScript

Comprendre le prototypal inheritance en JavaScript

Prototypal inheritance est un concept propre à JavaScript qui fait l’objet de nombreuses question en entretien et n’est pas simple à expliquer. En programmation, on évite au maximum de dupliquer du code, et le prototypal inheritence répond à cette problématique. Le prototypal inheritance nous permet d’étendre un objet pour qu’il accède aux propriétés et fonctions d’un autre.

C’est quoi [[Prototype]] ?

En JavaScript, un objet est un ensemble de propriétés et de fonctions. Chaque objet possède une propriété cachée qui s’appelle [[Prototype]]. La propriété [[Prototype]] d’un objet fait toujours référence à un autre objet ou a null. Lorsqu’un objet a un autre objet en tant que [[Prototype]] il a accès à toutes les fonctions et toutes les propriétés de l’objet [[Prototype]] ainsi que celle du [[Prototype]] du [[Prototype]], et cela, en boucle jusqu’à qu’un objet ai pour [[Prototype]] la valeur null. Pour assigner un [[Prototype]] vous pouvez passer par la propriété __proto__ qui est aussi accessible via getteur et setteur.

const language = {
    usefull: true,
};

const javascript = {
    easy: true,
    __proto__: language,
};

console.log(javascript.usefull); // true

Que vos this quand on utilise [[Prototype]] ?

La valeur de this dans un objet en JavaScript fait référence à l’objet présent avant le point lors d’un appel a une fonction. Lorsque l’on utilise des [[Prototype]] cela ne change pas. Imaginons deux objets A et B, B a une fonction qui utilise this et A a comme [[Prototype]] B, si on appelle la fonction de B a partir de A alors this vaudra A et si on l’appelle depuis B alors this vaudra B.

const language = {
    code() {
        return `Je code du ${this.name}`;
    },
};

const javascript = {
    name: "JavaScript",
    __proto__: language,
};

console.log(javascript.code()); // Je code du JavaScript
console.log(javascript.__proto__.code()); // Je code du undefined
console.log(language.code()); // Je code du undefined

On peut uniquement lire les propriétés d’un prototype

Lorsque vous manipulez un objet, vous pourriez avoir besoin de modifier une propriété et vous pouvez vous demander comment cela fonctionne avec la propriété d’un [[Prototype]]. Quand vous accéder à une propriété d’un objet, JavaScript va parcourir la chaîne de prototype de votre objet afin de trouver le premier objet qui implémente cette propriété. Donc si je redéfinis une propriété d’un [[Prototype]] directement dans l’objet, c’est bien celle de notre objet qui sera utilisé. Modifier une propriété d’un objet ne va pas répercuter cette modification sur ses prototypes qui implémente cette propriété.

const language = {
    code() {
        return "Je code";
    },
};

const javascript = {
    code() {
        return "Je script du JavaScript";
    },
    __proto__: language,
};

console.log(javascript.code()); // Je script du JavaScript
console.log(language.code()); // Je code

C’est quoi le prototypal inheritance en JavaScript ?

Tous les objets possèdent une propriété cachée qui s’appelle [[Prototype]] faisant référence à un autre objet ou a null.
JavaScript va parcourir la chaîne de prototype pour trouver le premier objet dans la chaîne qui implémente la propriété afin de l’utiliser.
Lorsqu’on appel obj.fonction(), this dans fonction() vaudra toujours obj, même fonction proviens d’un prototype d’obj.
On peut uniquement lire les propriétés d’un prototype, si on essaye de les modifier, on va uniquement override la propriété dans notre objet.

Proposition de lectures

Comprendre le lazy loading

Le lazy loading est un moyen de chargé en différé des images, du contenu et des modules.

Lire

C’est quoi les SPA ?

Les SPA pour Single Page Application est une implémentation d’une application web, elle consiste à mettre à jour le contenu de la page lors de la navigation au lieu de recharger la page entièrement.

Lire