Principes fondamentaux de JavaScript: Chaînes de prototypes

Dans cet article, nous allons en apprendre davantage sur les prototypes en JavaScript, en particulier sur la chaîne de prototypes, sur son fonctionnement, sur son utilisation et sur ses avantages. Nous allons apprendre comment les prototypes permettent à JavaScript de concrétiser le concept de programmation orientée objet et ce que cela signifie.

Si vous utilisez JavaScript depuis un moment, vous devez avoir entendu dire quelque part que «tout ce qui est en JavaScript est un objet. ”Eh bien, ce n'est pas tout à fait vrai!

Nous savons pertinemment qu'en JavaScript, nous pouvons déclarer un objet de deux manières simples. Nous déclarons un objet en utilisant le formulaire déclaratif:

     const user = {
      nom: "Leonardo",
      âge: 22
    };

Ou, nous pouvons déclarer un objet en utilisant la forme déconstruite:

     const user = new Object ();
    user.name = "Leonardo";
    user.age = 22;

En utilisant l’un ou l’autre de ces formulaires, vous atteignez le même objectif final: créer un objet. Bien que l'utilisation de la forme déconstruite pour créer des objets ne soit pas très courante, vous devrez créer les propriétés une à une de ces propriétés.

Nous savons également avec certitude que JavaScript nous avons six types principaux: string numéro boolean null indéfini et . object .

Le type primaire null est désigné comme type d'objet, mais c'est simplement à cause d'un bogue dans le langage qui fait que typeof null renvoie la chaîne "object " de manière incorrecte (et source de confusion).

La phrase dont nous avons parlé, selon laquelle" tout en JavaScript est un objet en JavaScript "n'est pas tout à fait vraie. La vérité est que sauf null et undefined tout ce qui est en JavaScript est dérivé de Object .

En JavaScript, nous avons quelque chose que nous appelons "type d'objet", qui sont des primitives complexes. Les fonctions en JavaScript sont un type de "sous-types d'objet" – ce sont des objets appelables, dits de "première classe", donc ils ne sont en fait que des objets normaux.

Nous avons aussi un élément appelé . ] «Objets intégrés» en JavaScript. Vous les avez probablement utilisées beaucoup auparavant, mais vous ne les avez peut-être pas remarquées. Par exemple, si vous souhaitez créer une chaîne à l'aide de sa fonction intégrée, comment procéderiez-vous?

     const name = new String ("Leonardo");

Maintenant, si nous utilisons le type de sur notre nom nous allons voir qu’il s’agit d’un objet.

     de type nom;

    // Résultat:
    // "objet"

Nous avons les types intégrés suivants en JavaScript: String Numéro Boolean Objet Array Date RegExp et Erreur .

Ces «types incorporés» sont similaires. -in fonctions: ils peuvent être utilisés en tant que constructeur – en les utilisant avec l'opérateur new – et le résultat sera un objet nouvellement construit du sous-type.

Maintenant, nous en savons un peu Quelques mots sur les objets et les types intégrés dans JavaScript, nous pouvons en apprendre davantage sur les prototypes et leur fonctionnement sous le capot.

Prototypes

Nous savons maintenant que presque tout dans JavaScript est un objet – à part les fonctions qui sont un objet. Sous-type et certains types principaux, le reste peut être considéré comme un objet.

Les prototypes en JavaScript sont simplement un ensemble spécial de propriétés qu'un objet détient. s, et chaque objet en JavaScript possède son propre ensemble de propriétés de prototype . Puisque presque tout est un objet en JavaScript, nous pouvons également tirer parti de ces propriétés spéciales.

Ainsi, par exemple, imaginons que nous avons un objet appelé utilisateur ainsi:

     const utilisateur = {
      nom: "Leonardo",
      âge: 22 ans,
      bio: "Développeur Full Stack"
    };

Imaginons maintenant que nous voulions consoler l’âge de notre utilisateur . Nous ferions ceci:

     console.log (user.age);

Mais que se passe-t-il si nous n’avons pas de propriété age dans notre utilisateur ? Pour déterminer si un objet a une propriété spécifique, nous pouvons utiliser la méthode hasOwnProperty qui est une méthode intégrée dans laquelle nous pouvons faire appel à un objet pour déterminer s'il existe une propriété spécifique sur cet objet. [19659004] console.log (user.hasOwnProperty ("age"));

    // Résultat:
    // vrai

Mais d'où vient exactement cette méthode hasOwnProperty ? Chaque objet de JavaScript reçoit son comportement de base d'un autre objet, Object.prototype . Ce Object.prototype contient de nombreux utilitaires communs que nous pouvons utiliser dans tout notre code, ce qui signifie que tous les objets en JavaScript l’ont.

Par exemple, vous avez probablement utilisé fréquemment le . ] .toString () méthode intégrée, qui est une méthode pour transformer un élément en chaîne. Si vous essayez de l’utiliser dans notre objet utilisateur, vous constaterez que cela ne fonctionnera pas correctement car vous essayez de convertir un objet entier en chaîne. Une autre méthode intégrée que nous utilisons beaucoup dans notre code de nos jours est la .valueOf () où nous pouvons vérifier la valeur d'un objet ou d'une propriété spécifique.

Vous devez comprendre le point ici is: chaque objet en JavaScript possède un ensemble spécial de propriétés et de méthodes que nous pouvons appeler à tout moment, car chaque objet reçoit son comportement de base à partir du Object.prototype .

Prototype Chain

Depuis tous les objets. en JavaScript ont la propriété prototype si on l'utilise correctement, on peut imiter l'héritage en Javascript. Le prototype n'est rien de plus qu'une référence à un autre objet et est utilisé lorsque JavaScript ne peut pas trouver une propriété spécifique d'un objet que vous recherchez.

Si vous essayez d'appeler une propriété sur un objet, JavaScript ira à l'objet prototype et le cherchera jusqu'à ce qu'il le trouve. S'il ne trouve pas la propriété spécifique que vous recherchez, il renverra undefined pour vous. Sinon, il retournera la propriété spécifique. Il s’agit essentiellement de la chaîne de prototypes en JavaScript.

Pour voir la chaîne de prototypes fonctionner dans la pratique, créons un exemple. Faisons un objet appelé Person qui ressemble à ceci:

     const Person = {
      printName: function () {
       return console.log (`Bonjour, mon nom est $ {this.name}`);
      }
    };

Cet objet aura simplement une fonction appelée printName pour le moment, qui va nous imprimer notre nom. Créons maintenant une instance pour cet objet, appelée myUser qui va ressembler à ceci:

     const myUser = Object.create (Person);

Comme vous pouvez le constater, nous venons de créer un objet vide faisant référence à l'objet Person . Donnons-lui un nom.

     myUser.name = "Leonardo";

Il convient de noter ici que la chaîne que nous attribuons à myUser n’est pas affectée à l’objet Person mais uniquement à myUser . Les affectations aux objets ne vont jamais à leur prototype.

Maintenant, utilisons la fonction printName pour imprimer le nom de notre utilisateur.

     user.printName ();

    // Résultat:
    // Bonjour, je m'appelle Leonardo

Lorsque nous appelons la propriété printName de notre objet, JavaScript essaie de trouver la propriété. Premièrement, il va regarder à l'intérieur de l'objet myUser puisque nous l'avons instancié à partir de l'objet Person . Il ne trouve rien car l’adresse printName est à l’intérieur de l’objet Person . Ensuite, il ira à l’objet Person et nous retournera le printName . Lorsque nous nous référons à cela sur le Person dans notre cas, il fait référence à myUser l'objet que nous avons instancié à partir de Person .

En JavaScript, vous devez vous entraîner et lire beaucoup de choses sur les prototypes et les chaînes de prototypes. Depuis que JavaScript est au cœur de JavaScript depuis le début, de nombreux développeurs ignorent en quelque sorte ces concepts et ne savent pas exactement comment ils fonctionnent, ce qui est une erreur. Ceci est très lié aux concepts de programmation orientée objet, tels que l'héritage, et si vous maîtrisez ces concepts et comprenez profondément leur fonctionnement, cela peut vous aider non seulement pour les questions d'entrevue de votre prochain changement de carrière, mais également lorsque vous essayez de: écrivez également du code et des bibliothèques plus avancés.

Conclusion

Dans cet article, nous avons appris à propos des objets en JavaScript que l'ancienne phrase «tout dans JavaScript est un objet» n'est pas tout à fait vrai, et enfin sur les prototypes et les chaînes de prototypes. Ce sont des concepts très importants à connaître, car ils sont au cœur de JavaScript et des concepts de programmation orientés objet.