Quelle est la différence entre la portée et le contexte dans Javascript ?

1. Pourquoi est-il important de comprendre la différence ?: dans cette classe, je vais expliquer la différence entre la portée et le contexte et JavaScript. Je vais également vous aider à comprendre pourquoi le contexte de portée peut parfois ressentir la même chose même si ce n'est pas le cas. Et je vais également expliquer comment prendre de meilleures décisions sur le contexte de portée lors de la planification de votre code. La troisième question à laquelle nous devons répondre est. Pourquoi est-il si important de comprendre la différence entre la portée et le contexte en JavaScript  ? Eh bien, en tant que développeur, vous passez la majorité de votre temps à faire l'une des deux choses suivantes : développement ou dépannage . Et en ce qui concerne le développement, si vous avez une bonne compréhension de la différence entre la portée et le contexte, vous écrirez du code qui est plus propre et plus facile à maintenir. Et c'est parce que vous prendrez de meilleures décisions sur la meilleure façon de tirer parti, portée et le contexte de votre code lorsqu'il s'agit de dépannage. Si vous comprenez la différence entre la portée et le contexte, vous utiliserez au mieux votre temps et prendrez les bonnes mesures de dépannage pour résoudre votre problème plus rapidement. Donc, plus tard dans ce cours parlera de la façon de prendre de meilleures décisions sur l'exploitation portée et du contexte dans votre code. Donc, pour l'instant, je veux juste me concentrer sur le dépannage. Jetons un coup d'oeil à un workflow de dépannage typique. Donc, disons, avoir un problème ou un bug. Maintenant, dans la plupart des cas, vous découvrez le bogue, et vous commencez immédiatement à prendre des mesures pour résoudre ce problème. Et si vous ne comprenez pas vraiment la différence entre la portée dans le contexte, vous pourriez constater que vos étapes de dépannage sont un peu partout. Une chose vous mène à une autre, et une minute vous pensez que c'est un problème avec la variable. Et puis peut-être que c'est un problème de contexte parce que c'est une propriété d'un objet. Mais alors tu n'es pas vraiment sûr, et ça t'amène à un autre chemin. Et à cette 0,1 chose qui est clair, c'est que nous n'avons pas ah, plan de jeu très ciblé et les étapes de dépannage ne sont pas, euh, vraiment nous conduire n'importe où d'une manière logique. Donc, le problème ici est que sans une compréhension vraiment solide d'une différence entre portée et le contexte, vous pourriez constater que votre dépannage pourrait prendre beaucoup de temps. Il pourrait être non ciblé, et il y a une chance que vous ne puissiez jamais vraiment résoudre le problème. Je pense qu'il y a une meilleure façon de le faire, donc quand vous commencez avec un problème ou un bug. Si la première chose que vous faites est de vous poser une question, s'agit-il d'un problème de portée ou de contexte ? Maintenant, si vous vous posez cette question, mais d'abord, avant de prendre des mesures de dépannage, si vous avez les connaissances nécessaires pour répondre à cette question, si vous comprenez la différence entre la portée et le contexte et vous pouvez répondez à cette question en toute confiance, alors vous pouvez prendre la bonne décision. Et une fois que vous connaissez la réponse à cette question, puis les étapes de dépannage que vous prenez plus logique. Ils sont plus concentrés, et vous pouvez résoudre votre problème beaucoup plus rapidement. Ainsi, quand il s'agit de dépannage, comprendre les différentes équipes , de définir le contexte vous aide à résoudre le problème plus facilement. Et il est important que lorsque vous commencez à résoudre un problème, vous souhaitiez vous poser une question. S' agit-il d'une portée ou d'un contexte ? Les problèmes de la première étape consiste à déterminer si le problème est une portée ou un problème de contexte. La deuxième étape consiste à effectuer les étapes de dépannage appropriées en fonction de la réponse à la première partie, et lorsque vous prenez les étapes de dépannage appropriées, vous finirez par résoudre vos problèmes plus rapidement 2. Quelle est la différence entre la portée et le contexte dans JavaScript ?: Donc, la prochaine question que nous devons répondre est quelle est la différence entre la portée et le contexte en JavaScript ? Eh bien, la portée est la visibilité des variables, et le contexte est l'objet auquel appartient une méthode. Donc, si vous les mettez côte à côte, on pourrait y penser de cette façon. Scope est une variable de visibilité, et vous pourriez vous demander, Vous savez, quelle est cette portée d'une variable ? Ou comment est-il variable, portée et avec contexte, quel est l'objet auquel appartient la méthode ? De temps en temps, vous pourriez vous demander, Quel est ce contexte ou dans quel contexte cette méthode est-elle exécutée ? Donc, quand vous pensez à la portée, pensez aux variables. Et quand vous pensez au contexte, pensez aux méthodes. Regardons un exemple, commençons simplement par une sorte d'approche pseudo-code. J' ai ces trois choses à l'écran. J' ai Sam une ou trois fois et fonctionne, et ce ne sont que trois choses, et en ce moment ils flottent dans l'espace, et je n'ai aucun moyen de les saisir. Donc Sam est une chaîne, et 123 est un nombre, et le dysfonctionnement est une fonction. Maintenant, faisons juste semblant que cette fonction est une fonction, parce que ce n'est vraiment pas correct. Syntaxe JavaScript. Mais encore une fois, c'est juste un pseudo code. Pour l'instant, c'est juste faire semblant que c'est une fonction. Ok, donc je dois filtrer ce numéro et ce dysfonctionnement, mais je n'ai vraiment aucun moyen de m'en procurer. Je ne peux pas les mettre la main sur eux. Ils sont juste là. J' avais besoin d'un moyen de me référer à eux, alors nous devons le faire. Nous devons nous référer à ces valeurs d'une certaine manière en leur donnant une sorte de nom. Appelons le nom de Sam. Appelons 123 compte et s'appelait The Function Greet. Donc, en faisant cela, j'ai maintenant un moyen de faire référence à chacune de ces choses. Donc, quand je tire parti de la portée, je peux créer des variables pour chacune de ces choses que je peux enregistrer. Notre nom est égal à Sam Var Count est égal à 123 et la barre grecque est égale à la fonction. Et si j'allais dans le contexte de levier, je pourrais créer un objet. Disons simplement que les objets appelés O B J et que je pourrais donner à cet objet des propriétés parce que les objets ont des propriétés et que je pourrais lui donner une propriété de nom que Sam et moi pourrions lui donner. Propriété du compte. Ça fait 123 et je pourrais lui donner une propriété grecque. C' est un dysfonctionnement. Ou je pourrais mélanger levier, portée et contact pour que je puisse sauver notre nom égal Sam et O B j dot comptage va 123 et 4. Le grec est égal à la fonction. Voyons donc comment cela fonctionne réellement dans le code JavaScript. Donc, revenant à la portée si je voulais créer des variables pour ces choses, j'avais utilisé de notre mot-clé et je sauvegarde notre nom est égal à Sam Farr Count égal à 123 et notre grande fonction égale et à l'intérieur de la fonction grecque Isler que les valeurs de nom. Donc, je crée des poignées pour ces valeurs en créant des variables. Maintenant, si je voulais tirer parti du contexte, je pourrais créer une variable no b J. C' est un objet. Et puis je donne cette propriété d'objet. Donc B j nom de point est Sam et O. P. J nombre de points est 123 et plus. cupidité Jadot est une fonction en alerte élevée. Ce nom d'actions qui alerterait Sam. Maintenant, nous allons parler un peu plus en profondeur de ce que signifie ce mot clé. Mais tout de suite. Gardez juste à l'esprit que quand il s'agit de contexte, le mot-clé ce est vraiment important et que cette clé était fait référence à l'objet auquel appartient une méthode. Maintenant. Si j'allais le mélanger et utiliser la portée et le contexte, je pourrais dire ouvrir Jason. Une variable et le nom est une variable, mais sur jade compte est une propriété et alors personne ne dot greet est aussi une propriété. C' est aussi une méthode lorsque la propriété des objets est une méthode sont, ah fonction, et puis elle est appelée les méthodes. Les objets ont des propriétés, mais lorsqu'une propriété est une fonction, c'est une méthode. Dans ce cas, il alerte la variable nom auto type de trois façons orteil vraiment deux façons de le regarder. Vous pouvez tirer parti de la portée et créer des variables. Vous pouvez tirer parti du contexte et créer des propriétés d'objet, ou vous pouvez certainement mélanger et faire correspondre. Donc, une fois de plus, portée est la visibilité des variables. Et quand vous pensez à la portée, pensez que les variables et le contexte sont l'objet auquel appartient une méthode, et quand vous pensez à des contacts, pensez aux méthodes 3. Logiciel nécessaire: il y a des hypothèses que je fais à votre sujet. Je suppose que vous avez déjà connu un NPM installé sur votre machine que vous avez un éditeur de texte décent et ensuite vous avez un navigateur Web. Si vous n'avez pas déjà installé ces trois éléments sur votre ordinateur, il est important de vous arrêter maintenant et de prendre soin de cela avant de poursuivre le cours. Maintenant, si vous avez besoin d'installer non, vous pouvez simplement aller à connaître J s point d'orgue Donald installateur pour votre système d'exploitation. Je recommande, cependant, cependant, que vous utilisez un gestionnaire de paquets pour installer le nœud. Cela garantit que vous pouvez installer la version la plus récente de noté dans P. M. Et puis à l'avenir, vous pouvez mettre à jour votre version de note. Si vous utilisez un Mac, vous pouvez utiliser homebrew, ce que je recommande, Et si vous utilisez Windows, vous pouvez utiliser chocolatey ou scoop. Si vous avez besoin d'un éditeur de texte, je recommande Visual Studio Code, qui fonctionne à la fois sur Mac et Windows ou du texte sublime, qui est également un excellent éditeur de texte qui fonctionne aussi sur Mac et Windows. Si vous avez besoin d'un navigateur Web, je recommande vivement Google Chrome ou Mozilla Firefox, qui fonctionnent tous deux sous Mac OS et Windows 4. Obtenez la configuration: Ok, prenons l'exemple de code mis en place sur votre machine. On va faire trois choses. Tout d'abord, téléchargera l'exemple de code. Ensuite va configurer le projet en utilisant NPM, puis après cela, je vais démontrer le serveur Web local. Donc, d'abord, commençons par télécharger l'exemple de code. Juste comme un aperçu, je vais vous guider à travers les étapes de cliquer sur ce lien dans la page Web de la classe, qui va commencer le téléchargement du fichier ZIP. Et puis, après avoir téléchargé ce fichier zip, vous allez décompresser ce fichier. Ouvrez ce dossier dans votre application Terminal. Vous allez exécuter l'installation de NPM pour installer les dépendances. Ensuite, vous exécuterez NPM. Commencez à démarrer le serveur Web local et vous pointez votre navigateur vers l'hôte local 3000. À ce stade, vous verrez l'exemple de page Web du serveur Web local dans vos navigateurs. En fait, traversons ces étapes ensemble en ce moment. Faites défiler vers le bas de la page et cliquez sur votre projet. Sur le côté droit, vous verrez un lien nommé Scope versus Contact exemples dot sip. Cliquez sur ce lien pour démarrer le téléchargement, déplacez dans le pli qui a le fichier zip téléchargé. J' ai le mien sur mon bureau juste pour garder les choses simples. Décompressez ce fichier. Ouvrez votre application Terminal et déplacez dans ce dossier. Exécutez ensuite l'installation de la commande NPM. Cela téléchargera toutes les dépendances pour le projet. Lorsque cela sera terminé, nous devrons démarrer le serveur Web. Donc, lorsque vous êtes NPM stoles terminées, exécutez la commande MPM start. Un message s'affiche indiquant que les serveurs Web s'exécutent sur le port 3000 de l'hôte local. Alors ouvrez votre navigateur et pointez votre navigateur vers l'hôte local 3000 et vous verrez l' exemple. Page Web. OK, maintenant que vous avez l'exemple de code défini sur votre machine, je vais parcourir cette petite page Web qui, mise en place, mise en place,utilisera comme, ah pour nos discussions sur les différents concepts dans cette classe et certains exemples de code. C' est une petite page Web très, très simple que j'ai créée ne fait pas grand-chose, mais c'est principalement que nous allons l'utiliser pour démontrer les exemples de code dans beaucoup de leçons. Donc, d'abord dans le coin supérieur gauche, si vous cliquez sur les exemples de show, mais vous verrez qu'il y a des liens vers tous les exemples du cours, et cela vous permet d'exécuter les exemples de code sans avoir de copier-coller. Vous pouvez juste le lancer juste là à partir du navigateur. Donc, si vous faites défiler vers le bas et cliquez sur celui qui dit chaînage de méthode, nous ne allons pas vraiment entrer dans cela maintenant. Mais, euh, cet exemple particulier fait en fait tout le code fonctionne pour l' U.I. U.I Donc maintenant, je veux juste vous montrer comment fonctionne la page. Il s'agit d'une équipe de vente fictive de 10 personnes, et pour chaque vendeur, je peux cliquer sur le bouton de sélection et cliquer sur le bouton de sélection. Donc, quand je clique sur sélectionner que vous pouvez voir le vendeur a sélectionné le vous je change un peu et Aiken de Select it. Et je peux aussi simplement supprimer manuellement chaque vendeur de la page en cliquant sur le bouton Supprimer et pour ce vendeur. Et quand je sélectionne un ou plusieurs vendeurs, le bouton Supprimer sélectionné dans le coin supérieur droit s'affiche et quand je clique sur que n'importe quel vendeur qui a sélectionné est alors supprimé, Donc si je sélectionne, disons, tomb ou et cliquez sur Supprimer ceux sélectionnés à supprimer. Et lorsque vous supprimez des vendeurs, des vendeurs, le nombre total de vendeurs diminue. Ah, des trucs vraiment simples. Mais vous savez que ce sera en quelque sorte marcher à travers quelques exemples de code et utilisaient ceci pour baser nos exemples sur. Et à un moment donné, si vous voulez recharger la page, suffit de cliquer sur le bouton de rechargement de la page et vous pouvez commencer à partir de zéro. Si vous ouvrez, vos travaux pourraient consoler. Vous verrez également un message chaque fois que vous chargez un exemple de code qui vous indique exactement quel fichier a été chargé. Vous pouvez donc être sûr que, par exemple, je charge deux exemples de portée globale. Et je vois cela dans la console, alors faites-vous savoir que vous exécutez le bon exemple au cas où vous n'êtes pas vraiment sûr. 5. Où trouver le code exemple: Pour une grande partie de cette classe, vous suivrez avec l'exemple de code. Alors prenons juste une petite seconde pour savoir où. Pour trouver ces exemples. Ouvrez votre éditeur de texte. J' utilise le code Visual Studio et je passe dans le dossier Project. Ouvrez le dossier W W W W. Ouvrez le dossier Js, ouvrez le dossier Exemples dans le dossier Exemples. Vous trouverez un certain nombre de sous-dossiers et chaque sous-dossier des exemples de fichiers pour ce sujet particulier. Par exemple, dans le dossier Global Scope trouvera les exemples pour la portée globale et dans le dossier de l' école privée trouvera des exemples pour la portée privée et ainsi de suite. Nous allons creuser là-dedans spécifiquement un peu plus tard, mais je voulais juste vous montrer où trouver l'exemple de code. 6. Détails de la portée - Trois types de portée: Mais parlons de la portée un peu plus en détail, comme nous l'avons discuté plus tôt. portée est la visibilité des variables, et il y a trois types de portée. Il y a une portée globale, il y a une portée privée, et il y a une portée de niveau bloc. 7. Portée globale - Discussion: faisons un tour en arrière et parlons un peu plus précisément de la portée mondiale. La portée globale est également connue sous le nom d'objet de fenêtre ou d'étendue externe ou de portée de niveau supérieur. Fondamentalement, la portée globale est tout code qui n'est pas dans une fonction. Donc, par exemple, j'ai du code ici sur la gauche. Et comme vous pouvez le voir, j'ai quelques variables en haut, et j'ai deux fonctions nourriture et bar, puis au bas de la pourrait exécuter ces fonctions. Ainsi, les variables vitesse et salutation et les fonctions grippe et bar et l'exécution de ces fonctions sont du code global. Ils sont définis dans la portée globale, et c'est parce qu'ils ne sont pas définis dans une fonction. Donc, le code qui est à l'intérieur des fonctions de nourriture et de barre n'est pas un code global car ce code est défini à l'intérieur d'une fonction. Donc, dans ce cas, j'ai une variable appelée app, et cette application est une variable privée car elle est définie à l'intérieur d'une fonction. Il est donc vraiment important de se rappeler que la portée globale est tout code qui n'est pas défini dans la fonction ah 8. Portée mondiale - Démonstration: ouvrez le dossier Exemples, puis ouvrez le sous-dossier Scope global. Maintenant, regardons l'exemple de Big. Portée globale 1. Ici, j'ai une vitesse de froid variable globale. Je sais que c'est global parce que ce n'est pas dans une fonction est de trouver en dehors d'une fonction. Donc, je déclare la vitesse variable, qui est égale à 25 J'ai une instruction de journal de la console mettant cette variable et nous devrions obtenir 25 dans la console. Donc, si je clique sur montrer des exemples, puis sur l'exemple global de portée, nous pouvons voir que nous obtenons Global Street 25. Pas une grosse surprise. Regardons donc la portée globale numéro deux. Donc, une fois de plus, j'ai la vitesse variable globale qui est égale à 25. Mais alors j'ai cette fonction à l'intérieur de la fonction. Je sortie également dans la vitesse de la console de la nourriture, qui est la variable de vitesse globale définie en ligne trois, puis en ligne. Neuf. J' ai le journal de la console a indiqué plus de sortie, la valeur de la variable globale et en ligne 10 Execute fu, qui sort également la variable globale. Jetons donc un coup d'oeil à montrer des exemples de portée globale à, et je vois les deux messages vitesse de portée globale. 25 vitesse de la nourriture 25. Des trucs assez simples. Mais le point ici est qu'une variable globale est des merveilles à trouver dans la portée globale, et nous savons que nous sommes dans une portée mondiale. Si on n'est pas dans une fonction. La vitesse variable n'est pas définie dans une fonction, ce qui signifie qu'elle est globale, même si nous y accédons dans la fonction en ligne. Six. Cette variable de vitesse ici fait toujours référence à la vitesse globale, et ensuite nous sommes en train de la mettre ici. Rappelez-vous donc que la variable globale est celle qui est définie en dehors d'une fonction. 9. Portée privée - Discussion: et le prochain est la portée privée. La portée privée est également connue sous le nom de portée locale ou de portée de fonction. La portée privée est obtenue en utilisant le mot-clé VAR à l'intérieur d'une fonction. Donc, si l'exemple dans cette fonction, je crée une variable appelée Speed et c'est privé parce que j'ai utilisé notre mot-clé, c'est aussi simple. Si j'ai utilisé notre mot-clé à l'intérieur d'une fonction, cette variable que je crée devient privée à cette fonction. Maintenant, il est important de souligner quelque chose de très, très critique sur JavaScript, et c'est la portée lexicale. La portée lexicale est la façon dont la portée se comporte en JavaScript en ce que les fonctions inter peuvent voir dehors. Mais les fonctions externes ne peuvent pas voir dans. Et ce que je veux dire spécifiquement est dans ce cas, nous avons trois fonctions externes, milieu et intérieur, et la fonction inter, qui est l'énorme fonction, est imbriquée. Il est imbriqué deux fois. Il est imbriqué à l'intérieur du milieu et du milieu imbriqué à l'envers. Donc, à partir de la fonction interne, cette fonction a accès à la barre et aux variables alimentaires. Parce que la fonction inter peut voir dehors, elle peut voir toutes les variables déclarées en dehors de elle-même. Donc, la fonction inter a un peu d'accès. Il a accès à ses propres bains privés. Variable. Il a accès à la variable bar, et il a accès à la variable food. Mais le contraire n'est pas vrai, donc les fonctions externes et intermédiaires ne sont pas en mesure de voir dans, Ainsi, la fonction externe a accès à sa propre variable alimentaire privée. Mais il ne peut pas voir à l'intérieur de la fonction médiane qui ne peut pas voir la variable barre, et il ne peut pas voir la variable basse car elle est à l'intérieur de la fonction inter. Donc, une fois de plus, les fonctions peuvent voir dehors, mais elles ne peuvent pas voir dans. Et c'est la portée lexicale en JavaScript. Et il est vraiment important de comprendre que parce que c'est la façon dont la portée se comporte et JavaScript, et lorsque vous déclarez une variable en utilisant le mot-clé Navarre, cette variable devient privée à cette fonction, et rien en dehors de cette fonction a accès à cette variable. Mais cette fonction peut voir toutes les variables définies en dehors de elle-même. 10. Portée privée - Démonstration: ouvrez votre dossier Exemples, puis ouvrez le sous-dossier Scope privé. Regardons la portée privée un. C' est à peu près ce que nous avions dans le dernier exemple mondial. Nous avons une vitesse de froid variable globale lorsque nous avons cette fonction appelée nourriture, mais nous accédons à la vitesse globale à l'intérieur de cette fonction. Donc il a fini avec 25 sont console deux fois. Allons montrer des exemples Private Scope un et nous voulons avec 25 dans le Consul deux fois. Ok, donc quand vous allez à la portée privée, vous verrez que les choses étaient un peu différentes. J' ai ma vitesse globale ici, mais alors, à l'intérieur de cette fonction, j'ai une variable privée, et une variable privée est créée en utilisant le mot-clé var à l'intérieur d'une fonction. Donc, lorsque nous utilisons le mot-clé var pour définir la variable à l'intérieur d'une fonction, cette variable devient privée de cette fonction. Donc, cette version de vitesse n'est pas disponible en dehors de cette fonction. Tu veux exécuter la ligne numéro huit ? Je reçois la version privée de vitesse cette vitesse ici dans la ligne numéro huit, références à cette vitesse en ligne numéro six. Où est cette vitesse en ligne numéro 11 référence la vitesse mondiale en ligne numéro trois. Alors je devrais entrer dans ma console. La vitesse globale est de 25 alors je devrais dire la charge. La vitesse locale est de 100. Et montrons des exemples de portée privée à. Et c'est exactement ça. Vitesses mondiales. 25 lances privées 100. Donc, le point ici est que maintenant, ou l'avoir, nous créons une variable privée, elle aussi connue sous le nom de variable locale. Mais en utilisant le mot-clé var, regardons la portée privée. Trois. Donc, ici, j'ai un exemple de portée lexicale. Donc, avec la portée lexicale, fonctions peuvent voir dehors, mais pas ici. Dans la ligne numéro huit barre de dysfonctionnement I accès à la variable de vitesse. Mais cette variable de vitesse résout à cette vitesse. Donc, quand je vois cette instruction de journal de la console numéro neuf en ligne, ça va dire barre 100. Et c'est parce que cette barre de fonctions peut voir en dehors de elle-même. Il peut voir que la vitesse variable que la première vitesse variable des amendes égale à 100 Donc ici barres exécutées et cette instruction de verrouillage consul trouve la version de la vitesse, il est égal à 100. En outre, j'ai sorti un journal consul en ligne 13 vitesse de référence. Il est aussi avec la version de vitesse égale 100 parce que encore une fois, à l'intérieur de cette fonction, vitesse est égale à 100. Cette fonction peut voir à l'extérieur de lui-même, et son instruction de journal de la console est à l'intérieur de la portée de la nourriture. Donc, les deux déclarations de journal du Conseil de la nourriture de bar produiront 100. Et puis cette instruction de verrouillage de la console sortira 25 car ici la vitesse résout à 25 la version globale de la vitesse. Ceux-ci regardent l'exemple, numéro trois pour la portée privée. Ensuite, nous voyons Global 25 bar 104 100. Donc, si nous regardons le dernier exemple de portée privée, c'est un peu différent, car ici, à l'intérieur de la fonction de barre, nous déclarons une vitesse variable privée. Donc en ligne. 11 cette vitesse résout à cette vitesse, qui est 500. Donc Bar a maintenant sa propre version privée de la vitesse, qui signifie que cette version de référence rapide sur la vie 15 va être 100 parce que nous accédons à la première dans le sens de la vitesse. Nous avons confiné dans la nourriture et la version privée de la vitesse et de la nourriture est égale à 100. Mais dans la barre, la version privée de la vitesse est égale à 500. Et c'est parce que nous avons utilisé notre mot-clé pour définir la vitesse, ce qui crée une version privée de la vitesse. Donc maintenant, nous devrions avoir, euh, ici Global 25. Quand on exécutera de la nourriture, on en va un avec Bar 500 Full 100. Alors regardons montrer des exemples, portée privée. Exemple. Quatre. C' est ce que nous obtenons. Nous obtenons globalement 25 Bar 500 nourriture 100. Donc la chose principale ici que je veux juste souligner en quelque sorte, c'est cet outil. Deux choses. Un lorsque nous avons utilisé notre mot-clé, nous créons une variable privée. C' est un orteil privé ou local qui fonctionne, et aussi que les fonctions peuvent voir en dehors d'elles-mêmes. C' est la portée lexicale froide. Donc, cette fonction de barre. Si nous devions enlever le mot-clé var, enlever cette ligne, cela produirait 100 au lieu de 500 parce que ce serait, nous dirons, Hey, Hey, je n'ai pas une vitesse de froid variable privée. Laissez-moi voir si je peux en trouver un, et il regarderait en dehors de lui-même et il regarderait cette portée et trouverait cette version de vitesse. Mais ici depuis que nous avons déclaré variable privée appelée vitesse. Cette vitesse résout à 500 la vitesse résout à 100 dans ce résout à 25 car avec portée lexicale, les fonctions peuvent voir dehors. Mais ils ne peuvent pas voir à l'intérieur. Et encore une fois, le mot-clé VAR crée une variable privée ou locale juste pour la fonction dans laquelle il a été défini. 11. Portée en bloc - Discussion: Le dernier type de portée en JavaScript est la portée de bloc, donc la portée de bloc est obtenue en utilisant les mots-clés let ou const à l'intérieur d'un bloc. Maintenant, il a été introduit dans la version Atmos Script 2015 du script Java. Donc, avant ce rescript 2015, nous avions deux types de portée, globale et privée. Et puis après le rescript EC 2015 a été déployé, nous avons trois types de portée mondiale, privée et de niveau bloc. Donc, vous pouvez vous demander ce qui est un puits noir, c'est un bloc qui ouvre et ferme accolades. Et à l'intérieur de ces accolades vous mettez votre manteau et il code que vous mettez à l'intérieur de ces accolades, euh est un manteau de niveau bloc. Donc, par exemple, j'ai cette variable. Moi et moi l'avons déclaré en utilisant le mot-clé let à la fois. Donc, en utilisant le mot-clé let à l'intérieur d'un bloc, je devient étendue à ce bloc. Maintenant, je pourrais aussi avoir une autre variable I qui est définie dans ce cas globalement parce qu'une fois de plus, si un code qui n'est pas défini dans une fonction est défini globalement, donc ici j'ai cette variable globale appelée I et alors j'ai cette autre variable appelée I qui est égale à 50 à l'intérieur du bloc. Et ces deux peuvent coexister très heureusement parce que le 1er 1 est globalement étendu et le 2ème 1 est limité par bloc. Donc, je pourrais aussi utiliser la constante que vous étiez pour créer cette seconde je variable les différences . Si j'ai utilisé le mot-clé let, je pourrais retourner cette variable la prochaine ligne de tickets de code. Ils m'ont laissé égaler 50. Et puis je pourrais dire, Laissez-moi égaler 5000. Pas de problème. Mais quand j'utilise un mot d'escroc, c'est une constante. Donc, une fois que je fais ça, je ne peux pas essayer de changer. Je suis I. Donc, si je dis l'article 50 constant et puis dire vient, j'égale 5000 Je vais obtenir une erreur parce que je ne peux pas outrepasser les yeux. Donc, les différentes équipes ont laissé et Const. Est-ils à la fois créer des variables de niveau de bloc ou la portée de bloc. Mais, const. Lorsque vous utilisez ce mot-clé, vous ne pouvez pas le remplacer. Donc, une fois de plus, il existe trois façons différentes de créer une variable. Il y a var, qui crée une portée privée. Il y a let qui crée, ah, niveau de bloc ou une variable de portée de bloc, et il y a le mot-clé Const, qui crée également une variable de portée de bloc. Mais cette attribution de valeur ne peut pas être modifiée 12. Scope en bloc - Démonstration: ouvrez votre dossier Exemples, puis ouvrez le sous-dossier de la portée de bloc. Regardons les blocs, exemple de l'espoir. Un. Vous entendez parler de cette variable globale I, qui est égale à 100 alors j'ai un bloc de code ici et il dit Le bloc je produit la valeur de I, puis sur le côté du bloc j'ai mis la valeur à nouveau. Regardons l'exemple de bloc numéro un. Donc je vois 100 deux fois pour A et B, et ça a du sens parce que je ne fais rien de spécial ici. Je suis juste en mettant la valeur de I deux fois une fois dans le bloc d'une fois en dehors du bloc de mon point ici. C' est parce que je n'ai rien fait de spécial à l'intérieur du Plock ? J' ai encore 100 ans donc c'est regarder l'exemple noir numéro deux. J' ai une variable globale appelée I, qui est égale à 100. Mais puis à l'intérieur de mon bloc, j'ai une variable de portée de niveau bloc I, qui est égale à 50 et la sortie dans la console. Donc, cette version de I est différente de cette version de I parce que celle-ci a une portée de niveau bloc . C' est en fait la portée juste à ce bloc, donc j'égale 50 dans le bloc. Mais j'avais 100 ans à l'extérieur du bloc. Donc, quand je regarde l'exemple de portée de bloc, j'obtiens 50 et 100. Donc, le point principal ici était d'utiliser le mot-clé let pour créer une variable de portée de niveau bloc , qui n'est pas en conflit avec le global car il est étendu ici au bloc regardait la portée de bloc. Exemple. Trois. Donc ici, je fais à peu près la même chose. Mais au lieu d'utiliser le mot-clé let, j'utilise le mot-clé constant pour créer ce bloc. Variable portée I Donc si j'exécute des blocs ? Exemple. Trois la même chose. 15 100 champ d'application de bloc ouvert. Exemple. Numéro quatre. Voici donc deux variables globales i NJ I commence zéro n. J. Commencé 100. J' ai une boucle for et dans l'incrément de quatre boucles I. Mais j'incrémente aussi J. Donc, ce que nous devrions finir avec est la boucle où les sorties du conseil sont égales à zéro et 101 101 202 et ainsi de suite. Jetons un coup d'oeil à l'exemple de portée de bloc pour et c'est ce que nous finissons avec. Donc, le point que je fais ici est que nous ne tirons pas parti de la portée de bloc ici. Nous mettons en place I NJ à l'intérieur de la liste noire. Voyons si nous pouvons corriger cet exemple. Cinq. Ce que nous faisons, c'est très similaire, sauf qu'à l'intérieur de notre bloc, nous avons mis J à portée juste dans son bloc. Donc maintenant J est égal à 50 et nous incrémentons la poursuite. Ce que nous allons finir avec une boucle où les sorties du conseil sont de 0 51 1 51 à 51 3 51 et ainsi de suite parce que sur chaque boucle d'itération définissaient une nouvelle variable qui s'étendait juste à ce bloc et y incrémentait juste une seule. Donc, si nous allons deux blocs, allez l'exemple 5. C' est ce que nous obtenons. 0 51 1 51 à 51. Um, juste pour illustrer que Jay est portée à ce bloc et chaque sur chaque serrure interationnelle. Nous obtenons une nouvelle version de J. Nous créons une nouvelle version de J en utilisant le mot-clé let et il est étendu juste à ce bloc , alors que je suis étendu globalement. Donc, il a changé à chaque itération, obtenir également la portée de bloc. Exemple. Six. Ici, on fait exactement la même chose. Onley définissait J avec le mot-clé constant au lieu du mot-clé let. Mais ce sera un problème car avec le mot qui en découle, nous ne pouvons pas écraser la valeur que nous créons une fois que nous créons J et que nous disons est égal à un nous ne pouvons pas retourner dire J est égal à être parce qu'avec le mot-clé constant, nous créons un constante. Donc, cette tentative d'incrémenter j va lancer un type Er uh, regardez, exemple numéro six bloc étendue Exemple numéro six. Vous pouvez voir sur l'attribution d'erreur de type cour toe une variable constante. C' est ce que tu as créé une constante ici et il a essayé de la changer. On ne peut pas faire ça. Donc, le mot-clé Const fonctionne de la même manière que let mot-clé. Il crée une variable étendue au niveau du bloc. Mais une fois que vous créez cette variable ne peut pas changer, vous ne pouvez pas la remplacer. Si vous regardez une portée de bloc exemples sept. On fait presque la même chose, mais on n'essaie pas de changer Jay. On laisse ça comme ça. Donc, nous allons obtenir la sortie du conseil de 0 51 52 53 15 Ainsi de suite. Alors, un spectacle. Exemples bloquent la portée. Sept. C' est exactement ce que nous obtenons. 0 51 52 50 Et c'est parce que nous créons la variable de niveau de bloc J, qui est égale à 50. Et c'est très bien. C' est maintenant. Jay n'est pas en conflit avec cette version de James Global, mais nous ne la modifions pas. Donc la chose à retenir à propos de laisser Const. Est-ce qu'avec lead, vous pouvez créer une variable qui a bloqué la portée de niveau et vous pouvez la changer, alors qu'avec Const. Tu ne peux pas le changer. Une fois que vous avez créé, vous devez le laisser tranquille. C' est une constante, mais les deux laisser et les inconvénients créent des variables étendues au niveau du bloc. 13. Context - Discussion: Plus tôt dans cette classe, nous avons posé la question très importante. Qu' est-ce que le contexte en JavaScript ? Et nous avons trouvé la réponse était, le contexte est l'objet auquel appartient une méthode. Cette discussion était à des niveaux assez élevés. Nous allons creuser un peu plus profondément. Ici. J' ai cet objet appelé compte, et il a deux numéros de compte de propriétés, qui est un nombre et obtenir le numéro de compte, qui est une fonction en JavaScript quand une propriété est une fonction. C' est aussi appelé une méthode qui se trouve être vraie pour un certain nombre de langues. Mais ici pour obtenir le numéro de compte. La propriété est une méthode parce que c'est une fonction, et cette fonction renvoie la valeur de la propriété numéro de compte de cet objet Donc, dans ce cas, retournerait 12345 Maintenant, nous aurions pu juste dire dans notre numéro de compte get, méthode retour compte point numéro de compte, mais ce n'est pas très élégant. Donc, ce que nous faisons est que nous disons, retourner ce numéro de compte de début maintenant puisque obtenir le numéro de compte est une méthode le JavaScript. Ce mot-clé à l'intérieur de cette méthode fait référence à l'objet auquel appartient cette méthode, et cette méthode appartient à l'objet compte. Ainsi, la méthode get account number renvoie la propriété de numéro de compte de n'importe quel objet auquel elle appartient, qui se trouve être l'objet de compte. Donc, quand nous disons ce numéro de compte, nous voyons vraiment le numéro de compte point de compte. Donc, il est juste vraiment important de se rappeler que quand il s'agit de contexte, le JavaScript ce mot-clé fait référence à l'objet auquel appartient une méthode. Je creusais un peu plus profondément et regardais quelques exemples de code réels. 14. Context - Démonstration: dans votre dossier Exemples, ouvrez le sous-dossier contextuel et regardons le contexte. Exemple de base. Ici, nous avons deux objets pleins et bar. Chacun de ces objets a deux propriétés. Une propriété de salutation et une propriété grecque. Maintenant avec des objets. Lorsqu' une propriété se trouve être une fonction, elle s'appelle une méthode. Donc, chacun de ces objets a une méthode de salutation, sorte que la cupidité de point de nourriture ou la méthode grecque de nourriture retourne ce stock verdissement. Maintenant, dans une méthode que ce mot-clé est très important, il fait référence à la fonction l'objet auquel appartient une méthode de sorte que cette clé était en ligne. Numéro cinq se réfère à la nourriture parce que cette méthode salue appartient à cet objet alimentaire. Encore une fois, le script de travail. Ce mot-clé à l'intérieur d'une méthode fait référence à l'objet auquel cette méthode appartient en ligne. Numéro cinq. Ce point vert se résout à la nourriture créent en ligne numéro 13. Cette salutation de stock se résout à la lecture de Bardach, sorte que nos sorties de journal consul devraient être égales. Je suis plein et je suis bar parce que rappelant la nourriture, artère et le degré de bar. Voyons donc cela en action. Si j'ouvre le contexte de la portée de bloc. Exemple. Je vois que je suis plein et que je suis bar, et c'est exactement ce que nous attendons. Maintenant, il y a quelque chose que nous pourrions faire qui pourrait rendre cela un peu plus clair à l'intérieur de la méthode de bienvenue de Barda. Je vais mettre un conseil dura déclarations. Je vais dire que le conseil pendant ce temps, je vais juste inspecter ça pour qu'on puisse juste comprendre un peu plus ce que cela signifie en ligne numéro 13. Donc maintenant, chaque fois que nous exécutons le code, je vois cet objet dans ma console et je pouvais voir qu'il a deux propriétés fluage, ce qui est une fonction et un salut. Je suis bar si je le fais. Si je prends ça et que je le déplace à l'intérieur de la nourriture, la nourriture est gourmande, gourmande. Je ne suis pas réexécutée ? Ce code est maintenant objet. Vous pouvez voir qu'il a une méthode grecque et une salutation. Je suis de la nourriture. Donc, la chose à retenir à propos du contexte est que c'est l'objet auquel une méthode appartient donc à l'intérieur d'une méthode. Le script Java. Ce mot clé peut être utilisé pour référencer l'objet auquel appartient cette méthode ici, à l'intérieur de la nourriture, que ce mot clé fait référence ici à l'intérieur de la barre que ce mot clé y fait référence. Donc, cette salutation stock résout à salutation Bardot et cette salutation stock en ligne. Cinq résolves à la nourriture sont saluer. 15. Lorsqu'ils « ressentirent la même façon - Discussion: parfois, le contexte de délimitation de la portée peut ressembler à la même chose. Donc, vous pouvez vous demander, est-ce que le contexte de portée Everth est la même chose ? Et la réponse est non. Sauf qu'il y a des moments où le contexte de portée peut ressembler à la même chose. Parlons de Global implicite et de Global implicite est quelque chose qui se produit lorsque vous omettez le mot-clé VAR. Donc, par exemple, sur le côté gauche, je crée cette fonction nourriture froide, et je crée une variable de vitesse en disant, vitesse var est égale à cinq. Donc, quand je fais, cette vitesse est dans le cadre privé de la fonction alimentaire. La vitesse est maintenant une variable privée sur la droite. Je crée à nouveau la fonction alimentaire, mais je dis juste que la vitesse est égale à cinq. J' ai bien omis le mot-clé VAR en omettant le var. La vitesse des mots clés est maintenant une variable globale en raison de notre mot clé a été omis. En fait, non seulement la vitesse est une variable globale, mais c'est ce qu'on appelle un global implicite. Nous créons implicitement une variable globale en omettant le mot-clé var. En plus de cette vitesse est maintenant propriété de l'objet window. C' est vrai. Lorsque vous créez une variable globale implicitement ou explicitement, vous créez une propriété sur l'objet window, donc en disant que la vitesse est égale à cinq à l'intérieur d'une fonction. Je dis aussi que la vitesse des points de fenêtre est égale à cinq. Ils ont tous deux accompli exactement la même chose. En fait, je peux aussi sauver notre vitesse égale à cinq dans la portée globale, et cela accomplit exactement la même chose. En fait, je peux même dire que la vitesse est égale à cinq dans la portée globale et cela accomplit exactement la même chose. Il est donc super important de savoir que ce que nous faisons sur la droite en disant vitesse égale cinq Lorsque nous omettons le mot-clé var que nous faisons, deux choses créaient un global implicite. Nous créons une vitesse de froid variable globale, et nous créons également une propriété sur l'objet de fenêtre appelée speed car toute variable globale devient également une propriété hors de l'objet de fenêtre. Et ceci en est un exemple. La portée et le contexte commencent à ressentir la même chose parce que nous sommes en train de créer des variables cette portée. Mais nous travaillons avec un objet ou donnons des propriétés d'objet. Et si nous créons une fonction ou une méthode appelée fenêtre get speed, nous pourrions dire retourner cette vitesse de point et cela fonctionnerait. Donc, c'est entrer dans cette zone floue où le contexte de portée ne sera pas la même chose peut parfois ressentir la même chose, et il est important de comprendre qu'ils ne le sont pas. Mais nous entrons dans une zone grise, une zone grise où ça semble un peu déroutant. Maintenant. Si je devais remettre le mot-clé VAR dans cette fonction et enregistrer notre vitesse égale à cinq vitesses est maintenant de retour dans la portée privée de la fonction complète à nouveau. Et c'est le cas. n'y a plus de variable globale appelée speed et Speed n'est plus une propriété de l' objet window. Parlons maintenant du JavaScript, ce mot-clé à l'intérieur des fonctions globales. Si lourde disclaimer ici pour les prochaines minutes. Nous parlons de JavaScript dans le navigateur. Il y a un autre contexte, tel que Node, mais pour l'instant, nous parlons juste de JavaScript comme il s'exécute dans le navigateur. Et aussi il ya quelque chose appelé mode strict, qui pourrait changer radicalement la conversation que nous sommes sur les orteils ont donc juste être conscient de cela, Um va certainement en apprendre plus sur le mode strict dans quelques minutes. Nous regardons les exemples de code, mais juste pour la prochaine minute d'essayer d'oublier le mode strict et juste garder à l'esprit que nous parlons de travaux. Exécutez dans le navigateur. D' accord. Fin de l'exclusion de responsabilité. Maintenant, cet intérieur de la fonction globale. Donc, à l'intérieur d'une fonction globale, le javascript du mot-clé ce est égal à l'objet window. Donc, du côté droit, um a créé cette fonction appelée nourriture, et j'ai référencé ceci. Et quand j'ai référencé cela, je fais vraiment référence à la fenêtre à l'intérieur d'une fonction globale. Le JavaScript. Ce mot-clé fera toujours référence à l'objet window. Donc si je dis cette vitesse de point, c'est comme dire vitesse de point de fenêtre. Si je dis que cette vitesse de départ est égale à cinq, je dis vraiment que la vitesse de point de fenêtre est égale à cinq. Et non seulement cela, je crée aussi une variable globale parce que dire que nous ne doutons pas que la vitesse est égale à cinq, c'est comme dire dans la portée globale de notre vitesse est égale à cinq ou vitesse égale à cinq. C' est une de ces situations où les lignes entre la portée et le contexte deviennent un peu floues et cela peut être déroutant. Ils ne sont pas exactement la même chose, mais ils se rapprochent très près dans cette situation. Donc gardez juste à l'esprit que dans une fonction déclarée globalement ou une fonction définie, le JavaScript, ce mot-clé référence l'objet fenêtre, et vous créez essentiellement également. Lorsque vous ajoutez une propriété à l'objet fenêtre, vous créez ainsi une variable globale. Je pense que cela aura un peu plus de sens lorsque nous examinons quelques exemples de code, alors regardons un peu de code. 16. Lorsqu'ils sont à la même sens : Code - partie 1: dans votre dossier Exemples, ouvrez le sous-dossier intitulé Étendue et contexte semblent les mêmes. Et regardons le premier exemple de fichier. Copiez cet exemple Un code qui est nommé crée une variable de vitesse et affiche dans la console. Copiez ce code et collez-le dans vos tâches. Bon conseil. Et nous voyons que la sortie que nous obtenons est de 100. Ok, faisons le tour en arrière. Donc, dans cet exemple, nous créons une variable privée, vitesse froide à l'intérieur de cette fonction alimentaire sans mettre dans la console et seulement exécuter nourriture. On en voit 100. Donc rien de spécial là-bas. Mais juste Teoh a établi que nous voulons utiliser le mot-clé var pour créer une variable privée . Et nous en avons parlé plusieurs fois dans cette classe. Donc, quand vous descendez à l'exemple, être celui qui est ah, qui dit ce qui se passe si vous oubliez le mot-clé var ici en ligne ? 15. J' oublie le mot-clé var I sur la ligne quatre de var utilisé, mais en ligne 15 Je viens de l'omettre, Donc je dis vitesse égale 100 I vitesse de sortie et exécuter la nourriture. Donc, euh , ok, alors que se passe-t-il si on oublie le mot clé bar, mais je vais copier ce code, et je vais coller ça dans la première page gratuite des consoles et j'en ai encore 100. Donc on en a encore 100. Nous savons que, euh, nous avons créé la variable. Nous le sortons, mais je pense que quelque chose de différent se passe ici. Eh bien, quelque chose s'est passé ici. Il y a quelque chose qui arrive à cette variable de vitesse. Ce qui se passe, c'est que la variable de vitesse devient ce qu'on appelle un global implicite et implicite est une variable en JavaScript basé sur le navigateur, où lorsque vous omettez de notre mot-clé cette variable devient une propriété hors de l'objet de fenêtre, il devient une variable globale. Et rappelez-vous, c'est vraiment super important élément d'information est qu'une variable globale est une propriété des objets de fenêtre. Donc, si je tape speed dans ma console, je vois 100. En fait, si je tape fenêtre a la vitesse, je reçois 100. En fait, si je tape fenêtre et que j'inspecte l'objet de la fenêtre et que je fais défiler tout le chemin vers le bas et que je regarde, je pourrais voir qu'il y a une vitesse correctement ici. Donc, le point ici est que lorsque vous omettez le mot-clé var, vous créez ce qu'on appelle un global implicite. Il devient une variable globale, et vous l'avez fait implicitement. Créer un graphique AMP implicite Global est vraiment la même chose que de déclarer le mobile la variable globale. Les lignes 14 et 17 sont donc exactement les mêmes. Ils font exactement la même chose. Ils créent tous les deux un très bien global. La seule différence est en ligne. 14. Je le fais explicitement. Je dis que la vitesse var est égale à 100 Je le fais dans la portée globale était en ligne 17. Je le fais implicitement, et je dis, Eh bien, vitesse, c'était 100. Et parce que je suis dans une fonction, l'omission des mots-clés var dit, Oh, ça va être un global. Mais l'autre chose qui s'est produite est que nous avons découvert il y a quelques secondes est que la création et une variable globale crée également une propriété de l'objet fenêtre avec le même nom, donc les lignes 14 et 15 sont exactement les mêmes. Ils accomplissent exactement la même chose. La vitesse Var est égale à 100 vitesse de point de fenêtre ah est égale à 100. Les deux créent une variable globale qui est également une propriété des objets de fenêtre. Donc, ce n'est pas une situation où la portée et le contexte ont presque fusionné. Ils se sentent vraiment comme la même chose, et d'une certaine façon vous pouvez presque les considérer comme la même chose. Cela dépend de la façon dont vous voulez en débattre, mais c'est vraiment le genre de rencontre, et ils se sentent certainement la même chose parce que nous avons une variable globale était sans doute à ce sujet. Mais cela devient très bien une propriété de l'objet window. Et vous pouvez aussi dire que c'est exactement la même chose. ligne 16 fait exactement la même chose que les lignes 14 ou 15 car en excluant le mot-clé lointain sur 16, je crée un global implicite. Je le fais juste dans l'espace global. Donc, toutes ces trois choses ont accompli exactement la même chose. Ils créent une variable globale, et cette variable globale devient la propriété de l'objet fenêtre à une pièce incroyablement importante pour les informations à garder à l'esprit, car lorsque vous travaillez avec JavaScript basé sur le navigateur, l' objet fenêtre est un objet très important. Les variables globales sont un concept important pour être conscient de leur généralement mauvais. Il y a beaucoup de, um, il y a certainement beaucoup de propriétés de problème de l'objet fenêtre, mais créer intentionnellement des variables globales est généralement quelque chose que vous voulez éviter. Mais il est important de comprendre que lorsque vous omettez le mot-clé var à l'intérieur d'une fonction, vous créez ce qu'on appelle un global implicite. C' est une variable globale, vous le faites implicitement, et cette variable devient également une propriété de l'objet window. Toute variable globale est également une propriété de l'objet window. 17. Lorsqu'ils 'ressent, la même fois - Code - Partie 2: Maintenant, regardons l'exemple. Tu vois celui qui dit : Qu'est-ce que c'est ? Donc j'ai encore cette nourriture de fonction. Et à l'intérieur de la nourriture, je crée une variable. Donc, c'est bien. J' utilise à nouveau le mot-clé var, ce qui je pense est mieux. Donc, je crée une variable privée à l'intérieur de la nourriture. Donc la vitesse est privée à cette fonction, et j'alerte cette vitesse de stott, ok ? Et puis j'exécute de la nourriture, donc on devrait avoir une alerte. Mais la question est, quelle sera la valeur que nous verrons dans l'alerte ? C' est la question. Alors essayons. Il est copier ce code et aller au script de travail. Consul , rentrez ce manteau. Et lorsque vous exécutez le code, nous voyons indéfini pour les alertes. Cette vitesse de point n'est pas définie. Bon, voyons si on peut comprendre ce qui se passe. Eh bien, encore une fois, nous avons cette vitesse variable privée et nous alertons cette vitesse de départ. Eh bien, quand je vois quelque chose, c'est quelque chose que je pense, propriété de point d'objet. Donc cette vitesse de point n'est pas la même chose que la vitesse parce que s'il voulait de la vitesse, nous aurions juste de la vitesse. Mais nous n'avons pas de vitesse, nous ne sommes pas définis, et nous n'alertons pas la vitesse. Nous apprenons cette vitesse de point. Donc, comme nous l'avons mentionné plusieurs fois dans sa classe, ce script de travail ce mot-clé fait référence à l'objet auquel appartient une méthode. Eh bien, cette fonction alimentaire n'est pas vraiment, euh, une méthode. Ou c'est ça ? Peut-être qu'il iss Copions ce code à nouveau et exécutons le code. Et puis voyons ce qui se passe si on tape Foo, hein ? Donc j'ai tapé fu dans ma console. Je reçois ressemble au code de notre fonction. Il ressemble exactement au code de notre fonction. Eh bien, il s'avère que, et si je tape fenêtre dot food, je reçois le code de notre fonction. Il s'avère donc que Fu est une propriété de l'objet window. Et la raison est que nous déclarons que la nourriture dans la portée mondiale ici étaient dans la portée mondiale, n' étaient pas à l'intérieur d'une fonction où nous sommes à l'intérieur d'une fonction ici sur les lignes 26 ou 28. Mais la déclaration de fonction réelle de plein en ligne 25 est dans la portée mondiale. Donc, lorsque nous créons une fonction globale, nous créons une variable globale. Et comme nous l'avons discuté il y a quelques minutes, une variable globale est également une propriété des objets de fenêtre. Donc, en ce moment, la nourriture est une propriété de l'objet fenêtre. Ok, donc cela signifie que le mot-clé this fait référence à l'objet window. Donc, quand je dis cette vitesse de point, je demande la propriété speed des objets de fenêtre. Donc alerter cette vitesse de démarrage sera exactement la même chose que dire les lignes de vitesse de point de fenêtre d'alerte 28 29 sont exactement la même chose. Exactement la même chose. Donc, la situation est que nous n'avons pas ah, propriété speed sur la fenêtre Pas dans cet exemple. L' exemple précédent que nous avons fait. Mais ici nous ne le faisons pas parce que cette vitesse est privée juste là. En ligne 26. C' est une vitesse privée, mais la vitesse des points de fenêtre n'existe pas. Et si je devais venir ici et dire des aigles de vitesse var, disons 5000. Alors copiez ce code et actualisez la page et je vais accélérer ce code. Et maintenant, je vois 5000. Comment je vois 5000 avec la raison est que maintenant nous créons une variable globale appelée vitesse. Cette vitesse de point est égale à ce point est la vitesse de point de fenêtre Donc la fenêtre ne vitesse la vitesse globale est 5000. Donc, dans ce cas, nous obtenons une valeur, qui est ce qui est bon. Mais la question initiale ne portait pas sur une variable de vitesse globale. Donc, dans ce cas, en ligne 28 cette vitesse de début ou la vitesse de point de fenêtre est indéfinie. Nous n'avons jamais défini une vitesse de point de fenêtre. Et cela signifie que l'alerte sur 28 produit indéfini. n'y a pas de propriété de vitesse de point de fenêtre. 18. Lorsqu'ils 'ressent, la même fois - Code - Partie 3: maintenant, jetez un oeil. À l'exemple D euh, où il est dit, Qu'est-ce que c'est en mode strict ? Donc, dans cette situation, je fais quelque chose votre en ligne 36 de dire utilisation stricte. Et cela dit fondamentalement au moteur JavaScript pour l'exécution de cette fonction, utilisez le mode strict. Et la différence ici est que pendant que cette fonction s'exécute, nous allons être en mode strict afin que le penser que le comportement que vous verrez est différent dans le consul. Copiez ce code. Il est collé dans votre console, et nous obtenons ne pouvons pas re la vitesse de propriété de indéfini. Donc, la vitesse parmi l'amende. Cela signifie que l'objet à partir duquel nous essayons d'obtenir une propriété speed n'est pas défini. Donc, cette vitesse ce n'est pas que ce point Speedos sous find est que ce n'est pas défini. Et la raison en est que lorsque vous portez un code JavaScript strict et basé sur un navigateur quand nous sommes en mode strict, nous ne pouvons pas accéder à l'objet fenêtre en utilisant ceci, um, à partir d'une fonction globale, c'est juste un des les caractéristiques du mode strict. Donc je vais continuer en mode strict. Mais je voulais juste souligner qu'il est important de savoir que lorsque vous utilisez le mode strict, vous mode strict, ne pouvez pas accéder à l'objet fenêtre en utilisant cela à l'intérieur d'une fonction globale 19. Lorsqu'ils 'ressent, la même fois - Code - Partie 4: Ok, regardons l'exemple E. Celui qui s'intitule Food était maintenant un constructeur. Donc en ligne 49. J' ai la fonction complète, mais vous remarquerez peut-être que j'ai utilisé la majuscule F quand j'ai nommé Food, pas seulement F en minuscules, mais Capitol Foo. Maintenant, cela ne change rien essentiellement, mais c'est une convention que la plupart des programmeurs utilisent, que vous voulez capitaliser la première lettre d'une fonction quand vous voulez qu'elle soit un constructeur. Et je veux être construit parce que en ligne 56 Je ne suis pas seulement exécuter de la nourriture. Je l'ai haché en bâchant. Je dis que Barbu est synonyme de nourriture nouvelle. Et si vous avez travaillé avec des fonctions de constructeur funk de construction à tous les scripts de travail, vous savez que quand vous à la place elle a mangé un constructeur, vous exécutez donc fu sera exécuté. Mais c'est un peu différent parce que les barres de valeur ne sont pas l'instance de la classe alimentaire. La nourriture agissait essentiellement comme une classe ici, et le bar va obtenir une instance de la classe. Donc, à l'intérieur de notre constructeur, je crée une variable de vitesse privée à ce constructeur, et j'alerte cette vitesse de point donc exécutons ce code dans notre console et nous verrons ce qui se passe. Donc j'ai alerté, et je ne suis pas défini. Pourquoi c'est ça ? Eh bien, si vous revenez au code, Will, ma première pensée aurait pu être si bien, je crée cette variable de vitesse. Quand je suis à Stan, elle mange de la nourriture ? L' exécution d'un producteur alimentaire ne devrait-elle pas être un exemple de nourriture ? Est-ce qu'il devrait. Mais le problème est que vous pouvez penser que le mot que cela fait référence, euh, l'instance de la nourriture et il le fait. C' est de la vraie nourriture. La barre Ceci est égal à barre, qui signifie que lorsque vous à la place dans la forme pour utiliser la barre, le mot-clé ce à l'intérieur du constructeur préfère l'instance qui est renvoyée de sorte que c'est vrai. Mais la vitesse n'est pas une propriété du constructeur. C' est une variable, et c'est l'un des domaines où le contexte de portée peut ressembler à la même chose. Mais dans ce cas, ils ne sont pas vraiment la même chose. La vitesse est une variable lorsque vous pensez variables, vous pensez portée, mais dans ce cas, nous essayons de référencer A. Nous essayons de référencer la propriété speed de cette variable, mais de cette instance mais l'instance n'a pas de variable de vitesse. Il a une vitesse. N' a pas de propriété speed en tant que variable de vitesse. Eso cette vitesse de point est essentiellement indéfinie. Si je devais dire, euh, voyons voir le retour, heu , , Speed five 1000. Et puis j'alerte Bardot vitesse. Ça devrait marcher. Alors copions ce code et collez-le et nous obtenons 5000. La raison pour laquelle nous obtenons 5000 est parce que maintenant la nourriture de classe a une barre de propriété de propagation finit avec la propriété de vitesse. En fait, si je devais faire ah, une console pendant que je le ferai, je tape juste barre dans un dans la console. Je vois que je reçois un objet avec une propriété speed. Donc, dans ce cas, ça fonctionnerait. Maintenant, l'instance de nourriture a une propriété speed. Une autre façon de le faire serait si je voulais garder l'alerte à l'intérieur du constructeur. Je pourrais dire que la vitesse du prototype Food Dot Pro est égale, disons, 10 000 juste pour prouver notre cas ici. Donc je vais rafraîchir la page et, euh, euh, j' espère que je ne devrais pas dire non. Tu vois, tu y vas. Type de. Ok, alors actualisons la page. Et maintenant je reçois 10.000 Et la raison est que même si je ne déclare pas de propriété speed quand je crée le constructeur, je crée une propriété speed sur l'objet prototype. Maintenant, le prototypage est à nouveau. C'est Ah, c'est du carburant pour toute une classe. Mais le point ici est que j'étends le constructeur de nourriture ici avec je lui donne un prototype donnent la propriété de mise en place de vitesse sur son objet prototype, ce qui signifie que quand je la place, elle a mangé. Foo Bar aura une propriété speed, donc cette vitesse de point résout à 10 000. Donc, mais la question originale n'avait pas de prototype, et c'est la raison pour laquelle nous sommes indéfinis est parce que cette classe ou constructeur a une variable de vitesse mais pas une propriété de vitesse. 20. Lorsqu'ils sont à la même sens : Code - Partie 5: regardez maintenant, par exemple, si celui intitulé Food est juste une fonction à nouveau. Donc ah Fu est juste de retour à être une fonction. Ce n'est pas un constructeur. Je ne tache pas. Elle l'a mangé. Et en ligne 61 J'alerte vitesse est égale à 100 ou je dis vitesse égale à 100. Et puis sur 63, j'alerte cette vitesse de point. Donc copiez ce code et actualisez la page et collez ce code dans votre navigateur et nous obtenons 100. Donc, jusqu'à maintenant, dans beaucoup de ces exemples, nous avons défini. Mais dans ce cas, nous en avons 100. Et la raison est que si vous vous souvenez qu'en omettant le mot-clé var, je finis avec un global implicite. Donc, une fois de plus, omettre le mot-clé var est à peu près la même chose que de faire cela, ce qui est aussi exactement la même chose que de faire cette ligne 60 61 62 ou tout exactement la même chose . Mais quel que soit Online 63. En omettant le mot-clé var, je crée un global implicite et nous créons une propriété sur l'objet fenêtre appelé speed, ce qui signifie que Online 64. Quand on accède à cette vitesse de point, on en obtient six. On tombe malade, on en a 100 parce qu'on demande essentiellement la vitesse de la fenêtre. Donc, c'est un cas encore une fois où la ligne entre le contexte de contact de portée peut sembler floue parce que nous créons une variable ici dans la ligne 62. n'y a aucun doute à ce sujet, mais nous créons un global implicite et impliquons que les propriétés deviennent globales de l' objet fenêtre dans JavaScript basé sur le navigateur. C' est donc là que sa portée. Mais d'une certaine manière, c'est aussi le contexte parce que nous cherchons la propriété d'un objet, et nous pouvons accéder à cet intérieur de cette fonction, euh, et référencer l'objet window. 21. Lorsqu'ils 'ressent, la même fois - Code - Partie 6: dans la portée dans le contexte semblent le même sous-dossier. Ouvrez le contexte de portée de fichier semble le même pour que vous avez vu un certain nombre de fois dans la classe ici. Nous itérons tous ces vendeurs, et nous utilisons chaque méthode sur chaque allié, et nous créons une référence à l'allié ou à l'élément de liste particulier. Donc, nous faisons cela en créant une variable appelée élément, et c'est égal à cela. Et comme nous le savons, ce rappel est exécuté dans le contexte de l'élément de liste. Donc, ce genre de sens était d'utiliser cette enveloppe avec Jake fatigué et nous mettons un point d' orteil égal . Et puis nous disons Item, trouver un bouton de sélection, puis nous configurons le clic d'une alerte pour le gestionnaire d'événements de clic pour ce bouton de sélection. Donc, si vous regardez le fichier suivant, portée et le contexte semblent les mêmes. Trois. Nous accomplissons la même chose que nous le faisons différemment. Où obtenir une prise de ce deuxième argument qui est passé à la fonction de rappel appelée Dom Element, et nous l'enveloppons avec Jake lasse élément source est égal à Dom Element Rapid Jake fatigué. Jetons donc un coup d'oeil à ce que Dom Element est vraiment. Donc de retour dans l'une ou l'autre page Web. Exécutez l'exemple. Portée bien, prise de vue lors de la définition du contexte, ressentir la même chose. Trois. Ok, donc j'ai un tas de sorties de console, et il n'y a que presque la même chose. Mais vous pouvez voir son allié vendeur zéro ls personne de vente. On est aussi personne à et ainsi de suite. Donc, ce qui se passe est dans chacun de ces cas étaient en train de mettre un élément dom. Donc, le point ici est que cet élément dom que vous voyez dans la console représente chacun des éléments de liste dans chacun des éléments Dom des vendeurs, bien qu'en itérant. Donc, ce rappel quand vous l'appelez chaque message. Le rappel reçoit deux arguments. premier argument est l'index, qui est l'index numérique de l'élément, et le second argument est l'élément lui-même. Donc, dans ce cas, il est en quelque sorte que c'est un peu où le contexte de portée se sent comme la même chose en ce que nous créons une variable. Mais ce que nous définissons la variable est l'élément dom actuel sur lequel itéraient , ce qui est vraiment plus une chose de contexte parce que c'est comme lorsque nous utilisons le mot ceci plus tôt . C' est le contexte de cette méthode. Off cette fonction est le moment dominant sur lequel nous itérons, qui est des éléments dom. Donc, c'est une situation où c'est une sorte de portée dans le contexte dans la même ligne 10 élément est certainement une variable que la portée, mais alors nous définissons égal à un objet, qui est le contexte de lequel ou le contexte sur lequel cette fonction est en cours d'exécution. Maintenant, si vous regardez la portée du fichier en contexte dans les mêmes quatre, nous faisons quelque chose d'un peu différent ici. Si vous regardez, regardons trois à nouveau et regardons comment nous, euh,avons euh, exécuté la méthode de classe à bascule. Nous avons dit Sales person underscore Plus index indexera une variable, donc nous utilisons la portée ici pour obtenir une prise de l'élément actuel. Donc la personne de vente zéro dit que la personne veut cette personne sur ainsi de suite. Euh, mais par exemple, numéro quatre, nous disons juste que l'élément utilisait la méthode d'élément que nous avons utilisée apparaissent, ce qui est aussi variable. Mais d'une certaine manière, c'est comme où le contexte de portée ait une sorte de ligne floue parce que nous sommes en train de définir la variable égale au contexte sur lequel cette fonction est exécutée. Donc, d'une certaine manière, nous utilisons la portée et le contexte ici en même temps. C' est un élément variable est variable, mais cet élément avec variable élément variable, il est défini sur le contexte dans lequel cette fonction est exécutée. 22. Prendre de meilleures décisions -: L' un des principaux objectifs de ce cours était de pouvoir prendre de meilleures décisions concernant notre code en utilisant notre connaissance de la portée et du contexte. Donc, ce faisant, il y a probablement quelques questions qui pourraient venir à l'esprit en premier. Par exemple, quand dois-je tirer parti de la portée et quand dois-je tirer parti du contexte ? Eh bien, avant de pouvoir vraiment répondre à ces questions, nous devons réfléchir à une question plus importante, qui est ? Quel est le problème que vous essayez de résoudre lorsque vous planifiez votre code à un moment donné ? Quel est le problème, ou quoi ? Qu' est-ce que tu essaies de réaliser ? Et probablement vous allez essayer de résoudre des problèmes liés à, Vous savez, le genre de choses que Vous savez, nous apprenons dans ces grands livres que nous lisons anti patterns, des choses comme du code répétitif ou des valeurs codées en dur ou des fonctions gonflées. Ce ne sont que des exemples des types de problèmes que nous ne voulons pas rencontrer comme vous planifiez et notre code. Donc, à tout moment, une fois que vous êtes clair à ce sujet, le problème que vous essayez de résoudre, alors vous pouvez répondre à cette question, qui est le bon outil pour ce travail. Et bien sûr, il existe de nombreux types d'outils différents. Il y a des outils pour chaque travail, mais vous devez déterminer quel est le bon outil pour le travail que vous avez à portée de main. Et une fois que vous avez choisi le bon outil, vous pouvez commencer à planifier votre code. Et décider ne devrait pas tirer parti de la portée. Je devrais Leverett contexte pour ce problème particulier. Alors, allons-nous un peu plus loin et regardons en fait quelques exemples de code pour, ah, vraiment comprendre ce que cela signifie. 23. Prise de meilleures décisions - Démonstration: dans votre dossier Exemples. Ouvrez le sous-dossier de planification et jetons un coup d'oeil à l'exemple de planification un. Donc, vous avez un code qui devrait vous sembler familier. Um, itérer sur les vendeurs, et j'ai mis en place un tas de gestionnaires d'événements clics. Vous remarquerez. Je dis que j'ai un manteau répété. Donc, faisons une recherche pour le code que je dis est répété à ces deux instances de celui-ci. Donc, il y a deux endroits dans mon code ici sur la ligne 27 ligne 47 où je veux la longueur de tous ces vendeurs sélectionnés. Donc, ce que cela signifie, c'est que , um, si vous allez exécuter l'exemple de chaînage de la méthode, c'est juste là que la pomme, tout le code fonctionne. Donc, quand je, um, sélectionnez des vendeurs quand je vais ici et cliquez sur le bouton Supprimer sélectionné qui supprime tous les propres, tous les vendeurs qui sont sélectionnés et je sais que parce que lorsque j'inspecte l'un des ces alliés en particulier, vous pouvez voir qu'il a la classe sélectionnée. Celui-ci a une classe sélectionnée, et si je supprimerais cette classe, il n'apparaîtrait plus sélectionné. Donc, ici disait, vendeurs, Ally a choisi la longueur de tous ces éléments. Il y a donc deux cas où je veux connaître la longueur des éléments sélectionnés par les alliés ou comment les alliés Maney ont sélectionné des éléments. Mais le problème ici est que nous avons du code répété. Je suis littéralement taper des citations, livre des vendeurs, espace l Je point sélectionné deux fois. Et que se passe-t-il si je change l'élément commercial ? Les vendeurs, je suis Teoh, vous savez, les vendeurs. Tout ce qui dit que c'est juste, tu sais, je vais changer le nom de ce que j'ai 7 ans. Je dois aller à chacun d'entre eux et je dois aller comme ça, et c'est une affaire désordonnée. On ne veut pas faire des trucs comme ça. C' est extrêmement difficile à gérer. Et il pourrait y avoir des dizaines ou des centaines de fichiers dans notre code où c'est ou que j'ai défini littéral . On ne veut pas ça. Donc, une autre façon d'approches serait, aussi si vous regardez expliquer exemple à nous définir une variable vendeurs. Donc, ce vendeur de signe de dollar variable représente l'élément Dom vivant. Cet élément cette variable ici représente cet élément ici. L' idée des vendeurs. Nous avons donc maintenant une référence à cet élément. Donc, nous n'avons pas à continuer de taper ça. Et si nous renommons ceci Ah, je suis dans notre marque jusqu'à ah, vous savez, vendeurs tirets tout. Ensuite, nous pourrions juste faire ce changement ici une fois et une petite cascade à notre code. Donc ça marche mieux. Parce que maintenant nous disons juste des signes de dollar vendeurs point trouver l que j'ai sélectionné. Et la même chose ici qui est un peu plus efficace, mais nous avons encore du code répété. Étaient encore littéralement taper l i point sélectionné et l j'ai été sélectionné. Et si on faisait des plaies à ces alliés ? Ou si nous changeons la classe sélectionnée pour que je sois sélectionné pour que s'plus retaper, euh, je, hum, sélectionné et je dois prendre ce changement et je vais le faire ici, et c' est encore une fois salissant les affaires. On ne veut pas faire des trucs comme ça. Donc je pense qu'il y a une meilleure façon de le faire. Si nous allons à planter l'exemple 3. Vous pouvez voir que ce qu'on a fait ici, c'est qu'on a notre signe de dollar. Variable très vendeur. Et puis nous avons une fonction de méthode appelée get salespeople length et qui renvoie la longueur de tous les vendeurs sélectionnés. Donc, nous disons que les vendeurs de signe volé dot find utilisaient la méthode find de cet objet passant un allié. Et ah, en fait, c'est que tous les vendeurs ne sont pas longs. Il y a combien de vendeurs ? Et puis nous voulons connaître le nombre de vendeurs sélectionnés il y a. On dit que les vendeurs trouvent L. J'ai été sélectionné. Ici, il y a juste une longueur de point. Ici, il est trouver l une longueur sélectionnée point, mais dans les deux cas exécutaient une fonction de cette façon. Quand nous voulons connaître le nombre de vendeurs, nous appelons simplement la fonction, obtenir la longueur des vendeurs, c'est juste que simple. Ensuite, nous voulons connaître le nombre de vendeurs actuellement sélectionnés. Nous appelons simplement la fonction, obtenir la longueur des vendeurs sélectionnés. Nous le faisons deux fois, et de cette façon, si quelque chose change dans notre code, si nous changeons cette idée aux vendeurs, cela n'a pas d'importance. On fait ce changement juste là, et c'est tout. Nous ne nous inquiétons pas pour ça. Et si nous devions changer les, euh, les Alliés qui ont les vendeurs à bousculer. On pourrait faire ce changement là-bas, et on n'a pas besoin d'en faire un autre endroit. Ou si nous avons nommé. Si on nous appelait ça. Si nous avons renommé la classe qui indique que quelque chose est sélectionné pour que je suis sélectionné, nous faisons juste ce changement ici et c'est tout. Tout le monde appelle cette fonction. Ils ne s'inquiètent pas de ça. Ils appellent cette fonction dysfonctionnements, en prenant soin de la façon dont cet ensemble afin que vous puissiez re facteur toute la journée. Et nous pourrions vraiment nous débarrasser de toutes ces petites règles que nous utilisons notre co parce que nous avons tout un tas d'entre elles. Et tout cela est encore une sorte de désordre parce que ce sont les chaînes d'air que nous devons changer ma main si l'une de ces définitions change. Donc le principal point que je fais ici, c'est que nous le voulons. Maintenant que nous comprenons la différence de portée dans le contexte, nous pouvons faire des choses comme créer une portée variable que nous pouvons utiliser dans tout notre code. Ou nous pouvons faire des choses comme créer des méthodes d'exploitation sur les objets, contexte pour re facteur un code ou un code de planification d'une manière qui est plus intelligente et plus facile à gérer. 24. Un peu plus sur le contexte: Parlons un peu plus du contexte. J' ai laissé la couverture deux choses d'abord, changer de contexte et ensuite ensuite cela contre cela enveloppé avec Jake Weary. 25. Contexte de commutation avec .call() et .applicable (): Voyons donc ce que cela signifie de changer de contexte en JavaScript. Plus tôt, nous avons appris que le contexte fait référence à l'objet auquel appartient une méthode, mais parfois nous pouvons vouloir faire croire à une méthode qu'elle appartient à un objet différent. Par exemple, lorsque le côté gauche de l'écran, j'ai un objet tenir de la nourriture sur le côté droit de l'écran. J' ai un objet appelé Bar. Chacun de ces objets a une propriété de salutation, et chacun de ces objets a également une propriété grecque. Maintenant, une fois de plus et JavaScript quand une propriété est une fonction, il s'appelle une méthode. Donc, dans chaque cas, la méthode grecque renvoie cette salutation de stock. Donc, si j'exécutais la cupidité des points de nourriture, je serais plein. Et si je devais obtenir exécuter Bardot saluer, je serais Bardot, et dans chaque cas, la méthode grecque interagit directement avec la propriété de salutation de cet objet. Chaque méthode de greet est exécutée dans le contexte de son objet. Food dot cupidité est exécutée dans le contexte de la nourriture, et Bardot salue est exécuté dans le contexte de la barre Eh bien, il ya un moyen qui affaiblir sauter dans et nous pouvons changer le contexte de chaque méthode. C' est ce qu'on appelle le changement de contexte, donc on peut faire la méthode de salutation des points alimentaires. Je pense qu'il appartient au bar et qu'on pourrait faire la méthode Bardot saluer. Pensez qu'il appartient à la nourriture parce que vous pouvez voir ici Food d'accord, est maintenant sur la droite. Il a cette boîte bleue. Et quand exécuter la cupidité des points de nourriture, je reçois je suis en emprunter un. Exécutez la cupidité Bardot. Je comprends que je suis de la nourriture. Cela peut sembler un peu déroutant, un peu étrange, alors passons dans un code et nous pouvons voir comment cela fonctionne vraiment. Dans votre dossier Exemples. Ouvrez le contexte du dossier, puis ouvrez le charbon de contexte de fichier et appliquez-le à j'ai deux objets ici, plein et bar, et les deux objets ont une propriété de salutation, et les deux objets ont une méthode de greet dans les deux cas qui a renvoyé la valeur de cette propriété d'accueil d'objets. Donc, si je voulais exécuter la nourriture point grec, je devrais obtenir que je suis de la nourriture. Et si j'exécuterais Bardot Greek, je devrais me faire barrer. Nous allons nous assurer que cela fonctionne comme nous nous y attendons. Copiez donc ces deux objets. Payson, console JavaScript et maintenant je vais exécuter la nourriture vert et je reçois que je suis de la nourriture. Et si j'exécute, exécutez la cupidité Bardot, je comprends que je suis des barreaux. C' est à peu près ce qu'on s'attend à ce qu'il se produise ici, à la ligne 17. Copiez ce code et exécutez-le dans votre console JavaScript. Donc quelque chose de bizarre s'est passé ici. J' ai exécuté de la nourriture, Doc Salut et je suis Bar, ce qui n'a pas vraiment de sens, mais il se passe un peu plus ici, j'ai dit. Barre d'appel à point de degré alimentaire. Ce qui se passe, c'est que j'utilise la méthode d'appel pour changer le contexte du doc alimentaire. Excellente méthode. Donc les impôts sur le péché. C' est la méthode point objet point appelle nouveau contexte. Donc, la nourriture Dockery appelle, mais faites-le dans la sortie dans le contexte de la barre. Et si je disais bar Dockery, appelez, euh, euh, nourriture que j'obtiendrais. Je suis de la nourriture. J' exécute Bardot Greek, mais je prends de la nourriture parce que je dis que Bardot est d'accord. Appelez dans le contexte de la nourriture afin qu'il arrive avec la méthode d'appel est que vous prenez temporairement une méthode et la déplacer dans le contexte d'un autre objet. Ce n'est pas littéralement ce qui se passe, mais c'est effectivement ce qui se passe. Donc quand je dis que la nourriture était d'accord, une barre d'appel exécutant cette méthode. Mais je le fais. Pensez qu'il appartient à cet objet. Et quand je dis Bardot Greek call foo, j'exécute un diplôme de bar, mais je le fais. Je pense qu'il appartient à la nourriture juste pour le moment. Donc si vous copiez cette ligne 20 ici, c'est en fait la ligne 18. Si j'ai rouvert ce fichier Donc ligne 18 et je cours que j'ai la même chose. Si j'exécute la nourriture point saluer, appliquer et bar je reçois je suis bar parce que j'ai changé le contexte de la nourriture. Acceptez de bloquer maintenant l'appel et la méthode d'application font exactement la même chose. La seule différence est de passer des arguments. Disons que l'accord alimentaire qui s'attendait à des arguments A et B et je veux passer ces Eh bien, si je voulais le faire avec appel, je passerais les arguments dans une liste séparée par des virgules. Et si je voulais le faire avec apply, j'ai passé les arguments comme un tableau. Donc, avec la nourriture convenu un appel. Je passe le contexte d'un nouveau contact. Nous avons juste barre virgule et puis tous mes arguments et avec la nourriture convenu qui s'appliquent. Je passe la barre, puis un tableau de tous les arguments. Mais dans les deux cas, les méthodes d'appel et d'application vous permettent de changer le contexte dans lequel une méthode est exécutée. 26. Chainage de méthode - Discussion: Donc, en JavaScript est un concept appelé chaînage de méthode. Ce n'est en fait pas spécifique le script Java. Vous trouverez que ce modèle dans un certain nombre de langues, mais c'est quelque chose qui est très bon à être conscient, et cela peut également vous aider à écrire du code un peu plus expressif. Donc, sur le côté gauche de la page, j'ai cet objet appelé APP, et cet objet APP a trois méthodes et il démarre et se met en place. On se fiche de ce qu'ils font. Faisons semblant qu'ils fassent quelque chose de magique et d'incroyable. Mais la chose principale est que nous avons un objet avec trois méthodes, et sur le côté droit de la page, j'exécute ces méthodes en disant point d'application dans l'application point start et app dot set up. Alors que tout a un sens parfait. Ça semble être une bonne et solide façon de faire. Mais que faire si, en plus du funk du, ces méthodes font ce qu'elles font ? Que se passe-t-il s'ils retournaient tous une valeur très spécifique ? Et s'ils retournaient tous ça ? Eh bien, nous savons que dans JavaScript l'acte ce mot-clé fait référence à l'objet auquel appartient une méthode Donc, dans chacun de ces cas sur le retour de l'APP, méthode unitaire renvoie l'application, la méthode start renvoie AP et un ensemble de méthode renvoie l'application. Donc, sur le côté droit, je pourrais changer la façon dont j'écris mon code. Je pourrais faire quelque chose comme ça où je dis point d'application en elle point de départ mis en place. Et la raison qui fonctionne est parce que chaque fois que j'exécute une de ces méthodes, il renvoie l'application qui me permet d'exécuter directement une autre méthode sur cet objet. Donc, quand je dis apt dedans, cela revient directement, ce qui me permet de dire point start, puis la méthode start renvoie l'application qui me permet dire dot set up Donc une autre façon de regarder cela serait penser à la connexion directe entre ceci et l'application. Vous savez, dans la méthode unitaire, je retourne ceci, ce qui signifie que je retourne l'application qui me permet d'appeler directement la méthode start. Et puis quand j'ai appelé une méthode de démarrage, je retourne ceci, ce qui me permet d'appeler la méthode de mise en place, et cela me permet de je pourrais même peut-être Shane une autre méthode ici et créé une méthode nourriture froide et puis, Euh, bar éthique et je suis Topaz éthique et juste que je pourrais changer toute la journée. Mais ce modèle, si vous regardez le code à droite, semble un peu différent de dire apt out, innit ? App dot start app qui a mis en place le code peut-être un peu plus expressif. Et si vous êtes vraiment créatif, vous pouvez écrire du code qui peut être même plus facile à gérer. Donc, si ce n'est pas obligatoire, que vous faites de la formation à la méthode. C' est simplement un modèle qui est bon d'être conscient, et cela pourrait être très utile à un moment donné. Voyons donc si nous pouvons obtenir une meilleure compréhension du chaînage des méthodes si nous regardons effectivement quelques exemples de code. 27. Chainage de méthode - Démonstration: dans le dossier Exemples, ouvrez le sous-dossier contextuel et regardez le fichier nommé Method Chaining. Maintenant, j'ai l'application entière, mais j'ai changé le code de façon spectaculaire. Um, où est tout à l'heure ? On a juste eu Ah genre de Jaco Rico juste mis en place d'une manière plus procédurale. Ici, j'ai créé un objet appelé APP, puis j'ai créé différentes méthodes appelées dedans et Start et Dom mis en place et etcetera. Donc, le code est beaucoup plus orienté objet. C' est un peu plus propre, facile à lire utilisateur à gérer, mais j'ai fait quelque chose ici que c'est un modèle que je veux juste discuter. Pour quelques minutes. Je fais quelque chose appelé Method Training, donc j'appelle la méthode de configuration Dom. La méthode bind, Reload page gestionnaire d'événements, la liaison,la méthode la liaison, du gestionnaire d'événements sélectionné par le lead et la méthode de l'événement d'achat des éléments utilisateur Taylor. Mais dans chaque cas, je ne dis pas app dot cette méthode comme vous vous attendiez. Je dis juste l'application dot dot dom mise en place dot achat rechargeable bla dot bond Blah Believable, euh point Bind. Donc, j'appelle app, mais alors j'appelle juste différentes méthodes sur l'application. Alors, comment est-ce que je peux sauter en utilisant l'application dot app dot apt à chaque fois ? Eh bien, jetons un oeil à chacune de ces méthodes. Regardons la méthode Dom mis en place ici. Donc Dom mis en place a une ligne intéressante. Il fait un tas de choses dont nous ne sommes pas vraiment inquiets en ce moment, mais ça renvoie ça Et si nous nous souvenons, quel est le script Java ? Ce mot clé fait référence à l'objet auquel appartient une méthode et la méthode de configuration Dom appartient à l'application. Les objets de cette méthode retourne ceci ou retourne l'application. Donc, quand j'exécute ce code ici à Londres 21 ici, je finis avec l'application afin que je puisse juste tourner autour et appeler la méthode du gestionnaire d'événements de rechargement page binds. Et puis quand cette méthode exécute l'achat du gestionnaire d'événements de page de rechargement, j'ai retourné ceci. Donc, depuis l'exécution de cette fonction renvoie l'application, je peux tourner autour et appeler l'achat de supprimer le gestionnaire d'événements sélectionné et ainsi de suite. Donc, si chaque méthode renvoie l'objet application, cela signifie que je peux faire demi-tour et appeler une autre méthode sur cet objet. Ceci est appelé chaînage de méthode et il ne change pas efficacement votre code en termes de ce que fait votre manteau. Mais il vous permet d'écrire du code qui peut être plus facile à lire et un peu plus expressif . Parce que si je quelqu'un d'autre a écrit ce code et je l'ai hérité, la première chose que je voudrais Seeiso ceci à la méthode a un certain nombre de cette application. Objet a un certain nombre de méthodes et je les appelle toutes ici. Et toutes ces méthodes ont renvoyé l'objet app, c'est sûr. n'y a aucun doute dans mon esprit parce que je sais que tu ne pouvais pas faire ça. Vous ne pouvez pas méthode Shane comme ceci si ces méthodes ne retournaient pas l'application, objet et la méthode chaînage est vraiment facile. C' est juste que vous avez juste besoin de retourner l'objet auquel cette méthode appartient de chacune des méthodes vous permettant de chaîner les méthodes d'une seule référence à un objet 28. « cela » vs $(this) (this): Prenons un moment pour discuter de la différence entre cela et cette requête Wrapped with Jay . Maintenant, si vous n'avez aucun intérêt pour Jake où vous pourriez vous sentir libre de sauter cette conférence, Mais je pense que la plupart des développeurs Front et Web que j'ai travaillé avec J Query dans une certaine mesure et probablement travailler sur une base régulière. Cela vaut vraiment la peine de prendre une minute pour discuter de la différence entre ces deux Rios assis et certains des problèmes que vous pouvez rencontrer dans votre dossier Exemples. Ouvrez le sous-dossier Context, puis ouvrez le fichier de contexte celui-ci par rapport à celui-ci. Donc ici, je suis en train d'itérer sur chacun des vendeurs donnent des éléments ou les éléments de liste dans une nouvelle génération de chaque méthode. Je crée un gestionnaire d'événements click et dans le clic d'un gestionnaire, je dis que ce point se cache. Alors allons d'abord exécuter le code et voir ce que nous obtenons. Alors allez à montrer des exemples et un contexte. Cette ruée est celle-là. Donc maintenant, j'ai exécuté le code et cliquez sur le bouton de sélection et j'obtiens une erreur ce point Hide n'est pas une fonction. Bon, quel est le problème ? On verra si on peut le comprendre. Donc, la première chose que je veux faire est que je veux désactiver ou commenter le numéro cinq. Puisqu' il s'agit de lancer une erreur, ça ne va pas vraiment nous aider. Et puis je vais coller dans les instructions dir de la console. Le 1er, c'est que je suis en train d'inspecter le script de travail. Ce mot-clé dans le 2ème 1 est que je m'attends au script de travail, ce mot-clé enveloppé avec Jay Query. Alors sauvegardons ce fichier, puis nous allons juste rafraîchir la page et cliquer sur le bouton de sélection, et je suppose que vous console leurs déclarations. Regardons le 1er 1 Le 1er 1 est un élément dom. C' est un élément Dom JavaScript brut, et le 2ème 1 est un élément dom enveloppé de Jake fatigué. Donc, la différence est le 2ème 1 est le 1er 1 enveloppé de Jake Weary Hope qui a du sens. Mais pour le 1er 1, nous allons faire défiler un peu vers le bas et nous pouvons voir qu'il y a une propriété de style , et cette propriété de style a une propriété d'affichage sur l'affichage. C' est chante, mis à une corde vide. Ok, donc on va en parler dans une seconde. Donc, la réponse courte est que c'est l'élément Dom brut qui est actuellement itéré sur qui était dans ce cas a été cliqué. Où est ce Représente cet élément dom enveloppé avec Jake Weary. C' est comme se prendre et se mettre dans un manteau. C' est toujours toi, mais tu es enveloppé d'un manteau. , Alors regardons le, hum si vous regardez le dossier, hum si vous regardez le dossier, contactez ceci contre ceci à ce que je vais faire est de dire que ce point de style qui n'est pas égal aucun. Donc, si vous exécutez le contexte par rapport à cela et puis cliquez sur le bouton de sélection, vous pouvez voir le bouton disparaît. Et si je clique sur d'autres boutons, ils disparaissent. Pourquoi c'est ça ? Eh bien, si vous vous souvenez que nous avons fait le consul dot dir ceci Nous avons vu que ce mot-clé go jobs, qui est un élément Dom, a une propriété de style et une propriété de style a une propriété d'affichage, et nous sommes juste en train de le définir sur les religieuses. Le point que je fais ici est juste pour illustrer que le JavaScript ce mot-clé à l'intérieur de ce gestionnaire d'événements click est juste un élément dom brut. Ça n'a rien à voir avec Jay Query. Si on va contacter ça par rapport à ces trois euh, quelque chose d'un peu différent, c'est qu'on dit ça enveloppé avec Jake. Affichage de point fatigué est égal à religieuses Voyons comment cela fonctionne. Donc, si nous allons montrer le contexte des exemples de code, c'est par rapport à trois, puis nous cliquons sur le bouton de sélection. Nous obtenons une erreur ne peut pas définir l'affichage de la propriété de undefined. Et c'est parce que ce rappeur Jay Query n'a pas de propriété de style. Rappelez-vous, c'est le JavaScript, ce mot-clé ou c'est l'élément dom brut, mais il est enveloppé avec J. Crew, donc il a différentes propriétés et méthodes. Si vous ouvrez le contexte, c'est quatre. La différence, c'est que nous voyons ce point haut. Donc, si vous exécutez le contexte, ce Versace est quatre, puis sélectionnez le bouton. Il disparaît et il n'y a pas d'erreur. Et c'est parce que Jake Weary ou ce rapide Jake Weary, a une méthode de masquage. Donc, la principale chose à garder à l'esprit est que le JavaScript, ce mot-clé par lui-même, incliné à l'intérieur d'un gestionnaire d'événements click est juste l'élément brut, euh, euh, javascript dom. Et il a un certain ensemble de propriétés et de méthodes. Où est ce radeau avec Jay Query ? C' est un objet de requête J et il prend fondamentalement cet objet et l'enveloppe à l'intérieur de J Query, ce qui lui donne différentes propriétés et méthodes. Donc, vous pourriez penser, Eh bien, j'utilise une requête et j'utilise ce rappeur Jay Query, et c'est bon. Il y a des situations où Jake, nous rendrons ça. Et vous pensez que ce sera ce rap avec Jake fatigué comme quand vous créez un plug in J Coury . Il y a des scénarios difficiles, donc 99,9 % du temps, vous aurez affaire à ce brouillon avec Jay Query, et tout va bien. Mais deux choses. Un. C' est vraiment bon de comprendre la différence et à ça va arriver. Il va y avoir un moment où vous pensez que vous obtenez votre un et que vous obtenez l' autre ou vous voulez convertir l'un à l'autre, et tout va bien. Mais vous ne pouvez emprunter cette route que si vous comprenez vraiment la dent. La différence entre ces deux choses 29. Un peu plus sur le dépannage: plus tôt, nous avons discuté de l'importance de comprendre une portée et un contexte de routine différents en ce qui concerne le dépannage. Alors maintenant que nous avons une compréhension vraiment solide de la différence entre les deux, appliquons cette connaissance et quelques exemples de code et voyons comment cela peut nous aider à résoudre les problèmes . 30. Pain d'un problème de portée: dans le dossier Exemples. Ouvrez le sous-dossier de dépannage et regardons un exemple de dépannage. Donc ici, je vais répéter sur tous ces vendeurs des articles de liste, et je le fais en quelque sorte de sorte que je suis une sorte de vieille école et que je suis en train de créer une variable d'oeil et de définir une référence à la vente. Les éléments de liste sur la liste des vendeurs dom éléments en utilisant le document un sélecteur de requête tous. Ce n'est pas particulièrement chic, mais il y a une raison pour laquelle je le fais de cette façon. J' ai donc créé une boucle quatre, qui est encore une sorte de façon vraiment ancienne d'itérer quelque chose. Et à l'intérieur de cette boucle quatre, je cherche la référence du créateur au vendeur. Donc, je dis élément var égale les yeux de la personne de vente. Donc d'abord sera vendeur zéro vendeur, un vendeur à et ainsi de suite. Et puis je dis article, trouvez que les boutons de sélection trouveront un bouton de sélection pour cet article. Et puis j'ai configuré un gestionnaire d'événements click pour cet élément. Donc, à la fin de l'utilisateur clique sur ce bouton de sélection, je vais utiliser cette variable Ah, fine comme variable d'élément pour trouver le bouton de sélection et le montrer que je vais d'abord cacher le bouton de sélection a montré un bouton d'aversion. Basculer une classe sélectionnée. Alors voyons comment on s'en sort ici. Je vais montrer des exemples et aller à l'exemple de dépannage numéro un. OK, alors exécutez ce code. Et puis j'ai cliqué sur la première pièce. Bouton de sélection d'abord. Donc, le diesel il est supprime comme le bouton montre le sélectionné le bouton de sélection, et j'ai cliqué un loin. Mais je ne vois pas le bouton de sélection pour chaque élément de liste, et ce n'est pas basculer. La classe sélectionnée du côté gauche ne devient pas verte comme je m'y attendais, donc si nous zoomons un peu, je veux vous montrer quelque chose de vraiment étrange. C' est ce qui se passe ici. Comme je pouvais regarder ce qui se passe, je clique sur chaque bouton de sélection. Le dernier élément de liste est bascule. Il devient vert et pas vert, et ils ne sont pas verts. Donc, pour une raison quelconque, chaque fois que nous cliquons sur un bouton de sélection e ayant quelques problèmes, et le principal problème est que nous ne voyons pas le bouton de sélection pour cet élément, et le dernier élément de la liste est bascule ing, ce qui n'est pas ce que nous voulons. Nous voulons que je suis sur lequel nous cliquons pour être Tongling. Alors, il dort. Découvre le problème. Eh bien, la première question que nous devons vous poser est, est-ce un problème de portée ou un problème de contexte ? C' est toujours la question la plus importante. Donc je pense à des choses, et je pense, Eh bien, la chose funky qui se passait était le dernier élément de la liste était tout-petit, mais aucun des autres ne l'était, et je suis en train d'itérer sur une liste J'utilise une variable qui compte. J' ai commencé zéro et va jusqu'à la valeur des vendeurs cette longueur ou vous dit sans longueur moins un. Donc je pense que bien, si le dernier Si je suis incrémental et que seul le dernier élément est bascule, alors peut-être qu'il y a un problème avec moi et je suis, euh, est variable, c'est pour Bien sûr. Donc, quand je pense aux variables, je pense à la portée. Alors pourquoi ne pas faire ça ? Euh, mettons une console. Ah, déclaration du conseil, gestionnaire d'événements Insider Click sortait. Mettez la valeur de I. Donc, je pense que sur chaque clic, je devrais le montrer si je clique sur le premier élément de la liste, je devrais voir que vous savez que j'égale zéro. Si je clique sur la deuxième agence d'élément I égal à un Si je clique sur le neuvième élément à U C, j'égale neuf et ainsi de suite parce que ce gestionnaire d'événements rapide fait référence, Vous savez, j'ai créé cet objet d'article en référençant des vendeurs I Donc, nous certainement besoin de savoir que nous obtenons la valeur correcte de I pour chaque clic. Alors actualisons la page et voyons comment nous nous en sortons. Donc je vais commencer à cliquer et quand je clique sur chaque mettre et j'ai remarqué qu'il dit juste que j' égale 10 Chaque fois que j'égale 10 Je pense que je devrais dire que je égale zéro. J' en équivaut à un. J' égale deux égal à trois. Mais je suis juste égal à 10. Et il est en quelque sorte aligné avec ce que nous voyons, qui est le dernier élément de la liste est basculer pas l'élément était en train de cliquer avec le dernier élément de la liste. Donc je pense que je ne suis pas ce que nous pensons qu'il iss et il s'avère que c'est correct, parce que ce qui se passe est même si où nous itérons, je vais de 0 à 9. Le problème est que ce gestionnaire d'événements de clic pourrait se produire. Vous savez, l'adoration se produit en l'adoration se produit en microsecondes mais en millisecondes, mais le clic d'amélioration de l'utilisateur peut cliquer sur le bouton dans une minute ou 10 minutes ou 10 heures. microsecondes mais en millisecondes, mais le clic d'amélioration de l'utilisateur peut cliquer sur le bouton dans une minute ou 10 minutes ou 10 Mais cette référence orteil je ne les yeux pas encaissés avec chaque génération de cette liste. Ils se déclenchent tous, et quand vous commencez à cliquer sur les boutons, j'ai 10. Donc, nous avons besoin d'un moyen de protéger I ou de créer une version étendue de I. Donc, si nous revenons à la page et exécutons l'exemple de dépannage numéro deux et commencer à cliquer autour, je pense que vous remarquerez que tout fonctionne exactement comme prévu. Si vous cliquez sur un élément, le bouton de select affiche et tacos vert et le dernier élément ne se comporte de cette façon que si vous cliquez dessus. Donc nous avons le comportement que nous attendions. La question est pourquoi ? Eh bien, la raison qui est arrivé est parce que si vous regardez l'exemple de dépannage à ce que nous avons fait était nous avons utilisé une expression de fonction immédiatement invoquée ou une fonction immédiate ici, et nous obtenons cet élément, nous le passons dans la fonction, puis nous avons notre code. Donc, fondamentalement, notre code obtient une version à portée privée de cet élément, et cela préserve que lorsque l'élément, le bouton de sélection est effectivement cliqué. Nous avons I zero I I one I deux ou trois maintenant je ne veux pas vraiment trop entrer dans fonctions immédiates et les fermetures, parce que c'est certainement des choses sur lesquelles nous pourrions avoir toute une classe. Mais ce que je veux dire ici, c'est que nous nous sommes posé la question. Est-ce un problème de portée ou un problème de contexte ? Et à travers un peu de logique, nous avons déterminé qu'il s'agissait d'un problème de portée et cela nous a permis de découvrir rapidement où le problème se produisait et comment le résoudre, même si nous n'avions pas la réponse de la façon de résoudre c'est maintenant, au moins savoir quel est le problème. Ce n'était pas un problème de contexte. C' était un problème de portée. Et c'est la chose qui est vraiment importante dans ce cas, était de déterminer que pour cet exemple, était un problème de portée et il a été résolu en créant la version correctement étendue de I ou cet objet élément que nous voulions passer dans notre gestionnaire d'événements click 31. Panner un problème de contexte: ouvrez l'exemple de dépannage du fichier. Trois. Donc ici, j'ai créé un objet appelé App, et cet objet APP a deux propriétés. Le 1er 1 est une méthode appelée Show Delete sélectionné et qui montre juste que supprimer le bouton ah sélectionné . Et la deuxième méthode est appelée vendeurs Ally il aérateur. Et cela est utilisé comme un er itéré pour chaque vendeur allié. Donc en bas ici rappelant chaque méthode sur les vendeurs. Ally. Donc, cela arrive 10 fois, et chaque fois que cela arrive, nous passons l'application que les vendeurs il aérateurs. Donc ça va être exécuté 10 fois. Et quand il est exécuté chacun sur chaque exécution, nous sommes en train de mettre en place. Ah, cliquez sur gestionnaire d'événements pour ce bouton de sélection d'éléments de liste. allons donc exécuter l'exemple numéro trois et voir comment nous faisons sortir afin de dépanner exemple numéro trois. OK, donc on a lancé le code, puis je vais sélectionner un des boutons et j'ai une erreur. Ok, alors jetons un oeil à ce type d'erreur er, cela s'est arrêté. montré que le prospect sélectionné n'est pas une fonction. Eh bien, quelle est la première question que nous voulons nous poser quand nous dépannons ? On ne se demandera pas. Est-ce un problème de portée ? Ou est-ce un problème de contexte ? Et je dois dire que chaque fois que je vois le JavaScript, ce mot-clé dans une erreur, j'ai l'impression que c'est un cadeau mort. C' est très improbable. Ce n'est pas un problème de contexte, parce que je vois le mot ceci. Donc non, ça pourrait être une portée. Mais je vais aller avec le contexte sur celui-ci parce que je vois que ce mot-clé Donc, euh, euh, concerne par où commencer, je pense que je vais juste copier ce code. Et quand j'irai à notre code, je ne chercherai pas exactement ce morceau de code et de voir où ça nous mène, et ça nous prend la ligne d'orteil 22. Donc je pense que c'est là que notre problème commence au moins là. Alors pourquoi ne pas commenter cette ligne de code, empêcher le problème de se produire, et alors ce que je vais faire, c'est que je penserai bien, si le problème est, ils se sont arrêtés. Afficher la suppression sélectionnée. On doit en savoir plus à ce sujet. Qu' est-ce que c'est ? En ligne 22. Eh bien, je vais mettre une saleté de consul ici, et on peut inspecter ça juste pour comprendre. Est-ce vraiment ce que nous pensons qu'il ISS Et rappelez-vous, quand nous voyons le mot-clé ce que nous pensons contexte, ainsi est le contexte. Ce que nous pensons qu'il est en ligne. 22. Alors enregistrez cela et revenons en arrière et actualisons la page, puis cliquez sur le bouton de sélection. Et je vois quelque chose ici dans la console, etc. Mais pas sélectionner. Donc, cela me ressemble à un élément dom. Je veux dire, je vois des propriétés comme les enfants et les enfants et la liste des classes et, euh, cette propriété de style. Donc c'est un domino lui. En fait, c'est l'élément qui vient d'être cliqué. Donc, cela signifie que je pense en ligne 22 que ce contexte est cet objet d'application. Et je pourrais juste appeler cette tête d'épaule de cascades sélectionnée. Mais il s'avère que ce 22 en ligne se résout en fait au bouton qui vient d'être cliqué . Ce bouton ici et cela a un sens parfait car il s'agit du gestionnaire d'événements click , et le gestionnaire d'événements click est exécuté dans le contexte du moment sur lequel on a cliqué. Il s'avère donc que ce n'est pas ce que nous avons supposé être. Le contexte est différent de ce que nous pensions. On l'a découvert en faisant de la saleté du conseil, donc on doit réparer ça. Jetons donc un coup d'oeil à l'exemple de dépannage. Numéro quatre. Tout d'abord, lançons et voyons comment cela fonctionne. Donc, si vous descendez l'exemple de dépannage, Numéro quatre exécutez ce code et nous cliquons sur sélectionner. Et dans chaque cas, lorsque nous cliquons sur le bouton de sélection, le bouton de sélection disparaît. De select montre et l'élément il les classes sélectionnées bascule. Tout fonctionne comme on s'y attendait. Voyons pourquoi. Que s' est-il passé sur mon numéro ? Activé dans le dépannage ? Exemple Fours en ligne 22. Au lieu de dire que cette pensée show delete selected, nous avons dit APP ne devrait pas montrer delete selected. Et la raison qui fonctionne est parce que APP est une variable globale sur à cause de lexical. portée de cette fonction est la fonction de rappel a accès aux variables définies en dehors de celle-ci. Il peut voir à l'extérieur de lui-même. Donc, nous faisons référence à l'application au lieu de cela et nous disons l'application qui montre supprimer sélectionné et cela fonctionne bien. Maintenant, une partie de la façon dont nous réparons ceci est si vous vous souvenez d'un exemple. Numéro trois. Nous venons de passer une application orteil de référence que les vendeurs il aérateur à chaque itération de vendeurs allient. Mais ici exemple avant l'une des choses que nous avons également fait est que nous passons une fonction de rappel ici et ensuite nous exécutons à ce Salespeople itéré. Et c'est aussi une façon d'aider à résoudre le problème. Parce que maintenant l'application que les vendeurs, il aérateur n'est pas en cours d'exécution dans le contexte du bouton est juste en cours d'exécution. Alors et quel genre de sons bizarres ? Je ne veux pas m'en mêler trop. Mais le point que je fais ici est que nous changeons le contexte dans lequel l'application que les vendeurs, il aérateur est exécuté. Et nous simplement référencer simplement la variable globale de l'application apparaissent Teoh résoudre notre problème. Maintenant, si vous regardez l'exemple en cinq, il y a une autre façon de le faire qui est ? Nous définissons une référence à cela en créant une variable qui m'appelle et ici, à la ligne 21, nous m'avons référencé. Donc, ce qui se passe est une fois de plus, nous avons changé le contexte dans lequel l'application que les vendeurs qu'il aérateurs en cours d'exécution est en cours d'exécution dans le contexte de l'application. Donc, cela signifie ici nous avons référence à la variable app um, mais nous pouvons le faire référence par ceci, exemple, de je devais à une déclaration de conseil Durst apparaissent sur cette ligne sur la ligne 17. Nous pouvons voir ce que c'est sur chaque exécution de dysfonctionnement. Donc, je vais passer à l'exemple de dépannage. Numéro cinq. Exécutez cela et j'obtiens 10 objets de ma console et chaque objet est identique. C' est l'objet de l'application. Il doit montrer la méthode sélectionnée de suppression et la méthode itérée des vendeurs. Ils sont le même objet à chaque fois. Et la raison pour laquelle nous voyons cela est parce que lorsque nous exécutons leur temps, chaque fois que sa fonction est exécutée, ce 17 en ligne se résout à l'application. Et c'est bien. Nous aimons cela parce qu'alors nous pouvons définir une référence à ce qui est moi créer une variable. Et cette fonction peut voir en dehors de elle-même à cause de la portée lexicale. Donc, nous pouvons dire que nous avons montré supprimer sélectionné. Maintenant, c'est un peu hacky. Et si vous avez découvert ECC rescript 2015, vous savez peut-être maintenant que les fonctions de flèche de graisse essentiellement cherché aide à résoudre ce problème. Hum, donc c'est définitivement un sujet pour toute une classe. On peut entrer dans le feu des fonctions. Mais pour l'instant, le point que j'essaie de faire, c'est que nous voulons avoir des ennuis pour résoudre nos problèmes. Way voulu. Déterminez d'abord s'il s'agit d'un problème de portée ou d'un problème de contexte. Et puis une fois que nous connaîtrons la réponse à cette question, nous pouvons en quelque sorte explorer et utiliser différentes techniques pour résoudre le problème. Mais le fait de savoir quel genre de problème il s'agit fait vraiment une grande différence savoir comment allez-vous aller pour savoir où le problème a commencé et comment le résoudre  ? 32. Projet de classe: avant de partir, j'aimerais prendre un moment pour parler de notre projet de classe. Ce projet de classe se décline en deux parties. La première partie est de construire dynamiquement l'équipe de vente Acme Travel, et la deuxième partie est de prendre en compte l'exemple. Code de page Web. Parlons de la première partie. D' abord, construire la loi. Nous voyageons l'équipe de vente dynamiquement. Donc, en ce moment, l'exemple de page Web que vous avez vu pour la dernière heure est HTML pour l' équipe Travel Acme Travel Sales que HTML est codé en dur index théâtral point html File a toujours marché que vous voyez sur le côté gauche, et que est rendu dans l'U I lorsque la page se charge. Je ne suis pas trop ravi de cette approche parce que si nous voulions apporter quelques changements, cela impliquerait de creuser dans le HTML. Et je pense que c'est un peu désordonné pour une application de script d'emploi. J' aimerais, vous savez, contrôler tout avec le script Java. Donc, ce que je cherche pour vous de faire est de couper cette approche et de convertir les informations de l'équipe de vente de voyage acné à Jason Data, puis exécuter ce Jason Data à travers un code JavaScript et votre JavaScript pourrait alors remplir et sur la liste de commandes, puis affiche une liste non ordonnée dans la page Web. Cela peut sembler un peu un défi, mais je pense que nous avons passé beaucoup de temps à discuter de la différence entre la portée en contexte et JavaScript, et vous pouvez tirer parti de cette connaissance pour accomplir cette tâche. Je pense que vous avez les outils dont vous avez besoin pour le faire. La deuxième partie de notre projet de classe consiste à refactoriser l'exemple de code de page Web. Ce que je veux dire spécifiquement, c'est que je vous cherche pour éliminer le code répétitif, supprimer les valeurs codées en dur dans le script Java, puis couper les fonctions gonflées. Donc, si on saute dans un code, je peux vous montrer exactement ce que j'obtiens ici avec les deux parties du projet de classe, Jetez un oeil à l'index de fichier cette équipe d'âge. Maintenant, tout en bas de ce fichier, vous verrez une référence à l'application point Js. Regardons dans Js slash ap dot Js Donc dans Jazz app dot Js C'est le code que nous n'avons pas discuté de ce code dans cette classe, mais c'est le code qui fonctionne dans les coulisses qui construit juste une sorte de cette application . Il fournit principalement les caractéristiques. Il vous permet de charger le revêtement, exécuter le code, exemple directement à partir de la page. C' est surtout ça. Um, mais ce que je fais, c'est que je cours à ce début dans une application qui commence j'appelle des exemples de téléchargement apt. Jason. Tellement apte. Télécharger des exemples. Jason, j'appelle Ajax à ce dossier. Alors copions ceci et regardons le fichier. Et si je découpe le reste et que je vais ici, tu peux voir que c'est le vrai Jason que je reçois. Donc ce Jason représente ce que vous voyez dans le Dom ici. Tous ces exemples sont la liste qui permet à celui-ci de commander une liste d'exemples. Les liens de code sont générés dynamiquement à la volée. Et j'utilise ah, Js exemples point Jason. Donc, ce code que vous voyez ici est exactement ce que vous voyez ici. Ok, donc ce qui se passe, est que je charge ce Jason. Et puis quand cela réussit, cette méthode est appelée, et j'ai itéré les exemples d'exemples dans le Jason et pour chaque exemple, je construis une liste que je suis, et je peux le prouver en dépendant peut-être juste une chaîne ici où je dis exemple nom de point . Et si nous actualisons la page, vous remarquerez que je reçois le mot holo après chaque élément ici. Donc, euh, le point ici est que je suis juste ceci vous montre juste que c'est là que cette liste d' exemples de liens est créée. Et comme je crée chaque élément de la liste que je vous ai ajouté l point exemple Sophie, nous inspectons la page, Vous verrez qu'il y a un ONU ordonné une liste avec les exemples de classe. Ce sont des exemples ul dot ici, donc je suis en train de le construire ici. Donc votre projet, votre premier projet, serait de faire exactement la même chose avec la liste des vendeurs. Donc, ce balisage, n'est-ce pas ? Euh, ici dans la page, tous ces vendeurs que vous voyez qui sont en fait codés en dur dans le HTML. Si vous regardez l'index, que HTML, c'est votre liste de vendeurs commence ici en ligne. 29. Donc, la personne de vente zéro dit des avertissements de personne et ainsi de suite. Mais ce sont les vendeurs. Voici un vendeur en particulier, Bobby Carney. Et si je regarde la première personne, c'est Bobby Carney. Donc ton projet serait de prendre ce marché, qui est vraiment, euh, c'est désordonné, non ? Parce que si je veux changer la façon dont ces éléments de liste sont construits, je dois changer chacune de ces fois de liste dans le balisage. Donc le balisage codé dur n'est pas vraiment bon dans ce genre de situations. C' est mieux. Il est généralement préférable de le faire dynamiquement, sorte que vous avez plus de contrôle. Voyez donc si vous pouvez trouver un moyen d'adopter exactement la même approche. Prenez ces éléments de liste, les données et ces éléments de liste d'abord, mettez-les dans Jason. Voulez-vous convertir ces informations ici pour chaque vendeur ? Vous voulez convertir cette information en Jason qui est formatée d'une manière similaire à celle-ci. Et puis vous voulez appeler cette chasse et comme nous le faisons ici et quand vous appelez ce Jason avec Ajax, alors vous voulez construire les alliés pour chaque vendeur, et vous voulez le mettre dans la page pour commencer par prendre celui-là. J' ai commandé une liste et tu vas la vider. Qui aime ça. Si je l'enregistre maintenant, rechargez la page. On n'a pas de vendeurs alors on a coupé les lèvres. Donc, vous voulez couper cette liste et vous voulez prendre ceci afin de lister cette marque et vous voulez convertir cela en Jason et ensuite vous voulez la tirer dans la page, construite dynamiquement en faisant cela. Cela ne devrait pas être trop difficile, mais cela vous demandera de tirer parti de la compréhension hors portée et du contexte que vous avez acquis dans cette classe pour construire le groupe d'emplois qui crée dynamiquement cette liste de vendeurs dans votre Dossier Exemples, ouvrez le contact un dossier, puis sélectionnez une méthode de fichier Chaining Now, Comme je l'ai mentionné précédemment, ce , euh, fichier contient une version de facteur re de tout notre code que nous avons examiné dans cette classe, et c'est un peu plus clair et, à mon avis, plus facile à lire. Mais j'utilise ce fichier particulier car il contient le code d'application complet. Donc, si nous exécutons ce fichier dans cet exemple dans la formation de la méthode de page, cela nous permet de tout faire. Nous pouvons sélectionner un vendeur et sélectionner un vendeur, sélectionner plusieurs vendeurs, affaiblir, supprimer chaque vendeur individuellement, ou nous pouvons sélectionner plusieurs vendeurs et supprimer ceux qui sont sélectionnés. Et lorsque nous supprimons des vendeurs, le nombre total de l'équipe commerciale diminue. Et à tout moment, nous pouvons recharger la page. Donc, mais il y a deux choses dans ce code qui, je pense, pourrait vraiment utiliser pour améliorer. Tout d'abord, il y a beaucoup de cordes enduites. Par exemple, nous avons une personne de vente allié et le total des gens de vente conteneur. Je veux dire, ce ne sont que des ficelles. Et si je veux changer cette référence si je veux changer les vendeurs I.D , eh bien, eh bien, combien de fois cela apparaît-il dans mon code ? Il apparaît cinq fois dans mon code. Donc si j'étais orteil venir ici et l'idiot et peut-être dans notre balisage, on a changé, vous savez, les vendeurs à l'équipe Eh bien, alors je dois savoir combien de fois dans mes ventes de code, les vendeurs se produit et je dois changer chacun d'entre eux en équipe, et c'est vraiment fastidieux. Et nous ne voulons pas faire ça. J' aimerais qu'on puisse faire quelque chose comme ça. Change ça ici et boum. Il change chaque endroit ou tous ceux qui font référence à cet élément. juste que ça obtient cette eso qu'on ne veut pas. On ne veut pas avoir ces valeurs de chaîne codées en dur ici. Nous voulons trouver une meilleure façon de le faire. Et la deuxième chose est que nous avons aussi du code répété quand il s'agit de, um, um, nous avons des fonctions qui sont vraiment grandes qui ont du code répété tels que des éléments utilisateur de liaison, gestionnaires d' événements. Eh bien, ça va de la ligne 74 de la ligne de remorquage, une vingtaine. C' est presque 50 lignes de code pour une fonction, ce qui est un peu beaucoup. Et beaucoup de cela est que nous voyons l'automne, l' élément qui trouve quelque chose sur l'élément clic qui trouve quelque chose d'autre sur le clic et l'élément qui trouve quelque chose d'autre sur le clic. Donc je pense que chacun d'entre eux pourrait être divisé en une sous-fonction se, et ensuite celle-ci pourrait être divisée en une sous-fonction, et ensuite celle-ci pourrait être divisée en une sous-fonction. Et dans chaque cas, toutes ces fonctions ont certainement besoin d'arguments. Donc, vous allez devoir, ah, trouver un moyen de passer chaque fonction, les arguments qu'il doit faire ce qu'il doit faire. Mais c'est tellement plus facile à lire. Je veux dire, cette liaison des éléments utilisateur, méthode des gestionnaires d' événements a maintenant 14 lignes de code par opposition à 50. C' est une grande différence, c'est aussi plus facile à lire. Et si nous décidons que nous voulions changer la façon dont le code est composé, nous pourrions simplement le faire. Mais c'est tellement plus facile à regarder et à gérer. Donc, les deux choses que vous voulez faire dans votre deuxième projet est de supprimer tous les libéraux de chaîne codée en dur dans notre code. Vous pouvez les définir pour être des variables ou des propriétés d'un objet qui dépend entièrement de vous. Il y a plus d'une façon d'y parvenir, et nous cherchions est la façon dont vous décidez que vous voulez Toe re re facteur le code pour se débarrasser de tous ces libéraux de chaînes codées en dur. Et la deuxième chose est, est que nous voulons re prendre en compte toutes les grandes fonctions telles que celle-ci, sorte que le code à l'intérieur de est divisé en fonctions plus petites. Mais vous allez certainement devoir tirer parti de votre nouvelle compréhension de votre nouvelle compréhension profonde de la différence entre la portée dans le contexte afin de fournir à ces fonctions les arguments dont elles ont besoin pour faire le travail que vous leur demandez de dio Good avec le projet de classe. J' ai vraiment hâte de voir ce que vous venez avec. Si vous avez des questions ou si vous avez l'impression d'être coincé quelque part, n' oubliez pas de nous contacter. Et je vous suivrai et je ferai tout ce que je peux faire pour vous aider. 33. Merci !: merci de vous inscrire à cette classe où nous avons appris la différence avec les équipes, portée et le contexte en JavaScript. J' espère que cela vous a été utile. Rejoignez-moi au blogueur dot kevin Chisholm dot com, où vous trouverez des tonnes d'articles et éditoriaux sur de nombreux sujets différents développeur Web . Merci encore de rouler, et je vous verrai la prochaine fois que nous le devons.