Mastering JavaScript Section 1 : concepts critiques

1. Introduction aux concepts critiques de JavaScript: Bienvenue dans cette section sur les concepts critiques en JavaScript. Dans cette section, nous allons aborder ce que je considère comme des concepts critiques concernant le langage et le fonctionnement de JavaScript. Certains d'entre vous voudront peut-être passer à deux sections qui se concentrent davantage sur l' aspect linguistique de JavaScript. Mais j'exhorte les patients, ces concepts sont essentiels. Maintenant, alors que vous commencez dans cette section, certains concepts peuvent sembler basiques parce qu'ils le sont. Mais même si vous travaillez avec JavaScript depuis un certain temps, je suis sûr que vous allez apprendre quelque chose. Alors tenez-vous-en à cela. Maintenant, pourquoi ces concepts sont-ils essentiels ? Pourquoi est-il important de comprendre le fonctionnement de la langue ? Parce qu'un élément essentiel de la compréhension de tout bon développeur est de savoir pourquoi vous faites certaines choses. Le y permet d'ajuster les modèles ou le code en fonction de vos besoins spécifiques. Ils facilitent la pensée critique. Et ces concepts expliquent pourquoi nous faisons beaucoup de choses en JavaScript, dont nous parlerons plus tard. En fait, dans les sections suivantes, vous souhaiterez peut-être revenir et revenir sur certains de ces sujets, tels que la boucle d'événements lorsqu'il s'agit de code asynchrone. Il est donc important de passer un peu de temps à parler du moteur JavaScript, la pile d'appels, du tas de mémoire. Le fait que JavaScript soit un thread unique, l'environnement d'exécution et la boucle d'événements. Alors allons-y. 2. L'environnement d'exécution du JavaScript: Pour que nous puissions utiliser JavaScript, avons besoin d'un environnement dans lequel il s'exécutera. Maintenant, JavaScript ne nécessite pas beaucoup d'outils pour écrire du code. En fait, nous pouvons simplement ouvrir un simple éditeur de texte et commencer à écrire du JavaScript. Mais pour que ce code ait du sens ou fasse quoi que ce soit, nous devons le rendre disponible dans un environnement d'exécution JavaScript. Il existe désormais deux environnements d'exécution principaux qui constituent la majorité de l'utilisation de JavaScript le navigateur et NodeJS. Nous pouvons donc exécuter JavaScript et effectuer certaines tâches à l'aide du navigateur ou du nœud. Ces deux environnements ne sont pas les seuls que nous pouvons utiliser, mais ils sont les plus importants et les plus répandus. Maintenant, il existe des similitudes entre le nœud et les navigateurs, puis il y a quelques différences. Parlons-en brièvement. abord, un navigateur et un nœud sont tous deux simplement une application. Dans tous les cas, ils doivent être installés sur votre ordinateur pour pouvoir les utiliser. Nous avons installé Node plus tôt dans le cours. Lorsque je démarre un navigateur, en l'occurrence Chrome, je lance cette application depuis mon ordinateur. Maintenant, il en va de même pour le nœud. Nous l'utilisons simplement différemment. Nous devons l'utiliser depuis le terminal ou l'invite de commande. Et nous n' utilisons généralement pas d'interface graphique. Par exemple, je peux accéder au nœud en le tapant. Et maintenant, j'ai une invite de nœud. C'est ainsi que j'utilise node. Une autre similitude est que ces applications, c'est-à-dire à la fois le navigateur et le nœud, sont écrites dans le même langage informatique. Maintenant, dans le cas de Chrome et de la plupart des navigateurs, le cœur de cette application est écrit en C plus plus. L'interface graphique est généralement un langage différent, mais le noyau est C plus plus plus. Maintenant, le noyau de NodeJS est également écrit en C plus plus avec du code JavaScript qui agit comme un wrapper pour certaines des commandes que nous utilisons. Le code. Ces deux applications sont écrites dans le navigateur et le nœud est très similaire, mais ce n'est pas ce qui nous permet d' utiliser JavaScript dans chacun de ces environnements. Pour qu'un environnement d'exécution JavaScript autorise l'utilisation de JavaScript, il a besoin de quelque chose pour interpréter le langage, lire le code JavaScript et le traduire pour l'ordinateur. Cet élément très important s'appelle le moteur JavaScript. Un navigateur et un nœud nécessitent tous deux un moteur JavaScript pour utiliser JavaScript. Désormais, le moteur JavaScript n'est qu'une partie de l' ensemble de l'application. Il y a beaucoup d' autres éléments dans un navigateur et il y a beaucoup d'autres éléments à nœud. Jetons un coup d' œil à un diagramme qui illustre l' environnement d'exécution de notre navigateur. Ce sont toutes les pièces dont nous allons parler car nous interagissons avec elles lorsque nous utilisons JavaScript dans le navigateur. Donc, si tout cela représente le navigateur et ce qu'il contient, nous pouvons voir qu'il y a des éléments qui ne font pas partie du moteur JavaScript, qui est représenté ici. Nous faisons parfois des choses en JavaScript qui utilisent des parties de l'application du navigateur qui ne partie du moteur JavaScript. Maintenant, ces autres parties ou éléments sont quelques-unes des choses qui sont différentes entre un navigateur et celles connues. Par exemple, dans un navigateur, nous interagissons avec le DOM, largement représenté ici dans les API Web. Eh bien, ce n'est pas quelque chose que nous faisons dans Node. Aucun DOM ne fait partie du nœud. Cependant, la connaissance permet d' effectuer d'autres types de tâches. Tâches requises sur un serveur, telles que l'écriture d'un fichier sur un disque dur ou le démarrage d'un serveur. Ce sont des choses que nous ne pouvons pas faire dans un navigateur. Il y a donc quelques différences. Jetons un coup d'œil à une autre différence très rapidement. Donc, ici, dans un navigateur, si j'ouvre la console, je peux afficher la fenêtre. Cela affiche l'objet de la fenêtre. Il s'agit de l'environnement global dans lequel nous écrivons du code. Lorsque nous écrivons, JavaScript se trouve à l'intérieur de la fenêtre. Et il y a beaucoup de choses associées à la fenêtre, que nous pouvons utiliser. Maintenant, le nœud n'a pas de fenêtre. Si nous tapons fenêtre ici, référence non capturée, notre fenêtre n'est pas définie. Cependant, nous pouvons taper global. Et nous obtenons des informations sur le monde. Et ce serait l'équivalent de Window côté navigateur. Maintenant, bien sûr, il va y avoir des similitudes. Par exemple, vous pouvez voir setTimeout ici dans global. Settimeout est également disponible dans le navigateur. Vous pouvez voir que ce n'est pas dans le moteur JavaScript. Cela fait en fait partie de l'API Web. Même chose avec Node. Il ne fait pas partie du moteur JavaScript, mais nous y avons accès. Et nous pouvons faire quelque chose comme console.log ici. Et tout comme nous pouvons le faire dans un navigateur. Maintenant, dans les prochains sujets, nous allons parler de ces différentes parties d'un navigateur, car elles sont essentielles à comprendre. Pour écrire efficacement, JavaScript. Node comporte également des parties supplémentaires, mais nous nous concentrerons principalement sur le navigateur. abord, nous allons parler du moteur JavaScript. 3. Comprendre le moteur JavaScript: En termes simples, le moteur JavaScript est un programme qui exécute du code JavaScript. Donc, en regardant notre diagramme, si nous avons du code JavaScript, le moteur JavaScript qui est en charge. C'est la seule pièce qui sait quoi faire avec le code. Cela le traduit en quelque chose que l' ordinateur peut comprendre. À l'origine, les moteurs JavaScript étaient des interprètes, ce qui signifie qu'ils traitaient le code JavaScript ligne par ligne, convertissaient en bytecode pour qu'il puisse s'exécuter. Les interprètes sont fermés pour commencer à exécuter le code, ce qui était nécessaire dans l'environnement du navigateur. Mais ils peuvent être globalement plus lents par rapport à la compilation du code. code compilé convertit le programme en code machine afin qu' il fonctionne de manière optimisée. Les derniers moteurs JavaScript sont beaucoup plus optimisés. Ils utilisent à la fois un interpréteur et juste à temps, compilation ou un compilateur JIT pour optimiser le code. Cela permet de tirer le meilleur parti des deux mondes. Sa compilation prend du froid qui peut être optimisé et la compile. Par exemple, si un morceau de code s'exécute beaucoup, il peut être compilé en code machine. Ensuite, lorsque ce morceau de code s'exécute, il est optimisé et donc plus rapide. Maintenant, il existe un certain nombre de moteurs JavaScript. Celui qui est probablement le plus connu est le moteur V8. Il s'agit du moteur utilisé dans le navigateur Chrome et également dans Node. Ce moteur a été écrit par Google pour Chrome en utilisant C plus plus. Et il est open source. C'est probablement le moteur le plus connu car lors de sa construction, il a amélioré la vitesse des moteurs JavaScript existants. Google utilisait JavaScript pour faire des choses assez étonnantes à cette époque. Pensez aux différentes applications Google écrites avec JavaScript. Quoi qu'il en soit, ils voulaient qu'il soit plus performant. Ils ont donc écrit le moteur V8 pour accomplir exactement cela. D'autres moteurs JavaScript ont emboîté le pas afin rendre leurs moteurs plus performants également. Cette amélioration des performances est importante pour être conscient de l'idée d' utiliser un compilateur JIT avec un interpréteur pour aider à optimiser le code. La raison pour laquelle c'est important parce que nous parlons d'écrire du code de certaines manières pour le rendre plus performant ou éviter des éléments dans notre code qui pourraient le rendre moins performant. Cela tient souvent à la façon dont le moteur JavaScript gère le code et est capable de l'optimiser. Maintenant, voici quelques autres moteurs JavaScript que vous avez peut-être rencontrés. Nous avons déjà mentionné que V8 était open source, développé par Google. Il est utilisé dans Chrome et NodeJS. Singe-araignée. C'était le premier moteur JavaScript, et il est aujourd'hui utilisé dans Firefox. Et d'ailleurs, le premier moteur JavaScript a été écrit par Brendan Eich lorsqu'il a inventé le JavaScript, et comme le raconte l'histoire, il l' a fait en dix jours. Maintenant, le noyau de JavaScript est également open source et a été développé par Apple pour Safari. C'est donc le moteur qu'utilise Safari. Un autre élément que nous devrions probablement mentionner est le chakra. Et ceci est utilisé dans Microsoft Edge. Donc, le moteur JavaScript de Microsoft. Maintenant, avec tous ces différents moteurs JavaScript dans différents navigateurs, comment savons-nous que le code JavaScript que nous écrivons fonctionnera de la même manière dans chaque navigateur ? Au début de l'histoire de JavaScript, c'était un réel problème. Il y avait des différences. À cette époque. Nous avons passé beaucoup de temps à nous inquiéter des différences entre les navigateurs. Des bibliothèques comme jQuery aident à résoudre ce problème et sont devenues très populaires à cause de cela. Maintenant, en raison de ces différences, il fallait une norme et c'est là que le script Acme entre en jeu. Il s'agit d'une norme que JavaScript suit. Un script AGMA est une spécification que tous les moteurs JavaScript suivent désormais. Cela permet plusieurs implémentations indépendantes, mais cela garantit que notre code fonctionne de la même manière. Ainsi, lorsque des modifications sont apportées à la norme de script, les Indiens doivent être mis à jour pour prendre en charge ces modifications. Certaines mises à jour sont plus rapides que d'autres. Et c'est pourquoi nous avons des sites comme celui-ci. Puis-je utiliser le site .com qui nous indique quels navigateurs prennent en charge certaines implémentations ? Nous pouvons donc voir l'historique des différents navigateurs et la date à laquelle ils ont commencé à prendre en charge les modules ES dans cet exemple. Maintenant, c'est aussi pour cela que nous utilisons un transpiler. Un transpiler tel que babble vous permet d'écrire du code en utilisant le standard de script Ekman le plus léger, mais génère ensuite du code JavaScript vers un standard plus ancien. Il s'agit donc d'une forme antérieure de JavaScript que les anciens moteurs de navigateur peuvent exécuter. Cela peut également être appelé un compilateur car techniquement, vous compilez du code sous une autre forme et dans une ancienne version de JavaScript. Très bien, cela suffit donc pour les moteurs JavaScript. Nous devons maintenant entrer dans les détails et parler du tas et de la pile d'appels au sein des moteurs. Ces deux éléments sont fréquemment utilisés lors du codage en JavaScript, même si vous ne le saviez peut-être pas. 4. Le t-shirt de la mémoire et la pile d'appels: Nous allons maintenant examiner deux fonctionnalités du moteur JavaScript qu'il est important de comprendre tas de mémoire et la pile d'appels. Ils sont utilisés lors de l'exécution du code. Je vais d'abord décrire chacun d'entre eux, puis nous les verrons en action pour mieux comprendre comment ils sont impliqués dans l'exécution du code. Maintenant, comme son nom l'indique, le tas de mémoire comme son nom l'indique, le est lié à l'allocation de mémoire. Chaque fois que vous définissez une fonction d'objet variable, quelque chose comme ça dans votre code, il doit y avoir un endroit pour la stocker. Donc, comme ces variables elles seraient stockées dans le tas de mémoire. Chaque fois qu'une déclaration est rencontrée, telle que celle-ci, la valeur est placée dans le tas de mémoire, puis l'emplacement de cette valeur est placé dans la variable. Ensuite, chaque fois que le code a besoin de cette valeur, de cette fonction ou de tout autre élément stocké, il utilise l' emplacement de la mémoire pour la rechercher. Maintenant, la mémoire dispose d'une quantité de mémoire limitée, sorte que les programmes complexes contenant de nombreuses variables et des objets imbriqués peuvent consommer cette mémoire. Le moteur JavaScript essaie de libérer de la mémoire en effaçant du programme les données qu'il juge inutiles. Ce processus s'appelle la collecte des ordures. Il y a des choses que vous pouvez faire en tant que programmeur pour aider à la collecte des ordures. Et il y a des choses que vous pourriez faire qui pourraient l'empêcher. Nous examinerons cela plus en détail dans la rubrique sur la collecte des ordures. Mais pour l'instant, parlons de la pile d'appels. Chaque fois que nous exécutons du code, la pile d'appels est utilisée. Il s'agit simplement d'un endroit en mémoire qui garde une trace de la fonction exécution et des fonctions qui vont être exécutées par la suite. Donc, l'ordre dans lequel ces commandes sont exécutées. Maintenant, chaque fonction est placée au-dessus de la fonction précédente. La première fonction se trouve donc en bas de la pile d'appels. Et puis, comme les autres fonctions sont appelées, elles sont placées au-dessus. La pile d'appels suit donc une approche du premier entré, dernier sorti. Désormais, dès que la fonction ou commande est terminée, elle est supprimée de la pile d'appels. Maintenant, comme vous pouvez le voir sur le diagramme, il n'y a qu'une seule pile d' appels représentée. Le moteur JavaScript ne possède qu' une seule pile d'appels pour traiter les commandes en cours d'exécution. C'est parce que JavaScript est à thread unique, un terme dont vous avez peut-être entendu parler. Désormais, un seul thread signifie que le moteur JavaScript ne peut exécuter qu'une partie du programme à la fois. La pile d'appels traite donc une commande à la fois. ce fait, JavaScript est synchrone. Les commandes ne peuvent être exécutées qu'une seule à la fois. Vous pouvez probablement y voir un problème. Et si nous invoquions une fonction dont exécution nécessite beaucoup de temps ? Comment pouvons-nous empêcher que cela ne bloque d'autres codes ? Par exemple, nous voulons qu'un utilisateur puisse cliquer sur un bouton sans avoir à attendre deux secondes pour que du JavaScript se termine avant de pouvoir répondre à ce bouton. Nous verrons maintenant comment cela est géré et comment le moteur JavaScript le gère lorsque nous parlerons de la boucle d'événements. C'est aussi pourquoi il est important de comprendre les modèles JavaScript asynchrones en JavaScript. Et c'est l'une des parties critiques que nous aborderons dans ce cours. Maintenant, dans notre diagramme, comme vous pouvez le voir, nous avons un code très simple. Passons en revue la question avec le tas de mémoire et la pile d'appels illustrer comment ils sont utilisés pour parcourir le code. En gros, ce que nous faisons est déclarer deux variables, a et B. Ensuite, nous avons une fonction déclarée. Ensuite, nous invoquons cette fonction ici. À l'intérieur de la fonction, nous appelons le journal de la console. Nous appelons setTimeout et transmettons une fonction à SetTimeout. Le temps pour cela est de 0 milliseconde. Ensuite, nous appelons à nouveau le journal de la console. Passons donc à cette question. Nous avons d'abord les déclarations variables. Et donc chacun d'entre eux va être placé dans le tas de mémoire. Il reste 1 seconde. Maintenant, il n'y a pas d'ordre précis dans façon dont ils sont placés dans le tas. Ils ont juste besoin d'une référence à l'endroit où se trouve cette valeur. Ensuite, nous avons notre fonction. Et cela devra également être placé dans le tas. Et là, nous l'avons ajouté à la mémoire. Maintenant, s'il y avait des variables déclarées à l'intérieur de cette fonction, elles devraient y être placées. Ou s'il y a des fonctions déclarées à l'intérieur, s'il y a d'autres éléments à l'intérieur qui doivent être placés dans le tas de mémoire, cela devrait se produire. Mais maintenant, nous rencontrons. L'appel à helloworld pour cette fonction. Nous l'invoquons. Le moteur JavaScript récupère donc ce code à partir de son emplacement mémoire, puis il peut commencer à l'exécuter à aide de la pile d'appels. La fonction hello-world est donc placée sur la pile d'appels qui indique où nous en sommes dans l'exécution du code. Donc, en ce moment, nous sommes dans la fonction helloworld. Nous arrivons à la première commande, qui est un appel à console.log. Nous sommes donc placés dans le journal des points de la console d'invocation et celui-ci est placé sur la pile d'appels. Nous sommes maintenant en mesure de terminer cette commande. Ainsi, une fois cette commande terminée, elle est supprimée de la pile d'appels et nous pouvons continuer. Et nous arrivons à définir le délai et setTimeout est ajouté à la pile d'appels. Cependant, setTimeout fait partie de l'API Web, comme vous pouvez le voir ici. JavaScript n'a donc rien à faire avec ça. Donc, en gros, il s'en débarrasse. Il l'envoie au navigateur et dit : «  Ici, je dois appeler le SetTimeout. Voici les informations. Allez-y, occupez-vous de cela. Et puis, si le moteur JavaScript l'oublie à ce moment-là, l'API Web, nous allons configurer un timer pour ce setTimeout et il gérera tout ce qui doit être géré avec setTimeout. Mais à ce stade, le moteur JavaScript l' tout simplement oublié. Ça ne l' inquiète plus. Il passe simplement à la commande suivante, qui est un autre collègue, console.log. Et cela s'ajoute à notre pile d'appels. Nous sommes en mesure de nous en occuper immédiatement. Nous envoyons un message à la console, qui se trouve être le monde entier. Ensuite, cela est retiré de la pile d'appels. Et puis, à ce moment-là, nous sommes à la fin de la fonction Hello-World. Et cela est donc retiré de la pile d'appels. Maintenant, vous pouvez voir comment la pile d'appels pourrait être construite avec un certain nombre de choses. Si nous avions des fonctions appelées dans d'autres fonctions. Et plus nous avons des fonctions imbriquées de ce type, plus de choses seront ajoutées à la pile d'appels. Et nous allons développer cette pile d'appels. Parce que tant qu'une fonction ne revient pas, tant qu'elle n'est pas terminée, elle ne peut pas être supprimée de la pile d'appels Maintenant, avec toute cette illustration, j'ai laissé SetTimeout là-bas et j'ai dit que le moteur JavaScript l'avait oublié. Eh bien, nous en parlerons lorsque nous aborderons le sujet de la boucle d'événements, car en réalité, c'est la boucle d'événements et la file de messages qui s'occupent de cela, qui traitent de ces éléments de l'API Web. Nous en parlerons donc dans un autre sujet. Mais avant de passer au sujet suivant, je voudrais aborder un problème que nous pouvons rencontrer avec la pile d'appels, qui s' appelle Stack Overflow. Et c'est une condition que vous avez peut-être rencontrée lors de votre codage. Cela se produit lorsque la pile d' appels se remplit parce qu'elle ne peut pas supprimer commandes et que d'autres continuent à y être ajoutées. J'ai mentionné que les fonctions imbriquées pouvaient ajouter beaucoup à la pile d'appels. Eh bien, il faut un certain temps pour que la pile d'appels se remplisse. Mais lorsqu'il se remplit, cela provoque une erreur. Maintenant, nous pouvons simuler cela assez facilement avec un appel récursif. Maintenant, la récursivité se produit simplement lorsqu' une fonction s'appelle elle-même. Et dans certaines situations, il s'agit d'un modèle avantageux en JavaScript. Mais je veux vous montrer les effets de ce qu'il fait sur la pile. Alors allons-y et mettons en place une fonction qui illustrera cela. Ce fichier JavaScript est joint au fichier HTML. Celle-là que nous avons examinée précédemment. Je vais juste y ajouter une fonction et l'appeler self ramus. Voyez ce qui se passe. Alors, laissez-moi l'appeler récursivité. Il n'est pas nécessaire de l'appeler ainsi, mais je vais le faire parce que je vais l'appeler. Ensuite, je vais définir le nombre qui est transmis égal à lui-même et à lui-même, quelque chose de simple comme ça. Et puis c'est là que la récursivité se produit. Nous nous invoquons de l'intérieur. Alors réfléchissez à ce que cela va faire. La pile d'appels. Nous allons appeler la récursivité, placer la récursivité sur la pile d'appels va aller jusqu'à cette ligne. Et la récursivité va être appelée à nouveau, mais la fonction n'est pas terminée, elle n'est donc pas supprimée de la pile d'appels. Une autre invocation de celui-ci est ajoutée à la pile d'appels. Il continue donc à ajouter de la récursivité à la pile d'appels jusqu'à ce qu'elle s'accumule au point de ne plus pouvoir en ajouter. Et c'est là que nous obtenons ce dépassement de capacité. Permettez-moi d'invoquer cela. Je vais passer le numéro un. Nous allons enregistrer ça. Maintenant que je l'ai juste joint à ce fichier HTML, je vais juste le rafraîchir et voir ce qui se passe. Ouvrons la console et voyons ce que nous avons là. Nous avons un champ de tir non capté. Notre taille maximale de pile d'appels est dépassée. C'est l'air que nous recevrions. S'il y avait un débordement de pile. taille maximale de la pile d'appels a été dépassée, et c'est ce que nous obtenons. Maintenant, c'est un problème simple à résoudre. Tout ce que nous avons à faire est de nous assurer que les fonctions finissent par terminer, qu'elles reviennent. Ensuite, il peut les supprimer de la pile d'appels. Finalement, retirez-les tous de la pile d'appels du crâne. Voyons comment cela pourrait être fait. Disons que si le nombre est supérieur à et je vais juste mettre un grand nombre ici. Je ne sais pas quelle sera sa taille , mais si c'est plus que cela, je vais juste me connecter à la console. Je veux voir la taille du chiffre, juste pour le plaisir. Ensuite, je vais revenir. Voici donc où nous revenons de cette fonction. Il va donc compléter la fonction, nous revenons ici. Il ne recommencera pas. Et il complétera la fonction dans laquelle nous nous trouvons. Et ainsi, il dénouera la pile d'appels, chacune de ces fonctions. Nous allons enfin pouvoir revenir car cela arrivera à la fin de la fonction. Et donc le fait que la dernière fois que nous appelons cela, où le, où num est supérieur à cela, cela force un retour, n'en appelle pas un autre. Ainsi, tous les autres qui se trouvent dans la pile d'appels également être terminés. Ainsi, nous n'obtenons pas ce débordement de pile. Très bien, regardons ça encore une fois. Je vais me rafraîchir ici. Je veux me rappeler qu'il ne grossit pas si je ne le renvoie pas lorsque j'appelle cette fonction. Je veux donc m'assurer qu' il s'agrandit. On y va. Maintenant, nous en un très grand nombre recevons un très grand nombre et nous n'avons plus débordement de pile parce que nous avons pu revenir. Ensuite, débloquez tous les appels de fonction qui se trouvent dans la pile. C'est ce à quoi nous faisons référence lorsque nous parlons de StackOverflow. Très bien, passons au sujet suivant. 5. Comprendre la collecte des déchets: Dans la rubrique précédente, nous avons mentionné la collecte des déchets en relation avec le tas de mémoire. Dans un langage comme le C, nous devons allouer et libérer de la mémoire. Ne le faisons pas en JavaScript, mais il doit tout de même y avoir un mécanisme pour récupérer de la mémoire. Ainsi, nous ne manquons pas de mémoire et ne faisons pas planter le système. Javascript gère la récupération de la mémoire pour nous. Une fois qu'une information, un objet ou une variable, est hors contexte et ne sera plus utilisée. Sa mémoire est récupérée, elle peut donc être réutilisée. Cela s'appelle la collecte des ordures. Voyons comment cela fonctionne dans le moteur. La collecte des déchets a lieu dans le tas de mémoire et utilise ce que l' on appelle parfois un algorithme de marquage et de balayage. Il détermine les objets qui peuvent être supprimés en toute sécurité de la mémoire en déterminant quels objets sont accessibles et quels objets ne sont pas accessibles. Et puis il balaie ceux qui sont inaccessibles. Ils sont balayés et cette mémoire est récupérée. Voyons comment cela fonctionne. À présent, le ramasse-miettes commence par l'objet racine ou global et passe aux objets référencés par celui-ci. Et il passe d'un objet à l'autre, identifiant les objets référencés par quelque chose d'autre. Donc, fondamentalement, les choses qui sont accessibles, celles qui ne le sont pas sont maintenant définies. Et puis tout ce qui est inaccessible, nous voyons maintenant certaines choses qui ne sont pas liées ou qui ne sont pas accessibles. Tout ce qui est inaccessible est effacé. Il les traverse et les balaie. Ils sont partis. Cette mémoire peut maintenant être récupérée et utilisée pour autre chose. Maintenant, comme vous l'avez remarqué dans notre explication, pour que les informations soient libérées et récupérées, ne doivent pas être liées à tout ce qui se passe actuellement dans le programme et qui est inaccessible. Bien qu'il soit possible pour notre codage d'empêcher la récupération d'objets , même si nous ne les utilisons plus. C'est ce qu'on appelle une fuite de mémoire. Les fuites de mémoire sont des parties de la mémoire dont l'application avait besoin et qu' elle utilisait dans le passé et qui ne sont plus nécessaires, mais dont le stockage n'est pas encore renvoyé dans le pool de mémoire. Même si la collecte des ordures est gérée pour nous. Comme nous l'avons vu, nous devons toujours être prudents en matière de gestion de la mémoire. Les fuites de mémoire peuvent provoquer l'échec des programmes JavaScript en utilisant toute la mémoire disponible. Examinons quelques facteurs courants qui peuvent provoquer des fuites de mémoire. Tout d'abord, les variables globales. Si vous continuez à créer des variables globales, elles resteront présentes tout au long de l'exécution du programme, même si elles ne sont pas nécessaires. Si ces variables sont des objets profondément imbriqués, beaucoup de mémoire peut être gaspillée. Ne pas supprimer les écouteurs d'événements qui ne sont plus nécessaires. Comme exemple de la façon dont cette chose particulière peut se produire. Vous pouvez créer de nombreux auditeurs d'événements pour une page ou un emplacement en particulier. Et puis, lorsque l' utilisateur dépasse ce seuil, où ces auditeurs d'événements sont longs, il n'est plus nécessaire. En tant que programmeur, ne les supprimez pas. Ils sont toujours là. Ils occupent toujours de la mémoire, en particulier pour les objets auxquels ils sont liés. Donc, quelque chose dont il faut être conscient. Le troisième point, les intervalles de temps imprécis. Maintenant, l'intervalle défini en est un bon exemple. Et si vous n'avez pas utilisé l'intervalle défini, il vous permet essentiellement exécuter du code encore et encore en fonction d'un laps de temps défini. Maintenant, regardons un exemple très rapide de celui-ci. Je vais juste appeler Set Interval. Et set interval prend comme premier paramètre une fonction. Il s'agit d'une fonction de rappel. Ainsi, chaque fois que l' intervalle expire, le temps que nous y entrons invoque cette fonction de rappel. Je vais donc configurer une fonction ici. Ensuite, le deuxième paramètre est la durée en millisecondes pendant laquelle chaque intervalle se produit. Donc, toutes les 200 millisecondes, cette fonction sera invoquée, d'accord ? Maintenant, lorsque cela peut devenir un problème, disons à l'intérieur d'ici, nous référençons le nombre d'objets. Ces objets y sont, y sont référencés. Parfois, cela se fait avec de l'animation ou quelque chose comme ça. Mais si cela n'est jamais effacé, si cet intervalle défini ne l' est pas, il est évident que ces références seront toujours valides. Il ne pourra donc jamais libérer cette mémoire, même si elle n'est plus utilisée. Une meilleure approche du problème de l'intervalle défini consiste donc à déclarer un identifiant et nous le définissons comme étant égal à setInterval qui placera un identifiant à l'intérieur de celui-ci. Ensuite, lorsque nous aurons terminé, nous devrions nous assurer que l'intervalle est clair avec cet identifiant, quelque chose comme ça. D'accord, encore une chose que nous devons mentionner, c'est la suppression des éléments DOM. Si dans votre programme vous supprimez des éléments du DOM. Mais ces éléments sont toujours des références, par exemple dans le cas d'un écouteur d'événements. Nous en avons parlé plus tôt, ou d'une autre manière, la mémoire ne sera pas libérée. Autre chose dont il faut être conscient. Nous allons maintenant revenir sur certains de ces points et sur d'autres du cours afin vous rappeler les meilleures pratiques pour éviter les fuites de mémoire. Toutes ces choses dont nous avons parlé peuvent s'accumuler et les fuites de mémoire continueront d'occuper de plus en plus de mémoire. Si votre programme s'exécute assez longtemps, il risque d'échouer par manque de mémoire. Même s'il ne tombe pas, vous devez vous assurer d'éviter les fuites de mémoire et ne pas vous contenter de la collecte des ordures pour vous sauver la situation. Très bien, passons au sujet suivant. 6. Retirer les auditeurs d'événements pour vous aider à collecter les déchets: Dans ce deuxième sujet sur la collecte des déchets, je souhaite développer certaines des techniques spécifiques aux navigateurs mentionnées dans la rubrique précédente. Plus précisément, je vais expliquer comment supprimer les écouteurs d'événements et JavaScript. Tous les développeurs JavaScript ne sont pas familiers avec cette fonctionnalité, mais elle est essentielle lorsqu'on parle de collecte des déchets. J'ai donc voulu l'insérer ici. Maintenant, si vous codez pour le navigateur, vous travaillerez avec l'aube. Le DOM est l'abréviation de Document Object Model. Il s'agit simplement d'une interface qui permet à JavaScript de manipuler le contenu, la structure et le style du document HTML. Le document HTML est représenté l'aide de nœuds et d'objets afin que le programmeur puisse interfacer et travailler avec chaque élément de la page HTML. Il existe de nombreuses commandes pour travailler avec le DOM. Je les aborde en détail dans mon cours Getting Started et j'ai inclus certains de ces sujets dans l'annexe. Si vous avez besoin de revoir. J'ai inclus des informations sur le DOM et des commandes pour sélectionner et utiliser les éléments du DOM. Très bien, revenons maintenant au sujet en question. Si vous avez associé un écouteur d'événements à un objet ou à un élément DOM et que cet événement ne sera plus utilisé. Il est recommandé de supprimer l'écouteur. Jetons donc un coup d'œil à l'exemple. Jetons un coup d'œil au code HTML de cette page, que je suis en train de montrer. La voici, comme vous pouvez le voir, c'est une page HTML assez simple. Nous avons un titre dans le titre, nous avons du CSS. Ensuite, dans le corps, nous avons quelques balises div. Et ce que je veux faire, c'est joindre un écouteur d'événements à cette balise div qui a un identifiant de titre. Donc, si nous regardons notre code JavaScript, comme vous pouvez le voir, ce fichier app.js est joint à ce fichier HTML. Nous avons déclaré quelques variables ici. Maintenant, je le fais façon simpliste pour montrer un exemple ici. J'ai donc utilisé certaines variables globales parce que c'est si simple. , je ne prends pas le temps de le faire différemment. Je veux juste montrer cet exemple. Nous avons donc quelques variables globales ici. L'une est le compte et l'autre est une variable de titre qui stocke la division ayant un ID de titre. C'est ainsi que je le sélectionne ici. Nous allons donc y ajouter un écouteur d' événements. Donc je viens ici et je prends simplement cette variable là-bas, j'ajoute un écouteur d'événements. Et nous devons indiquer de quel événement il s'agit. Il s'agit d'un événement de clic que nous voulons utiliser. Et maintenant, quelle fonction va appeler That's title ? Cliquez sur cette fonction ici. Maintenant, vous pouvez parfois ajouter écouteurs d' événements avec des fonctions anonymes, où vous déclarez la fonction ici, au lieu de la déclarer avant de la déclarer dans l' écouteur d'événements d'ajout. Et c'est très bien. Mais vous devez être conscient que si vous faites cela, vous n'êtes pas en mesure de supprimer l'écouteur d'événements . Vous devrez peut-être le supprimer, alors vous devez le faire de cette façon. Très bien. J'en parlerai de la raison dans une minute, lorsque nous en serons là. Mais d'abord, assurons-nous que cela fonctionne. Je vais enregistrer ça. Le serveur virtuel fonctionne déjà sur cette page. Je vais donc juste le redimensionner. Et montrons la console afin que nous puissions voir le message du journal de la console lorsque je clique sur le titre. Et comme nous pouvons le voir, le compteur s' incrémente et indique tant de fois qu'il a été cliqué. Très bien, c'est très simple. Nous y avons ajouté l' EventListener. Voyons maintenant comment supprimer cet écouteur d'événements. Supposons donc que nous voulions le supprimer une fois que le nombre était supérieur à cinq. Nous allons donc le faire rapidement. Si déclaration. Si le nombre est supérieur à cinq. Eh bien, c'est une situation dans laquelle nous allons supprimer l'écouteur d'événements. Et voici la commande. Nous devons utiliser le même objet auquel l' écouteur d'événements est attaché. Dans ce cas, il s'agit d'un élément DOM. Donc, point de marée et puis la commande est remove event, listener, comme ça. Maintenant, cette partie entre parenthèses doit correspondre à ce que nous avions ici lorsque nous avons configuré l'EventListener. Et c'est pourquoi je dis que lorsque vous utilisez une fonction anonyme, vous ne pouvez pas la faire fonctionner. Vous devez déclarer la fonction au préalable. Donc, ces choses sont les mêmes. Et même si vous déclarez des options ou utilisez la capture, ou autre chose, lorsque vous configurez l'addEventListener, vous devez également les inclure ici afin de les supprimer. C'est l'une des exigences de cette commande remove event listener. Très bien, alors allons-y et sauvegardons ça. Cela va rafraîchir la page. Vous pouvez voir que ces messages ont disparu. Maintenant, si on commence à cliquer dessus, ça compte, on en aura six. Maintenant, il faut le supprimer. Maintenant, je clique dessus et rien ne se passe. Cet écouteur d'événements a été supprimé. Il s'agit donc essentiellement du processus de suppression d'un écouteur d'événements. Je voulais en parler ici parce que nous parlions de collecte des ordures. Très bien, passons à autre chose. 7. Comprendre la boucle d'événement: Avant de terminer parler du moteur JavaScript, nous devons parler de la boucle d'événements. Jusqu'à présent, nous avons établi que JavaScript est un thread unique. Il ne possède qu'une seule pile d'appels. Il ne peut faire qu'une seule chose à la fois, il est donc synchrone. Cependant, JavaScript nous permet de faire du codage asynchrone. d'un bouton à une page HTML en est un exemple simple ajout d'un bouton à une page HTML en est un exemple simple. Nous pouvons exécuter du JavaScript. L'utilisateur cliquera sur le bouton et nous pourrons répondre à ce clic. Parce que JavaScript est en cours d'exécution et fait autre chose. Cela n'empêche pas l'utilisateur de cliquer sur ce bouton. Ce serait bien sûr une expérience horrible sur un navigateur. Un autre exemple est que si nous essayons de récupérer des données d'une base de données, nous faisons cet appel à la base de données et nous pouvons ensuite faire autre chose en attendant que les données soient renvoyées. Nous n'avons pas à attendre ces données avant de faire autre chose. Et cela bloquerait les autres traitements JavaScript. Nous pouvons faire autre chose. Ensuite, lorsque les données sont renvoyées, nous pouvons agir en fonction de ces données. Nous pouvons réaliser ce codage asynchrone en JavaScript grâce à la boucle d'événements. Dans le scénario précédent, la commande SetTimeout était gérée par l'API Web. Et j'ai mentionné : « À ce moment-là, le moteur JavaScript oublie tout cela. Eh bien, une fois que cet événement de synchronisation est terminé, une fois que l'API Web se termine à l'événement de synchronisation, comment est-il réintégré dans la pile d'appels afin que la tâche que nous voulons terminer soit terminée ? Par exemple, si vous vous en souvenez, nous avons une fonction de rappel dans le cadre du setTimeout. Comment cette fonction de rappel renvoie-t-elle au moteur JavaScript ? Reprenons le scénario précédent, mais cette fois, nous allons inclure la boucle des événements. Encore une fois. Voici notre code, voici notre setTimeout. Et remarquez que nous avons une fonction ici. Toute la fonction contient une instruction de journal de console, c'est tout. Les millisecondes étant réglées sur 0, le temporisateur doit expirer immédiatement. Mais voyons ce qui se passe. Nous en sommes arrivés au point où la fonction hello-world est invoquée. Continuons donc à parcourir cela. Nous avons donc l'invocation de la fonction hello-world qui est ajoutée à la pile d'appels. Ensuite, il commence à utiliser les commandes de cette fonction. Ainsi, la première commande que nous rencontrons est une instruction de journal de console qui va enregistrer la variable a dans la console. Et cela s'ajoute à la pile d'appels. Il s'occupe de cette déclaration de journal. On voit Hello sur la console. Ensuite, la commande console log est supprimée de la pile d'appels. Et puis nous avançons dans cette fonction, nous rencontrons le setTimeout. Maintenant, le moteur JavaScript sait que setTimeout est géré par l'API Web, il est donc envoyé là-bas pour être traité. L'API Web configure donc un temporisateur. Il a la capacité de faire fonctionner une minuterie. Et ce délai expire immédiatement parce que nous n'avons pas réglé sur 0 milliseconde. Et donc, lorsque le temporisateur expire, que fait-il avec cette fonction de rappel ? C'est ce que le chronomètre est censé faire. Il ajoute donc la fonction de rappel à la file d'attente des messages. Maintenant, cette fonction de rappel se trouve dans la file d'attente des messages et c'est à ce moment que la boucle d'événements entre en jeu. La boucle d'événements continuera de fonctionner. Il vérifiera la pile d'appels et verra si elle est vide. heure actuelle. Il fonctionne toujours sur la fonction hello-world. Il n'est donc pas vide, mais à cycles et continue d'avoir l'air d'une scène. S'il est vide. S'il est vide, sera ajouté le prochain élément disponible dans la file de messages sera ajouté à la pile d'appels. Mais pour l'instant, il n'est pas vide, nous devons donc continuer avec la fonction hello-world. Quelle est la prochaine chose qui se présente ? Eh bien, il s'agit d'une autre instruction du journal de la console, qui est donc ajoutée à la pile d'appels. Et nous allons de l'avant et terminons que la déclaration du journal de la console World est imprimée sur la console. Ainsi, l'instruction du journal de la console est supprimée de la pile d'appels. À ce stade, nous en avons terminé avec la fonction hello-world qui est également supprimée de la pile d' appels. Donc, comme je l'ai mentionné, la boucle d'événements fait du cycle et vérifie la pile d'appels. Donc, au moment des contrôles et des visites, il est vide. Il saisit ensuite l'élément suivant dans la file de messages et l'ajoute à la pile d'appels. Ainsi, nous sortons cette fonction anonyme, cette fonction de rappel, de la pile d'appels et elle commence à fonctionner selon ce que cette fonction doit faire. La seule chose qu'il contient est une instruction du journal de la console. Il rencontre cette instruction du journal de la console et l'ajoute à la pile d'appels. L' instruction du journal de la console est terminée. Un point d'exclamation est imprimé sur la console qui est supprimée de la pile d'appels. C'est la fin de cette fonction, et cette fonction est également supprimée de la pile d'appels. Ainsi, à ce stade, la pile d'appels est vide, il n'y a plus rien à ajouter dans la file d'attente des messages. Nous attendons donc simplement un numéro, une autre commande JavaScript qui doit être exécutée. Bien, maintenant, avant de terminer, permettez-moi de souligner quelques points importants de cette discussion. abord, d'autres parties de l'environnement JavaScript peuvent gérer certaines tâches. Par exemple, les tâches qui appartiennent au navigateur. Le moteur JavaScript n'a pas à les traiter. Dans cet exemple, nous utilisons l'API Web pour gérer cette commande setTimeout. Mais les callbacks qui font partie de ce qui y est géré sont réintégrés dans le moteur à l'aide de la boucle d'événements. Il les extrait de la file d'attente des messages et les ajoute à la pile d'appels. Nous réalisons du JavaScript asynchrone de cette façon. La boucle d'événements est essentielle pour que cela se produise. Un autre point important, une fois qu' un rappel est ajouté à la pile d'appels, le code est géré par la pile d'appels comme il le serait normalement si le code JavaScript ne provenait pas du Q, n'est-ce pas peu importe. Il va traiter ce JavaScript de la même manière. Ensuite, pour rappel, la boucle d'événements vérifie en permanence la présence d' éléments dans la file d'attente. Et si la pile d'appels est vide, si la pile d'appels est vide et qu'il y a quelque chose dans la file d'attente, le prochain élément disponible de la file d'attente sera ajouté à la pile d'appels. Et comme mentionné, la pile d'appels est constituée d'un thread, elle est donc synchrone. Il ne peut faire qu'une seule chose à la fois, mais son interaction avec la boucle d'événements et l'API Web permet le codage asynchrone que nous pouvons réaliser en JavaScript. Très bien, passons au sujet suivant. 8. L'environnement d'exécution du nœud: Étant donné que NodeJS est une implémentation très largement utilisée de JavaScript, je pense qu'il est important d' examiner brièvement son environnement d'exécution, en particulier en ce qui concerne la boucle d'événements et la file d'attente de messages qui nous venons d'en parler. Cet article décrit certains des tenants et aboutissants de l'environnement Node.JS. Et voici l'URL de cet article. Vous pouvez le lire vous-même si vous le souhaitez. Mais je voulais prendre un moment pour regarder le schéma qu'il fournit de l'environnement d'exécution. Donc, si nous faisons défiler un peu vers le bas, juste ici, le nœud JS Runtime. Maintenant, vous allez reconnaître certaines de ces choses , par exemple, V8, voici le moteur V8 qui gère le JavaScript. C'est ce qu'il fait. Remarquez la file d'événements, dont le nom est différent mais similaire à la file de messages. La boucle d'événements en fait également partie. Afin de gérer les éléments de la file d'attente des événements. Cette partie ici en direct, vous pourriez être considérée comme similaire à l'API Web qui va gérer les choses que NodeJS doit faire. Cela n'est pas fait par JavaScript, c'est fait par l'environnement extérieur. Le moteur V8 est donc toujours à thread unique, possède toujours une pile d'appels, mais il peut tirer parti d'autres avantages. Et en exécutant sur un serveur, il y a un certain nombre de choses différentes qui doivent être effectuées et qui seront gérées ici. Maintenant, sachez que le SIG possède certaines commandes similaires à celles que nous voyons dans le navigateur. Par exemple, setTimeout, set interval, tous deux sont disponibles , tout comme NodeJS, ils ne sont pas gérés par le moteur V8, tout comme ils ne l'étaient ils ne sont pas gérés par le moteur V8, pas dans un navigateur. Ils sont gérés ici. Il y a donc quelques similitudes. Mais parce que c'est un environnement différent, parce que le temps d'exécution est différent. Cela a été traité de différentes manières, mais les concepts sont transférables. Donc, encore une fois, vous pouvez en savoir plus à ce sujet dans cet article si vous le souhaitez. Mais je voulais souligner la boucle d'événements et les similitudes entre NodeJS et l' environnement d'exécution géré dans un navigateur. Très bien, passons au sujet suivant. 9. Démarrage de l'exercice : explorer la boucle d'empilement d'appels et de boucle d'événements: J'ai donc voulu faire un petit exercice amusant cadre de cette section, afin d'explorer un peu la pile d'appels et la boucle d'événements. Maintenant, avec tous mes cours, je propose toujours des exercices parce que je pense qu'il est important pour vous de réellement faire les choses afin d' apprendre que les choses doivent se faire par vous-même à fois. donc là que les exercices entrent en jeu. Pour ce faire, j'ai une première vidéo présentant l'exercice. Et ensuite, allez-y et essayez. Ensuite, lorsque vous êtes prêt, vous passez au sujet suivant. Et nous procédons à cet exercice. C'est généralement la structure. Parfois, ils font les choses un peu différemment, mais c'est généralement la structure. Alors allons-y et voyons ce que j'aimerais que vous fassiez pour cet exercice. Très bien, les fichiers de l'exercice, et plus particulièrement le fichier JavaScript App.js. J'ai du code ici et laissez-moi l' expliquer très rapidement, puis je vous indiquerai ce que j'aimerais que vous fassiez. Donc, ici, nous créons un tableau, et nous créons un tableau de 10 000 éléments. Le numéro que j'ai utilisé dans le constructeur, le constructeur de tableau juste là. Ensuite, nous utilisons la méthode de remplissage des tableaux pour le remplir avec des uns. Et donc, en gros, il crée un tableau d' une longueur de 10 000 qui en contient un dans chacun d'eux. C'est ce que nous faisons ici. Ensuite, j'ai une petite fonction, je l'appelle « pop it ». Fondamentalement , il suffit de saisir une valeur chaque fois que la fonction est appelée à partir de ce tableau. Ensuite, nous l'invoquons. Et remarquez que nous avons de la récursivité ici car elle vérifie la longueur du tableau. Si la longueur est toujours supérieure à 0, ce qui signifie qu'il y a encore des éléments dans ce tableau, il s'appellera à nouveau, ce qui fera apparaître un autre élément. C'est de la récursivité que nous faisons. Et comme vous vous en souvenez, lorsque nous faisions de la récursivité auparavant, nous sommes capables de déborder la pile. Donc, j'aimerais que vous voyiez quel est le nombre requis pour provoquer un débordement de pile. Si 10 000 fonctionnent pour vous, alors tant mieux. Mais ce n'est peut-être pas le cas Il suffit donc de jouer avec ce nombre d'enchères , ce qui est plutôt amusant de voir ce qui va provoquer un débordement. Ensuite, la deuxième partie de l'exercice, une fois que vous avez débordé cette pile, comment pouvez-vous changer cela ? Comment pouvez-vous faire en sorte que cela utilise la boucle d'événements afin que la pile ne déborde pas ? donc une idée assez intéressante, de tirer parti de quelque chose qui est disponible dans l'environnement d'exécution ne pas déborder la pile, tout en pouvant toujours utiliser le même numéro C'est donc une idée assez intéressante, de tirer parti de quelque chose qui est disponible dans l'environnement d'exécution pour ne pas déborder la pile, tout en pouvant toujours utiliser le même numéro débordait la pile. Alors donne, essaie. De toute évidence, je ne vous ai pas enseigné de commandes spécifiques pour ce faire, bien que vous ayez vu quelques exemples lorsque nous avons examiné différents concepts dans cette section. Mais essayez-le avec ce que vous savez. Ensuite, lorsque vous serez prêt, passez au sujet suivant et nous l'examinerons. 10. Fin de l'exercice : explorer la boucle d'empilement d'appels et de l'événement: Très bien, jetons un coup d'œil à ce petit exercice amusant ici. Donc, en ce moment, 10 000, c' est le nombre qu'il y a dans ce tableau. Voyons si cela provoque un StackOverflow. Je vais donc y aller, servir ça et voir ce que nous obtenons. Je vais donc passer au fichier HTML , puis cliquer sur Go Live. Puis j'ai sauté sur la console. heure actuelle, nous ne voyons aucune erreur pour StackOverflow. Cela semble donc fonctionner correctement. en revenir à Visual Studio Code, je vais juste en réduire un peu la taille afin que nous puissions consulter le journal de la console pendant que nous jouons avec ce code. Passons donc à, allons-y, 10 500. Voyons ce qui se passe là-bas. Je vais donc changer ce numéro ici, le sauvegarder quand même. OK. Passons à 11 mille. Je vais le sauver. Et je n'ai toujours aucun problème. Alors peut-être que nous avons besoin de sauter plus haut. Allons-y encore 13 mille. OK, allons-y 15 000. Et là, il y a un trop-plein. Je ne sais donc pas quel est le chiffre exact, mais ce n'était pas vraiment ce que je voulais accomplir ici. Je voulais juste vous donner une chance de jouer avec ce stack overflow et de voir qu'à un moment donné, cela provoquera un dépassement de la taille de la pile. Ensuite, nous obtenons la portée non captée de l'air ici. Très bien, voilà l' air que nous recherchons. Maintenant. Comment pouvons-nous changer cela ? Nous pouvons donc toujours conserver ce numéro et l' exécuter de manière récursive et extraire tous ces éléments du tableau. Eh bien, afin de tirer parti de la boucle d'événements, nous pouvons utiliser l'API Web, nous pouvons utiliser setTimeout pour invoquer à nouveau cette fonction. OK ? Donc, au lieu de l' appeler récursif, récursivement tout de suite, nous pouvons utiliser setTimeout pour l'invoquer. Et donc, comme nous le ferions, setTimeout, puis nous transmettons la fonction. Maintenant, nous n'incluons pas les parenthèses à ce stade, car cela provoquera son invocation immédiate. Nous transmettons simplement la fonction et elle l' invoquera une fois le délai expiré. Nous allons donc mettre un 0 après cela pendant 0 millisecondes que nous voulons invoquer tout de suite. Voici donc notre nouvelle configuration. Allons-y, gardons ça et voyons ce qui se passe ici. Remarquez que nous ne prenons pas l'air. Allons-y et jetons un coup d'œil au tableau, voyons combien il en reste. Nous sommes descendus à 13 600. C'est donc le nombre de personnes qui sont apparues. Donc, évidemment, puisque nous utilisons la boucle d'événements, nous utilisons l' API Web avec setTimeout. Pour les faire sortir. Il faut plus de temps pour les supprimer toutes car il faut configurer cette minuterie. Ensuite, il met quelque chose dans une file d'attente. Ensuite, cet élément de la file d'attente est placé dans la pile d'appels, puis il est retiré. Et il le fait encore et encore. Alors regardons ça contre lui et nous l'avons réduit à oh, nous en avons perdu 67 000 ou 6 700 maintenant. Donc ça les traverse, mais c'est plutôt chouette. Vous pouvez le voir faire cela parce qu' il le fait beaucoup plus lentement. Mais remarquez qu'il ne bloque pas. Je peux saisir des informations ici sur la console et je ne suis pas empêché de faire d'autres choses en JavaScript. C'est donc l'avantage que la boucle d'événements fonctionne pour nous là-bas. Jetez un œil de plus, c'est presque terminé. Et au moment où j'appuie sur Retour, c'était fait. Il est donc maintenant nettoyé de cette matrice. Donc, juste un petit exercice amusant pour explorer la pile d'appels, une petite boucle d'événements. Très bien, passons au sujet suivant. 11. Comment JavaScript évolue: En tant que développeur JavaScript, il est important de comprendre comment JavaScript évolue et change. Parce que c'est quelque chose qui est certain dans le monde du JavaScript. Elle est en constante évolution. Lorsque j'ai commencé à utiliser JavaScript il y a de nombreuses années, il n'avait rien à voir avec le langage que nous avons aujourd'hui. On dirait presque que c'est une langue complètement différente. Nous pouvons en faire bien plus maintenant. Pour comprendre comment JavaScript évolue, nous devons parler de deux choses, script ekman et le TC 39. Parlons d'abord du script ECMO. Maintenant. Qu'est-ce qu'un script ? Je suis sûr que vous en avez entendu parler. Il est constamment utilisé, essentiellement comme une simple spécification utilisée par certains langages. Il est standardisé par l'ACM International, et c'est de là que vient son nom. Javascript est l'implémentation la plus utilisée dans mon script. C'est pourquoi il est si étroitement lié à JavaScript. Mais il existe d'autres langues dont vous avez probablement entendu parler. La chute de ce standard des scripts Ekman. Par exemple, Action Script, qui est le langage derrière Flash basé sur le standard de script Ekman et le script J créé par Microsoft. Cela est également basé sur cette spécification. Maintenant, la première édition du standard de scripts Ekman a été publiée en juin 1997, et elle a été appelée Ekman script one ou ES1. Et depuis lors, chaque version supplémentaire a été augmentée et ce nombre a été incrémenté. Donc ES x1, x2, x3, et ainsi de suite. Maintenant, quand Acme Script Sixth est sorti, ils ont commencé à désigner le bail avec l'année. À cette époque, la sortie était techniquement appelée Ackman script 2015 parce que c'est l'année Ekman script six est sorti. Cependant, ES6 vient de se bloquer. C'est pourquoi les gens l'appellent ES6 ou ECMO script 2015. Ils font des allers-retours entre cela, car les versions de l'ES6 sont bloquées. Cette version en particulier était une version énorme avec un certain nombre de fonctionnalités pour JavaScript. Si vous étiez dans le monde du JavaScript à cette époque, vous vous souviendrez du nombre de choses ont été ajoutées à JavaScript. Beaucoup de choses qui sont désormais régulièrement utilisées ont été ajoutées au cours de cette version particulière. Depuis la sortie de cette version du standard, une nouvelle version est publiée chaque année. Et nous avons donc eu le script d'Ekman, 2016201718192020. Chaque année, une nouvelle version sort. Cela vient en grande partie du fait que la sortie de Ekman Scripts Six était si énorme. Ils ne voulaient pas d'une autre sortie aussi importante à nouveau. Ils abordent donc la sortie d'une manière beaucoup plus gérable. Maintenant, qui détermine le contenu de chaque version ? D'où vient tout cela ? Eh bien, cela a à voir avec le TC3 Nine. Alors parlons-en. Maintenant. Tc 39 signifie comité technique 39. Et c'est un comité qui fait évoluer le JavaScript. Et ses membres sont des entreprises telles que des fournisseurs de navigateurs, qui s'intéressent directement au JavaScript. Le comité se réunit régulièrement et vous pouvez suivre ses procès-verbaux en ligne si vous le souhaitez. Donc, en ce sens, c'est transparent. Désormais, pour qu'une fonctionnalité parvienne à maturité et fasse partie d'une future version standard du script Ekman, elle doit passer par plusieurs étapes, que nous appelons étapes de maturité. Le comité TC3 dynein gère donc ces propositions à travers ces étapes jusqu'à ce qu'elles soient acceptées dans le cadre de la norme. Je veux donc parler de ces étapes très rapidement. Donc étape 1 ou étape 0, la première étape. Mais l'étape 0 est en fait l'étape de soumission. Et il s'agit simplement de la soumission d'une nouvelle fonctionnalité, d'une proposition de nouvelle fonctionnalité. Et cela doit provenir d'un membre du TC 39 ou d'une personne considérée comme un contributeur du TC 39. Et en gros, il s'agit d'un document décrivant la fonctionnalité qu'ils souhaitent. Cette étape 0. La première étape est l'étape de la proposition. Il s'agit maintenant d'une proposition officielle pour la fonctionnalité. Et cela doit avoir un champion qui sein de ce comité , souhaite que cette fonctionnalité soit adoptée. C'est donc la première étape. La deuxième étape est l'étape du projet. Et c'est vraiment la première version de ce qui figurera dans les spécifications pour cette fonctionnalité particulière. Une fois que quelque chose arrive au stade son inclusion éventuelle est beaucoup plus probable. troisième étape est désormais la phase candidate. À ce stade, la proposition est presque terminée et nécessite des commentaires de la part des implémentations et des utilisateurs. Et enfin, la quatrième étape est l'étape finale. À ce stade, il est prêt à être inclus dans la spécification et sera probablement inclus dans la prochaine spécification à venir. Mais ce n'est pas nécessairement une garantie. Tout au long de ces étapes, ces fonctionnalités sont toujours considérées comme des propositions et ne le sont pas tant qu'elles ne sont pas officiellement incluses dans la norme. Maintenant, il peut être important de connaître ces étapes. Par exemple, si vous accédez à un site comme celui-ci et que vous accédez à des fonctionnalités à venir, pouvez utiliser le bouton suivant pour découvrir ce qui est le bouton suivant pour compatible et ce qui ne l'est pas. Remarquez comment il est divisé en étapes dont nous venons de parler. Voici l'étape candidate, voici ce qui se présentera comme une possibilité dans la prochaine version du script d'Ekman. Et vous pouvez voir que certains navigateurs et certains compilateurs commencent déjà à prendre en charge ces fonctionnalités proposées. Vous pouvez le constater ici, au fur et à mesure que vous avancez dans les étapes de la deuxième ébauche, vous constatez que de moins en moins d'implémentations ont déjà été effectuées. Ainsi, puisque ces fournisseurs siègent au comité, ils savent ce qui va se passer. Ils sont peut-être les champions d'une proposition particulière, qui sait, mais ils commencent à mettre en œuvre certains de ces éléments avant ne fassent partie de la spécification officielle. Vous pouvez voir que nous pouvons même passer à l'étape 0, il ne s' y passe pas grand-chose du tout. Ainsi, lorsque des articles ou des sites comme celui-ci parlent de propositions, de propositions de scripts d' Ekman, ils parlent de choses qui en sont à l'une de ces étapes et qui n'ont pas été officiellement adoptées dans le standard encore, mais évoluent dans cette direction. C'est donc le processus suivi par tc Threonine afin de mettre à jour le standard de script Ackman pour JavaScript. Très bien, passons au sujet suivant.