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

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>

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!