Comment fonctionnent les fermetures en JavaScript ?-js tutoriel-php.cn

Table des matières

Exemple 1 h2>

Output

Exemple 2

Sortie

Maison

interface Web

js tutoriel

Comment fonctionnent les fermetures en JavaScript ?

Aug 24, 2023 pm 09:05 PM

Dans cet article, nous découvrirons les « Closures » et comment elles fonctionnent réellement en JavaScript. Une fermeture est essentiellement une composition d'une fonction qui contient une référence à son état environnant (également appelé environnement lexical).

En JavaScript, une fermeture est essentiellement créée chaque fois qu'une fonction est créée au moment de l'exécution. En d’autres termes, une fermeture n’est qu’un nom sophistiqué qui rappelle quelque chose d’externe utilisé en interne.

Comprenons les fermetures JavaScript avec quelques exemples -

Exemple 1 h2>

Dans l'exemple suivant, nous déclarerons une fermeture qui permettra finalement d'accéder à la variable externe tagLine à partir de la fonction externe

Utiliser external dans la fonction la plus interne Après le variable, cette fermeture spécifique aidera l'utilisateur à alerter le tagLine à chaque fois que la fonction externe est appelée.

#Filename: index.html

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;title&gt;
      Closures in Javascript
   &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h1 style=&quot;color: green;&quot;&gt;
      Welcome To Tutorials Point
   &lt;/h1&gt;
   &lt;button type=&quot;button&quot; onclick=&quot;init()&quot;&gt;
      Click here!!!
   &lt;/button&gt;
   &lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;
&lt;script&gt;
   function init() {
      var tagLine = &quot;Start your Learning journey now&quot;;
      function display() { // display() is the inner function, a closure
         alert(tagLine); // use variable declared in the parent function
      }
      display();
   }
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Output

Cela produira les résultats suivants.

JavaScript 中的闭包是如何工作的？

Exemple 2

Dans l'exemple ci-dessous, nous utilisons des fermetures imbriquées pour appeler deux fonctions et afficher la sortie de la même fonction.

#Nom du fichier : index.html

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;title&gt;
      Closures in Javascript
   &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h1 style=&quot;color: green;&quot;&gt;
      Welcome To Tutorials Point
   &lt;/h1&gt;
   &lt;button type=&quot;button&quot; onclick=&quot; Counter()&quot;&gt;
      Click Me!
   &lt;/button&gt;
   &lt;p id=&quot;demo1&quot;&gt;&lt;/p&gt;
   &lt;p id=&quot;demo2&quot;&gt;&lt;/p&gt;
&lt;script&gt;
function Counter() {
   var counter = 0;
   function outerfunction() {
   counter += 1;
   document.getElementById(&quot;demo1&quot;).innerHTML
      = &quot;Outer Counter called = &quot; + counter +&quot; from Outer Function &quot; ;
      function innerfunction() {
         counter += 1;
         document.getElementById(&quot;demo2&quot;).innerHTML
         = &quot;Inner Counter called = &quot; + counter +&quot; from Inner Function &quot;;
      };
      innerfunction();
   };
   outerfunction();
};
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Sortie

JavaScript 中的闭包是如何工作的？

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn