Pourquoi les fermetures dans les boucles font-elles que tous les liens affichent la même valeur ?

Fermetures JavaScript dans les boucles : démystifiées

Comprendre les fermetures

Les fermetures en JavaScript permettent aux fonctions d'accéder à des variables de l'extérieur de leur environnement immédiat portée, créant des contextes de données privées. Cependant, les variables référencées par les fermetures restent accessibles même après la fin de l'exécution de la fonction englobante.

Le problème des fermetures dans les boucles

Considérez l'extrait de code suivant :

<code class="javascript">for (var i = 0; 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>

Dans cet exemple, la valeur de i transmise à la fonction interne sous la forme num est capturée par la fermeture créant une "variable partagée" sur tous les éléments du lien. Cela signifie que cliquer sur n'importe quel lien affichera toujours la dernière valeur de i (4 dans ce cas).

Utilisation d'une IIFE (expression de fonction immédiatement invoquée) comme fabrique de fonctions

Pour résoudre ce problème, créez un IIFE pour chaque lien, en passant la valeur de i comme argument :

<code class="javascript">function addLinks() {
  for (var i = 0; i < 5; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;

    // IIFE used as a function factory
    link.onclick = (function (num) {
      return function () {
        alert(num);
      };
    })(i);
    document.body.appendChild(link);
  }
}</code>

Dans cette version, chaque IIFE crée une portée isolée où la valeur de i est figée à le moment de la création de la fonction. Cela garantit que chaque élément de lien possède sa propre copie privée de i, quel que soit l'ordre dans lequel ils sont cliqués.

Approche alternative : générateur de fonctions

Une autre option est pour utiliser un générateur de fonctions pour créer des fonctions qui font référence à la valeur actuelle de i :

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

for (var i = 0; i < 5; i++) {
  link = document.createElement("a");
  link.innerHTML = "Link " + i;
  link.onclick = generateMyHandler(i);
  document.body.appendChild(link);
}</code>

Dans ce cas, la fonction generateMyHandler renvoie une nouvelle fonction qui a été liée à la valeur spécifique de i au moment de l'appel de fonction.

En comprenant comment les fermetures JavaScript capturent les variables et en utilisant des techniques appropriées pour créer des étendues isolées, les développeurs peuvent gérer efficacement des scénarios de boucles complexes impliquant des variables partagées.

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!