Maison > interface Web > js tutoriel > Pourquoi les fermetures de boucles provoquent-elles la confusion et comment pouvons-nous la résoudre ?

Pourquoi les fermetures de boucles provoquent-elles la confusion et comment pouvons-nous la résoudre ?

DDD
Libérer: 2024-10-28 05:44:30
original
406 Les gens l'ont consulté

 Why Do Closures in Loops Cause Confusion, and How Can We Solve It?

Comprendre les fermetures JavaScript dans les boucles

Le problème :
Dans le code fourni, l'utilisation des fermetures dans une boucle semble déroutant. Plus précisément, l'apparition de i entre doubles parenthèses a entraîné des difficultés de compréhension.

La solution : Function Factory

Pour résoudre ce problème, une technique appelée usine de fonctions peut être employé. Au lieu d'attribuer directement une fonction à un gestionnaire d'événements, nous pouvons utiliser une fabrique de fonctions pour générer la référence de fonction souhaitée.

Exemple de code :

<code class="javascript">function generateMyHandler(x) {
  return function() {
    alert(x);
  };
}

for (var i = 0; i < 10; i++) {
  document.getElementById(i).onclick = generateMyHandler(i);
}</code>
Copier après la connexion

Explication :

Dans ce code, nous créons une fabrique de fonctions nommée generateMyHandler qui prend un paramètre x. Cette usine renvoie une fonction qui alerte sur la valeur de x. Dans la boucle, nous invoquons generateMyHandler pour chaque i et attribuons la fonction renvoyée au gestionnaire d'événements.

Comment cela résout le problème :

L'utilisation d'une fabrique de fonctions nous permet pour isoler la création de la fermeture. En passant i comme argument à la fonction factory, nous capturons une référence unique à i. Cela garantit que chaque fermeture conserve sa propre instance de la variable, éliminant ainsi le problème des variables partagées.

Conclusion :

En employant une fabrique de fonctions, nous pouvons utiliser efficacement fermetures en boucles sans rencontrer de conflits ou de confusion. Cette technique permet de simplifier le code et améliore notre compréhension du fonctionnement des fermetures dans la boucle d'événements 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!

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal