Maison > Article > interface Web > Comment les fermetures nous aident-elles à gérer la portée des variables dans les boucles JavaScript ?
Fermetures et portée des boucles
Comprendre l'utilisation des fermetures JavaScript dans les boucles est essentiel pour écrire du code modulaire et réutilisable. Les fermetures permettent aux fonctions d'accéder et de manipuler des variables à partir de leur portée englobante, même après le retour de la fonction englobante.
Le problème
Considérez l'extrait de code suivant :
<code class="javascript">function addLinks() { for (var i = 0, link; i < 5; i++) { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function(num) { return function() { alert(num); }; }(i); document.body.appendChild(link); } }</code>
La principale ligne d'intérêt est la définition du gestionnaire d'événements onclick. Il utilise une fonction anonyme au sein d'une fermeture pour référencer la variable i, qui représente l'index du lien créé dans la boucle.
La solution : les usines de fonctions
Pour Pour clarifier l'utilisation des fermetures dans ce scénario, nous pouvons utiliser une approche d'usine de fonctions. Voici une version simplifiée du code :
<code class="javascript">function generateHandler(i) { return function() { alert(i); }; } for (var i = 0; i < 5; i++) { document.getElementById(i).onclick = generateHandler(i); }</code>
Dans cet exemple, nous créons une fabrique de fonctions, generateHandler(), qui renvoie une fonction qui fait référence à la valeur i spécifiée. En utilisant l'usine pour générer chaque gestionnaire onclick, nous garantissons que chaque fonction possède sa propre copie privée de la variable i.
Comprendre les fermetures
Les fermetures capturent le contexte dans lesquels ils sont définis, y compris les variables ou paramètres de la portée environnante. Lorsqu'une fonction interne est invoquée dans une fermeture, elle a accès à ces variables capturées même après le retour de la fonction englobante.
Points clés
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!