Maîtriser JavaScript 5 : les fondamentaux des objets

1. Introduction: Nous avons déjà terminé une section sur les fondamentaux essentiels. Cependant, dans cette section, je souhaite aborder fondamentaux critiques spécifiques aux objets. Dans cette section, après un bref aperçu de la nature des objets en JavaScript, nous traiterons principalement du concept de prototypes. Comprendre les prototypes en JavaScript est absolument essentiel. Certains parlent des prototypes comme d'un pilier du JavaScript et cela a vraiment du sens. Les prototypes sont associés à des objets. Et comme nous l'avons vu précédemment, les objets sont partout en JavaScript. Cela permet également de créer des prototypes partout. En abordant les prototypes, nous allons d'abord explorer ce qu'ils sont et comment ils affectent les objets. Nous aborderons les avantages des prototypes, la chaîne de prototypes et les manières dont nous pouvons travailler avec les propriétés et les méthodes fournies par les prototypes. Je ne pense pas pouvoir exagérer l' importance de comprendre les prototypes en JavaScript. Donc, même si vous pensez avoir une bonne compréhension de ce sujet, je vous encourage tout de même à parcourir cette section en guise de révision. Très bien, c'est assez d'informations préliminaires. Allons-y et commençons. 2. La nature des objets: Si vous avez déjà une connaissance approfondie de la nature des objets en JavaScript, vous pouvez ignorer cette rubrique. Je l'ai inclus parce qu' avant de commencer à parler de prototypes, je veux m'assurer que la nature des objets est comprise. Cela est particulièrement important pour ceux qui utilisent JavaScript depuis une autre langue. Nous avons déjà utilisé des objets à de nombreuses reprises dans ce cours. Il peut donc sembler un peu étrange de couvrir la nature des objets. Maintenant. Cependant, il y en a beaucoup qui fonctionnent avec des objets en JavaScript sans les comprendre complètement. Parfois, il est préférable d' avoir une certaine expérience avec les objets avant de plonger dans la vraie nature des objets, comme nous le faisons dans cette section. Donc, en termes simples, un objet est une valeur composite. Il rassemble plusieurs éléments de données, primitives ou autres objets sous une seule référence. Un objet est une collection non ordonnée de propriétés, et chaque propriété possède un nom et une valeur. Le nom de la propriété est généralement une chaîne, mais il peut également être assemblé. La valeur peut être n'importe quel type de données disponible en JavaScript. Nous parlons donc de propriétés comme ayant des paires nom-valeur. Maintenant, avant d'aller plus loin, permettez-moi de commencer à créer un objet. Certains déclarent la variable. Ensuite, je vais définir cet objet en utilisant un objet littéral. Donc prénom F, je vais juste mettre des informations me concernant ici dans cet objet. Donc, en gros, à l'heure actuelle, nous avons deux propriétés propriété de nom F et une propriété alanine. Et notez que chacune de ces propriétés possède un nom et une valeur. Dans le cas de ces deux, les valeurs sont des chaînes. Maintenant, lorsque vous définissez un objet, chaque propriété doit être séparée par une virgule, ce que j'ai fait ici. Maintenant, le nom est parfois appelé clé. Nous parlons donc également des propriétés en tant que paire clé-valeur. Maintenant, ajoutons un autre type de données. Voici une propriété qui stocke un numéro. Le nom est score, la valeur est 90. Et une propriété qui stocke un booléen. Nous avons maintenant dit que la valeur d'une propriété peut être n'importe quel type de données disponible en JavaScript. Nous pouvons donc créer un autre type d'objet, par exemple un tableau. Donc, si je fais des quiz ici et que je le configure sous forme de tableau, et qu'il contient juste quelques informations sur les quiz , en gros des quiz, les quiz qui ont été nuls, quelque chose comme ça. Voilà un tableau. Un autre type d'objet peut être l'un des objets intégrés disponibles dans JavaScript. Un de ces cours, objet à ce jour. Cet objet est donc créé lorsque je crée simplement un nouvel objet de date et cela devient la valeur de cette propriété. Alors, bien sûr, nous pouvons simplement avoir un objet standard, disons avoir une adresse ici. Et c'est un objet contient des propriétés. Voyons voir, 45 en ville puis en ville. Nous avons donc plusieurs types de données différents associés aux propriétés. Maintenant, la seule chose que nous n'avons pas encore ajoutée c'est que nous n'avons pas ajouté de fonction à une propriété. Et lorsque la valeur est une fonction, on appelle cela une méthode. Donc, en gros, une propriété d'objet qui pointe vers une fonction en tant que méthode. Désormais, les méthodes peuvent être configurées de deux manières différentes. Disons que je voulais une propriété FullName et que ce soit une méthode qui pointe vers une fonction. Voici donc une façon de le configurer. C'est, c'est la méthode traditionnelle. Nous définissons simplement une fonction ici. Maintenant, je l'utilise pour me référer à l'objet. Je prends le nom de famille et je le concaténe juste avec le nom d'Helen. Je l'utilise donc à nouveau. Comme je l'ai dit, il existe deux manières de définir une méthode pour attacher une fonction à une propriété. C'est la méthode traditionnelle. Mais dans une version récente du script Ekman, ils ont simplifié cela afin que je puisse définir la même méthode comme ça. C'est beaucoup plus simple à faire. Maintenant, nous avons créé un objet en utilisant un objet littéral. C'est ainsi que nous l'appelons. Mais il existe plusieurs manières de créer des objets en JavaScript. Par exemple, chaque fois que nous créons une fonction, un objet est créé à l'aide du constructeur de la fonction. Et c'est juste un type d'objet particulier. Chaque fois que nous créons un tableau, un objet est créé à l'aide du constructeur de tableau, qui est un type d'objet spécial. y a donc beaucoup de façons différentes de créer des objets. Mais même lorsque nous créons un objet standard comme je l'ai fait ici. Il y a plusieurs façons de le faire. Et nous examinerons un grand nombre de ces différentes manières de procéder lorsque nous examinerons la section sur la structuration du code à l'aide d'objets et principes orientés objet appliqués à JavaScript. C'est donc ce que nous aborderons certaines de ces différentes manières de créer des objets, car ceux-ci deviennent des motifs. Si vous structurez votre code à l'aide d'objets. Maintenant, allons-y, sauvegardons cet objet et jetez-y un coup d'œil. C'est un peu plus tard et ouvrez la console ici. Et fais simplement OBJ. Et là, nous pouvons voir l'objet et toutes ses différentes propriétés, les paires nom-valeur, que nous voyons à l'intérieur de cet objet. Désormais, pour accéder à une valeur associée à une propriété, nous utilisons traditionnellement la syntaxe à points. Je peux donc accéder à F9 comme ça et il affiche la valeur de cette propriété particulière. Mais nous ne nous limitons pas à la syntaxe des points. Nous pouvons également utiliser des crochets. Et cela devient très utile lorsque nous devons faire certaines choses par programmation. Ainsi, par exemple, si je passe une adresse de chaîne entre crochets, elle recherchera l'adresse OBJ point et renverra la valeur de cette propriété, comme nous pouvons le voir ici. Désormais, cela peut également être utilisé lors de l'attribution de valeurs à un objet. Permettez-moi donc de revenir en arrière sur le code Visual Studio ici. Et ici, je vais d' abord définir quelques variables. L'un est le nom des données. Je vais définir cela comme une finale à cordes. Et puis l'autre. Allons simplement à Data Val. Et fixons cela à 80. Nous allons maintenant utiliser ces valeurs pour créer une autre propriété sur l'objet OBJ. Maintenant, nous pouvons le faire littéralement à l'intérieur de cet objet. On pourrait le faire comme ça. Je mets des crochets puis le nom des données, c'est ce que je veux. Je veux que final soit le nom de la paire nom-valeur. J'ai donc mis des crochets autour. Ensuite, j'ai mis le côlon comme ça. Ensuite, je peux simplement y associer la valeur. Maintenant, allons-y, sauvegardons cela et jetons un coup d'œil à l'objet. Assurez-vous que c'est bien ce que nous voyons. Donc, si j'ouvre cet objet et que nous avons le final et qu'il fait 80, cela a fonctionné pour nous. Maintenant, une autre solution aurait pu être de l'attribuer ici. Je pourrais faire OBJ. Puis, entre crochets, nom des données. Vous pouvez voir en ce moment qu'il récupère la valeur afin que nous puissions l'utiliser pour récupérer ou pour la définir. Si je le mets à 90. Qu'est-ce qui se passe ? sensible aux majuscules. On y va. Le score est désormais de 90. Maintenant, une autre chose nous montre que les objets sont mutables, c'est-à-dire qu'ils peuvent être modifiés. Maintenant, même si nous avions défini cet objet avec le mot-clé const, cela nous empêcherait d'attribuer une autre valeur à cette variable. C'est tout ce qui se passerait. Nous pouvons toujours modifier toutes les propriétés de l'objet car les objets sont modifiables. L'utilisation de const ne nous empêchera donc pas de modifier les propriétés à l'intérieur d'un objet. Maintenant, certaines commandes nous aident à rendre objets plus immuables afin que nous ne puissions pas les modifier. Pour introduire cela, nous devons être conscients que chaque propriété contient des attributs. Les attributs sont associés à chaque propriété d'un objet, et ces attributs déterminent ce que nous pouvons faire avec cette propriété. Permettez-moi donc de passer en revue les trois principaux attributs. L'un est inscriptible. L'attribut inscriptible détermine donc si la valeur peut être modifiée ou non. Donc, si un ensemble inscriptible utilise par défaut le nom F, je ne peux pas modifier cette valeur. Cela ne me permettra pas de le changer. Très bien, il y a aussi un, un attribut configurable. Et l'attribut configurable détermine deux choses. Premièrement, il détermine si nous pouvons ou non supprimer la propriété de l'objet. Donc, s'il est faux, nous ne pouvons pas le supprimer. L'autre élément qui détermine est de savoir si nous pouvons modifier les attributs de cette propriété. Ainsi, une fois les attributs définis, si nous définissons configurable sur false, nous ne pouvons pas modifier ces attributs. C'est ce que cela va nous empêcher de faire. Il y a maintenant une mise en garde à ce sujet. Si nous définissons configurable sur defaults, nous pouvons remplacer writable par false. moteur Javascript le permet, mais c'est le seul scénario dans lequel nous pourrions réellement modifier la configuration si elle était fausse. Maintenant, le dernier attribut que je dois mentionner est énumérable. Désormais, l'attribut enumerable détermine que la propriété est renvoyée par certaines actions. Par exemple, une boucle for-in n'affichera pas une propriété dont l'attribut contient un nombre incalculable de valeurs par défaut, elle n'apparaîtra tout simplement pas. Désormais, par défaut, pour cet objet que nous avons créé ici, par défaut, tous ces paramètres sont définis sur true. Et nous pouvons le constater à l'aide d'une simple commande JavaScript. Laisse-moi juste enregistrer ce que j'ai fait là-bas. Il s'agit d'une méthode statique de constructeur d'objets. C'est un descripteur de propriété propriétaire, il est assez long. Donc, si nous transmettons OBJ puis que nous transmettons la propriété pour laquelle nous voulons voir ses attributs. Faisons le nom F. Il vous renverra les informations à ce sujet. La valeur est donc celle que Steve nous montre, puis writeable est définie sur true, innumerable est définie sur true et configurable est définie sur true, afin que nous puissions voir de quoi il s'agit. Et par défaut, c' est ce qui est attribué à chaque propriété, true, true et true. Maintenant, comment pourriez-vous changer cela ? Eh bien, allons-y et définissons une nouvelle propriété. Permettez-moi de le faire dans Visual Studio Code afin que vous en ayez une trace. Propriété définie. Et puis encore une fois, il s'agit d'une méthode statique, donc d'une propriété définie par un point d'objet. Et puis on fait entrer l'objet. Et puis nous passons dans la propriété. Nous voulons agir. Je vais en créer un nouveau. Donc je vais faire du BD pour mon anniversaire. Maintenant, le troisième paramètre est un objet. Et cet objet contient les attributs que nous voulons définir. L'un est la valeur. Je vais me fixer ce chiffre à 25. Ensuite, nous pouvons utiliser les propriétés inscriptibles, configurables et innombrables dont nous avons parlé. Passons donc à l'écriture. Et définissons cela sur faux. Je vais définir ces valeurs par défaut sur tous ces paramètres, car c'est vrai. Très bien, allons-y et sauvegardons ça. Et maintenant, voyons ce que nous obtenons. Nous jetons donc un coup d'œil à OBJ. Nous pouvons l'ouvrir et nous pouvons voir qu'il existe maintenant une propriété B date et qu'elle est fixée au 25 mai. Pouvons-nous l'afficher ? Obj point ? Bien sûr. Nous pouvons l'afficher. Pouvons-nous le changer ? Eh bien, essayons. Elle. sera j point v. Mettons cela comme étant égal au 25 juin. On dirait que ça change. Et je pense que c'est un problème. On dirait que ça change. Mais lorsque nous affichons à nouveau OBJ et que nous l'ouvrons, ou lorsque nous examinons la propriété BD d'OBJ est toujours définie sur sa valeur d'origine, cela ne nous permet pas de la modifier. Maintenant, qu'en est-il de la propriété configurable ? Essayons de modifier à nouveau cette même propriété, je vais copier la même commande. Essayons de le configurer à nouveau. Et définissons writeable sur true. Maintenant, si j'appuie sur Retour, remarque que nous obtenons un type d'erreur ou que nous ne pouvons pas définir de propriété, cela ne nous permettra pas de le faire. Maintenant, encore une chose que je veux montrer en boucle. Alors allons-y. Et ensuite, nous n'aurons plus que console.log. J'aime bien ça. Il existe donc une boucle for-in pour parcourir toutes les propriétés de l'objet. Maintenant, si nous examinons cela, nous ne voyons pas de BD car il n'est pas énumérable. Essayons encore une chose. Voici une autre méthode statique. Et cela permettra de récupérer les clés. Les clés des paires clé-valeur. La clé de la propriété. Nous appelons également ce nom, mais j'ai mentionné qu'il s' appelait également clés. Donc, si nous affichons cela, cela crée essentiellement un tableau. Mais notez que le jour B est absent et c'est parce que l'attribut énumérable est défini sur false. Il existe maintenant une commande similaire, object point values, qui récupère les valeurs et les place dans un tableau comme celui-ci. Donc, quelques bonnes méthodes statiques à connaître. En gros, en utilisant ces différentes commandes pour vous montrer la nature des objets, quels objets se ressemblent en JavaScript. Avec ces bases, nous sommes prêts à commencer à parler de prototypes, un concept très important lorsqu'il s'agit d'objets en JavaScript. Passons donc à autre chose. 3. Qu'est-ce qu'un prototype et pourquoi ?: Lorsque nous nous penchons sur les prototypes, nous devons d'abord expliquer ce qu' est un prototype et pourquoi il est important. Tout d'abord, qu'est-ce qu'un prototype ? Désormais, presque chaque objet JavaScript est associé à un deuxième objet. Ce deuxième objet est appelé objet prototype. Et l' objet JavaScript peut emprunter des propriétés à cet objet prototype. Maintenant, avant d'entrer dans les détails en examinant des exemples de code réel, réfléchissons à la puissance de ce concept. Disons que nous avions quatre objets utilisateur, comme nous le montrons ici. Utilisateur un, utilisateur, deux, utilisateur, trois, utilisateur car ils ont chacun une propriété de nom F, une propriété de nom N et une propriété de nom L. Et comme nous pouvons le voir, elles ont des valeurs différentes pour ces propriétés, car leurs noms sont différents. Mais disons que chacun de ces objets nécessite une méthode de nom complet. Méthode de nom complet qui renverra le prénom concaténé avec le nom de famille. Nous pouvons donc continuer et définir une fausse méthode pour chacun de ces objets. Mais cela ne semble pas très efficace. En mettant chaque objet qui utilise plus de mémoire, nous nous répétons. Il y a quelques facteurs qui rendent cela inefficace. L'idéal est donc de placer cette méthode sur l'objet prototype. Maintenant, avec la méthode sur l'objet prototype, chaque objet utilisateur peut emprunter cette méthode quand il le souhaite, chaque fois qu'il en a besoin. Et ce n'est qu'à un seul endroit. Si nous devons ensuite y apporter une modification, nous allons apporter une modification à l'objet prototype qui sera disponible pour tous les objets qui utilisent cet objet comme objet prototype. y a donc beaucoup d'avantages. Maintenant, dans cet exemple, je montre l' emprunt d'une méthode, une fonction associée à une propriété. Donc une méthode, si je saisis le nom complet de l'utilisateur avec un point et que je l' invoque dans mon code. Lorsque le code est exécuté, le moteur JavaScript va d' abord regarder un objet sur l'utilisateur. Il va rechercher une propriété de nom complet qu'il peut invoquer, utiliser comme méthode. Quand il ne le trouve pas. Il apparaîtra sur le prototype de l' objet. Le premier endroit où il va regarder. Et s'il le trouve là, il le saisira et l'invoquera. C'est ainsi que les objets empruntent des propriétés à l'objet prototype. Le moteur JavaScript va d'abord regarder l'objet lui-même, mais il ne le trouve pas. Il examinera ensuite le prototype. Mais et si le prototype avait une propriété là-haut dans notre objet prototype ? Et si j'avais la propriété f, fname et lname ? Que se passerait-il alors ? L'objet utiliserait-il sa propre propriété d'après-midi et sa propriété portant le nom L ? Et la réponse est oui, bien sûr, sur la base de ce que nous avons décrit, le moteur JavaScript va trouver cette propriété en utilisant un objet. Il n'aura pas besoin de l' extraire de l'objet prototype. C'est donc une autre caractéristique puissante des prototypes. Nous pouvons avoir des propriétés sur l'objet prototype et les remplacer sur les objets locaux individuels. Cela apporte donc la flexibilité que nous recherchons. Maintenant, j'ai dit que presque chaque objet JavaScript possède un objet prototype auquel il emprunte des propriétés. Il existe donc des situations où nous pouvons avoir un objet sans objet prototype. Mais pour que cela se produise, en tant que développeur, vous devrez le forcer. Ainsi, tout objet créé par des moyens réguliers sera lié à un objet prototype. Cela signifie des tableaux, des dates, des fonctions, des objets JavaScript ordinaires, qui contiennent tous des objets prototypes. Et dans le prochain sujet, nous allons commencer à examiner certains d'entre eux et à examiner les prototypes réels et ce qu'ils apportent à ces objets. Passons donc à autre chose. 4. Les objets du prototype sont partout: Puisque presque chaque objet possède un prototype, examinons certains objets. Examinez le prototype et ce que l'objet gagne grâce à ce prototype. Maintenant, allons-y et commençons par un tableau. Maintenant, je vais faire tout cela sur la console parce que ce ne seront quelques commandes simples et je vais entrer. Nous allons donc le faire ici. Permettez-moi donc de commencer par créer un tableau. Donc, un tableau très simple, il va juste contenir trois chiffres comme ça. Je vais continuer et appuyer sur Retour. Maintenant, laissez-moi regarder ce tableau ici sur la console. Nous pouvons voir les éléments du tableau. Mais remarquez qu'ici, nous avons ceci qui ressemble à une propriété, soulignez , soulignez. Soulignez, soulignez Will. Il s'agit d'un lien vers l'objet prototype. Donc, si nous ouvrons cela, nous pouvons voir ce que le prototype fournit pour les tableaux. Maintenant, avec les tableaux, avec ce type d'objet spécifique, un certain nombre de choses sont fournies par le prototype. Vous pouvez voir que toutes les méthodes que nous obtenons qui peuvent être utilisées avec un tableau sont contenues ici. Par exemple, supposons que nous voulions ajouter une valeur à ce tableau. Alors rangez-le, poussez. Allons-y et ajoutons quatre à ce tableau. Maintenant, si nous examinons le taux, nous avons maintenant un autre élément. Maintenant, d'où vient cette méthode push ? Comment se fait-il que nous soyons capables de l'utiliser ? Eh bien, vous voyez sans aucun doute où cela va. Il provient des objets prototypes. Donc, si nous faisons défiler la page assez loin vers le bas, nous pouvons voir une poussée. C'est pourquoi nous pouvons utiliser le push. Ainsi, chaque tableau créé avait accès à cette méthode. Et chaque baie n'a pas besoin d' utiliser de la mémoire pour stocker toutes ces méthodes. Ils sont tous stockés sur l'objet prototype, puis ils y ont accès. Ils peuvent les emprunter en cas de besoin. Très bien, voyons maintenant d'autres moyens d' afficher le prototype. Je viens d'utiliser ce qui est fourni avec le navigateur Chrome et la façon dont il affiche les choses. Et je suis capable de l'ouvrir , puis de voir l'objet prototype. Mais nous pourrions aussi le faire. Ce truc qui ressemble à une propriété dont je parlais. Deux traits de soulignement proto, deux traits de soulignement sont également disponibles pour afficher le prototype. Et nous pouvons voir que cela ressemble. Ce que je regardais tout à l'heure. Maintenant, avant de devenir fou avec ce trait de soulignement, ce trait de soulignement, ce trait de soulignement, ce trait de soulignement. Permettez-moi simplement de mentionner ce mode d'accès particulier. Le prototype ne doit pas être utilisé. Je le montre simplement parce que vous pouvez examiner un prototype de différentes manières, mais il ne doit pas être utilisé. Cela n'a jamais fait partie de la spécification initiale du script Ekman. Il vient d'être ajouté par les navigateurs et est finalement devenu populaire au fil des ans. Et puis a été ajouté à la spécification plus tard. Mais elle était tout de même découragée. Utilisez-le, il est donc préférable d'utiliser object point get prototype object point get prototype que nous allons examiner. Et plus tard, lorsque nous examinerons la configuration du prototype, nous examinerons bientôt les commandes permettant de le faire. Ainsi, avec object point get prototype of, nous pouvons également examiner les prototypes. Alors faisons-le. À l'intérieur des parenthèses. Il s'agit d'une méthode statique. Donc, Object Die Gap Prototype entre parenthèses. Nous mettons l'objet, dans ce cas, le tableau que nous avons créé. Et nous ouvrons cela et nous pouvons voir le même type de choses que nous voyions auparavant lorsque vous examiniez le prototype. C'est donc une autre façon de voir le prototype d'un objet. Et notez toutes les fonctionnalités que nous ajoutons à un tableau à cause du prototype. OK, faisons-en un autre. Faisons un rendez-vous. Je vais donc déclarer une variable de date, puis créer une nouvelle date pour la date d'aujourd'hui. Maintenant, à cause de la façon dont les dates sont configurées, je ne peux tout simplement pas entrer une date comme celle-ci et être en mesure de voir le prototype qui gros, utilise simplement la méthode toString pour afficher la date dans un format de chaîne. C'est ce que cela fait pour moi. Mais je peux faire un répertoire de points sur la console. Et là, je peux m'ouvrir et en savoir plus à ce sujet. Voici donc notre proto qui pointe vers l'objet prototype. Et vous pouvez voir que toutes les méthodes utilisées par les dattes l'ont également. Il y en a un tas. Il est donc logique que ceux-ci figurent sur l'objet prototype et non sur chaque date individuelle. Donc, à cause du prototype, encore une fois, à cause de cet objet prototype, nous pouvons faire une date, un point, obtenir la date et, en gros, obtenir le jour du mois. Nous pouvons utiliser n'importe laquelle des méthodes disponibles. Ainsi, tous les objets JavaScript intégrés qui font partie de JavaScript sont tous associés à des prototypes. Nous n'en avons examiné que deux, mais ils comportent tous des prototypes. Tu peux expérimenter ça, tu peux essayer ça. Et je vous encourage à passer du temps à créer certains des différents objets intégrés disponibles et à les ouvrir. Jetez un coup d'œil au prototype, découvrez ce qu'il contient. Maintenant, qu'en est-il des objets JavaScript simples ? C'est ce que je veux examiner ensuite. Permettez-moi donc de créer simplement des objets JavaScript simples. Je vais avoir un nom de propriété. Je l'ai à peine créé. Et ce n'est pas un objet JavaScript intégré Est-ce qu'il est livré avec un prototype lorsque je crée comme ça ? Eh bien, découvrons-le. Ouvrons ça. Nous voyons la propriété et bien sûr, elle possède également un prototype. Et si je l'ouvre, il y a certaines choses que j' obtiens dans le cadre d'un simple objet JavaScript. Remarquez qu'il existe une méthode qui consiste à prototyper. C'est une façon de vérifier si un objet est le prototype d'un autre objet. Il y a donc certaines choses que nous obtenons avec l'objet prototype fourni avec un objet JavaScript simple. Dans l'un d'eux se trouve la valeur de. là que nous obtenons la valeur. Maintenant, utilisons simplement ce qui possède sa propre propriété ici. Et voyons ce qui est renvoyé pour la valeur de. Ce sont des mathématiques que nous utilisons simplement. C'est faux, donc ce n'est pas la propriété d'OBJ. C'est une autre façon d'indiquer que quelque chose que nous utilisons ne fait pas ou ne fait pas partie de l'objet prototype. Parce que cette méthode ou cette propriété qui est une méthode n'est pas une propriété propre d'OBJ. Il l'obtient à partir du prototype. Maintenant, encore une chose que je voudrais montrer avant de passer à autre chose. Si je regarde à nouveau le tableau, je reviens ici vers l'objet prototype. Je l'ai ouvert vers le haut et je fais défiler la page vers le bas. Regarde, il y en a un autre ici. Et c'est un objet. C'est un tableau, ce à quoi nous nous attendrions. Celui-ci est un objet. Alors, que se passe-t-il ici ? Eh bien, c'est la chaîne de prototypes. C'est donc ce dont nous allons parler dans le prochain sujet. Les objets prototypes peuvent également comporter des prototypes. Passons donc à autre chose et nous en reparlerons. 5. Chaînes de prototype: Nous avons établi que les objets numérisés possèdent, la plupart du temps , un prototype auquel peuvent emprunter des propriétés intrinsèques. Maintenant, puisqu'un objet prototype est également un objet, il est logique qu'il puisse également avoir un objet prototype. Cela crée ce que nous appelons une chaîne de prototypes. objets liés entre eux dans une chaîne, comme à la mode. Examinons d'abord cela sous forme de code, puis nous examinerons une représentation graphique pour nous assurer de comprendre comment ces objets se nourrissent tous ensemble et un prototype de chaîne. Très bien, pour ce document actuel, j'ai créé un tableau, tableau simple et aussi un objet contenant les deux afin que nous puissions les examiner dans la console. Ensuite, je vais faire d'autres choses ici dans le fichier de code et voir ce qui se passe. Donc, la première chose que nous allons faire est d'ouvrir cette console pour pouvoir y jeter un œil. OK, jetons donc d'abord un coup d'œil au tableau. Maintenant, si je l'ouvre, comme nous l'avons fait par le passé, nous voyons qu'il y a un prototype qui vient du constructeur du tableau. Cependant, si nous l' ouvrons davantage puis que nous faisons défiler la page vers le bas, nous examinons maintenant l'objet qui est le prototype de ce tableau. Et si nous remontons plus bas dans cet objet, nous pouvons voir toutes les méthodes disponibles pour les tableaux. Mais plus bas, nous avons également un lien vers un autre objet, qui est le prototype du prototype. C'est donc de notre chaîne de prototypes dont nous parlons ici. Nous pouvons donc voir cela représenté ici dans le navigateur. Utilisons le prototype get de deux, jetez-y également un œil. Donc, si je fais une objection, obtiens le prototype d'une entrée, le tableau. C'est cet objet qui constitue le prototype. Toutes ces méthodes devraient vous sembler familières. Il existe des méthodes. Ce sont des méthodes disponibles sur les tableaux. Très bien, passons maintenant un peu plus loin. Je vais donc faire de Object Dot Get Prototype. Et puis à l'intérieur, je vais mettre à nouveau l'objet dont j'ai obtenu le prototype. Nous allons donc d'abord obtenir le prototype de la matrice, puis nous obtiendrons le prototype de cet objet prototype. Il devrait nous montrer le troisième que nous recherchions. Donc, si j'ouvre cela, remarquez que ce que nous avons ici, le constructeur a sur la propriété, c'est la valeur de propriété de tout cela. Donc, si nous devions descendre et descendre, puis encore une fois, c'est essentiellement ce que nous voyons ici. C'est donc le prototype du prototype qui crée ce que l'on appelle une chaîne de prototypes. Maintenant, dans ce code, j'avais également créé un objet. Je veux donc le montrer très rapidement. Donc, si je saisis OBJ et que je l'ouvre, le prototype de est exactement comme le prototype du prototype de matrice. Avec un tableau. Lorsque nous créons un tableau, il reçoit un prototype provenant du constructeur du tableau. Eh bien, ce prototype reçoit un prototype, il provient du constructeur de l' objet, et c'est le même objet que nous voyons ici. Ainsi, au fur et à mesure que vous progressez dans la chaîne des prototypes, tous les objets atteindront le même objectif, le prototype. Et c'est le prototype qui est attaché au constructeur de l'objet. Ainsi, tous les objets auront accès à la valeur de la méthode, par exemple I. Peut taper la valeur du point ARR de. Et ça marche. Il cherche d'abord cette méthode sur le tableau, vous pouvez la trouver là-bas. Il le cherche donc sur l'objet prototype. Je ne le trouve pas là-bas. Il le cherche donc sur le prototype de l'objet prototype et finit par le trouver là. Maintenant, s'il ne le trouve pas sur l'objet prototype final qui se trouve dans la chaîne de prototypes, il retournera indéfini ou il une erreur indiquant que ce n'est pas une méthode, elle ne peut pas quoi que ce soit avec. Très bien, allons maintenant un peu plus loin. Permettez-moi de créer un autre objet. Je vais l'appeler OBJ to. Cet objet ne comportera qu'une seule méthode. Il va juste être plein. Le nom est la méthode. Que va faire cette méthode ? Il va renvoyer essentiellement nom du point F et le concaténer avec un espace. Et puis ce nom en forme de point L. C'est ce qu'il vous renverra. D'accord ? Maintenant, ce que nous allons faire, c'est en faire prototype d'un autre objet. Parce que je ne veux pas y jeter un œil et voir ce qui se passe lorsque nous définissons le prototype d'un objet. Voyons si nous avons toujours cette chaîne de prototypes dont nous avons parlé. Allons-y et la configuration sera J3. Voici une commande permettant de créer un objet pouvant même temps y joindre un prototype qui s'appelle Object.create. Il s'agit d'une méthode statique sur le constructeur de l'objet. Et ce que nous faisons, c'est entre parenthèses que nous transmettons l'objet que nous voulons comme objet prototype pour cet objet que nous créons. OBJ Three l'aura donc comme prototype immédiat. Alors, OBJ, allez-y. Maintenant, quand je sauvegarde ça et que je regarde OBJ 3 sur la console, il n'y a rien dans l'objet, mais il contient un prototype. Remarquez ce que contient le prototype, la méthode du nom complet. Et puis cela continue également de monter dans la chaîne des prototypes. Ajoutons maintenant quelque chose à l'OBJ 3. Ajoutons une propriété de nom F et une propriété de nom L. Donc, nom OBJ à trois points F. Il y a le prénom, LBJ, nom en trois L, et ce sera notre nom de famille. On y va. Maintenant, nous les avons tous les deux dedans. Alors maintenant, sauvegardons cela. Revenons à la console. Maintenant, cette fois, si je saisis le troisième OBJ, nom complet, que va-t-il se passer ? Il le recherchera sur l'OBJ 3. Il ne le trouve pas là-bas. Il cherche donc sur son prototype d'objet, il le trouve là, fait le nécessaire et nous renvoie le nom complet. Nous venons maintenant de parler de la valeur que l'on trouve sur l'objet prototype final lorsque nous avançons dans une chaîne de prototypes qui est disponible ici dans cet objet JavaScript auto-défini. Et en gros, il imprime la valeur de celui-ci, il faut demander à gravir les échelons de la chaîne de prototypes pour le trouver. Il ne peut donc pas le trouver OBJ 3, il ne le trouve pas sur son objet prototype, qui est OBJ à celui-ci ici. Je ne le trouve pas là-bas. Où il le trouve finalement, c'est sur l'objet point ( prototype, prototype). C'est là qu'il le trouve finalement, le prototype du constructeur d' objets. Nous en avons donc parlé du point de vue du code. Voyons comment cela est représenté à l'aide d'une image afin de m'assurer que cela est concret dans votre esprit. Il s'agit d'un concept important à comprendre. Jetons donc un coup d' œil à un graphique qui illustrera cela. Nous avons donc représenté que l'OBJ 3 possède les propriétés fname et lname. Et puis nous avons son objet prototype représenté OB J2. Et puis nous en avons le prototype, qui est le prototype assigné au constructeur de l'objet, le prototype Object Point. C'est là-haut, c'est là que se trouve la valeur. Ainsi, lorsque je saisis valeur à trois points de l' OBJ, elle apparaît pour la première fois dans l'objet OBJ, ne la trouve pas là. Il passe donc à son prototype, je ne le trouve pas là-bas. passe à son prototype, Il passe à son prototype, le trouve là, et il remontera dans cette chaîne de prototypes. Il se trouve que c'est la fin de la chaîne de prototypes. Donc, s'il ne le trouvait pas ici, cela donnerait une erreur indiquant qu'il n'a pas pu trouver cette fonction ou que la valeur de n' est pas une fonction. C'est ainsi que la chaîne de prototypes est utilisée par le moteur JavaScript pour emprunter les propriétés du prototype d'un objet. Et cela montre qu'il ne s'agit pas simplement du prototype initial de l'objet, mais qu'il peut s'agir du prototype du prototype. Il peut emprunter cette chaîne de prototypes pour trouver et emprunter ces propriétés. Très bien, passons au sujet suivant. 6. Les propriétés de l'objet ont la Precedence: Avant de quitter le sujet des prototypes et de commencer à les utiliser, je voudrais souligner un point que vous avez peut-être déjà compris, mais je veux m' assurer qu'il est connu. d'autres termes, une méthode ou une propriété d'un objet remplacera toujours la méthode ou la propriété du même nom sur un objet prototype. En d'autres termes, lorsque le moteur JavaScript recherche une méthode ou une propriété, il recherche d'abord l'objet. Si l'objet le possède, il utilise cette version et ignore tout ce qui pourrait se trouver dans la chaîne de prototypes. Examinons un exemple rapide qui pourrait également être utile pour d'autres raisons. Je vais donc créer un objet très simple ici. Obj est le nom que nous allons lui donner. Et je vais avoir une propriété de nom F. Ou bien, on va faire le nom F et ensuite je vais mettre 45 ans. C'est tout ce que nous aurons pour l'instant dans cet objet en particulier. Laisse-moi continuer et économiser ça. Je vais juste le redimensionner un peu. Et nous allons accéder à la console ici. Et la première chose que je veux faire, c'est notre objectif. Nous pouvons le constater assez facilement. Et que se passe-t-il si je fais en sorte que la valeur me montre l' objet en tant qu'objet. Je peux donc m'y retrouver. Je peux voir le prototype. D'où vient cette valeur de propriété, ou cette valeur de méthode, elle provient du prototype. Nous pouvons le voir ici même. D'accord ? Nous pouvons donc également vérifier qu'il n'appartient pas à l'objet en le faisant posséder sa propre propriété. Et puis à l'intérieur de cela, faire de la valeur d'une telle valeur, et ça revient faux. Nous savons donc que la valeur de la méthode n' est pas une propriété d'un objet. C'est assez évident à ce stade. Mais nous savons également que nous pouvons y accéder car il le trouve sur la chaîne de prototypes et l' imprime de cette façon. Maintenant, faisons quelque chose très rapidement. Faisons un OBJ de plus de cinq. Remarquez ce qui est imprimé. D'où cela vient-il ? Eh bien, cela vient de la méthode à deux chaînes. Généralement, lorsqu'un objet doit être converti en une valeur primitive, il utilise la valeur de method pour ce faire. Mais dans le cas d'une chaîne, une situation de chaîne, il utilisera deux chaînes pour effectuer cette conversion. Si la valeur de renvoie, quelque chose qui pourrait être contraint dans une chaîne, elle utilisera value up. Mais pour le moment, la valeur renvoyée par ne peut pas être contrainte dans une chaîne. Nous utilisons donc la méthode toString. Apportons donc quelques modifications ici. Revenons à cet objet. Et je vais d'abord faire une méthode toString. Et nous lui demanderons de renvoyer ce nom avec le point F. Et c'est ce que nous allons avoir. La méthode à deux chaînes renvoie. Oups, j'y ai mis un point. On y va. Maintenant, sauvegardons cela. Et sautons et refaisons la même commande. Et remarquez ce que nous obtenons parce que nous avons remplacé la méthode toString qui se trouve dans la chaîne de prototypes, c' est-à-dire sur le prototype de l' objet. Nous obtenons maintenant la valeur désignée par la méthode toString sur l'objet lui-même. Très bien, ajoutons maintenant une valeur de méthode. Et cela peut être très utile si vous avez besoin d'un objet à convertir en nombre. Allons-y et valorisons. Et pour cela, je vais lui faire renvoyer un numéro qui est l'âge. Maintenant, sauvegardons ça. Sautons dehors. Refaisons la même chose. Et maintenant, regardez ce qui se passe. Maintenant parce que c'est un chiffre. Il va essayer d'obtenir une valeur primitive à partir de l' objet en utilisant la valeur de first, puisque value of renvoie un nombre, puis elle est traitée comme un nombre et additionne essentiellement ces deux éléments ensemble. Maintenant, que se passerait-il si nous avions une ficelle ? Faisons quelque chose comme ça. Objet plus OBJ. Eh bien, il accède à la valeur de la méthode. Il essaie toujours d'y accéder en premier s' il doit le convertir en une valeur primitive. S'il peut contraindre une chaîne, il le fera. 45 peut être contraint à une chaîne, et il en va de même, et il renvoie une chaîne ici. Mais puisque par défaut c'est un nombre. Lorsque nous l'utilisons avec le numéro, il renvoie le numéro. Il agira comme un chiffre, comme nous l'avons vu ici. Nous avons donc remplacé les propriétés, les méthodes qui se trouvent sur le prototype d'un objet, d'un objet que nous créons. Cela fait partie du constructeur de l' objet. Et c'est toString et la valeur si nous les avons remplacés. Maintenant, cet objet utilise ceux qui lui sont locaux au lieu de ceux de la chaîne de prototypes. Maintenant, nous avons beaucoup parlé des prototypes. Et avec ces connaissances, nous pouvons commencer à les appliquer sans le mystère des prototypes Trop de personnes se lancent dans l'utilisation d'objets en JavaScript sans vraiment comprendre ce que c'est se déroulant dans les coulisses. Il est tellement mieux de comprendre pourquoi les choses fonctionnent d'une manière particulière et pourquoi les prototypes font ce qu'ils font en JavaScript. Et c'est important à savoir car les prototypes sont utilisés dans JavaScript. Très bien, passons à autre chose. 7. Quoi faire ensuite ?: Vous avez terminé les sections essentielles sur les principes fondamentaux et les concepts de la maîtrise de JavaScript. Alors, que se passera-t-il ensuite ? Eh bien, la prochaine section de maîtrise de JavaScript portera sur les modules. Mais je vous recommande d' aborder d'autres sujets premier ou en même temps que vous abordez des modules. Ces autres sujets figurent dans certains de mes autres cours et je tiens donc à les souligner. Tout d'abord, je pense qu' un concept critique, un modèle critique et critique en JavaScript est la conception orientée objet. Et cela se trouve dans les rubriques avancées en JavaScript de ce cours. C'est l'une des parties de ce cours. Je vous recommande donc, si ce n'est pas déjà fait, de suivre cela et apprendre les différents modèles disponibles pour la programmation orientée objet. La programmation fonctionnelle est également devenue partie intégrante de JavaScript récemment. C'est donc quelque chose d'autre qui me semble essentiel. C'est un autre schéma qu' il est important de comprendre. J'ai un cours complet à ce sujet, la programmation fonctionnelle en JavaScript, un guide pratique. Il s'agit vraiment d'une approche pratique de la programmation fonctionnelle. Ainsi, même si vous n'utilisez pas le paradigme de programmation fonctionnelle, vous pouvez appliquer les concepts qui y sont enseignés. Et je pense qu'il est essentiel de les comprendre. Enfin, il est très important comprendre les modèles asynchrones en JavaScript. Et c'est aussi un cours complet. C'est dans une analyse approfondie du JavaScript asynchrone. Je recommande donc de les aborder en même temps ou avant d'aborder les modules. Très bien, continuez à apprendre et merci d'avoir suivi ce cours avec moi.