Comment résoudre les problèmes liés aux références de variables de fermeture dans les boucles JavaScript ?

Fermeture JavaScript à l'intérieur des boucles : comprendre le problème et ses solutions

Le problème survient lors de l'utilisation de fermetures à l'intérieur de boucles avec des déclarations de variables à l'aide du mot-clé var . Les fermetures capturent l'environnement dans lequel elles sont définies, y compris les variables, et créent une référence à celles-ci, même après la sortie de la fonction. Cela peut entraîner un comportement inattendu lorsque la variable capturée change de valeur pendant l'exécution de la boucle.

Le problème :

Considérez le code suivant :

<code>for (var i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

Ce code crée une boucle qui itère trois fois. A l'intérieur de chaque itération, une fonction est définie et stockée dans un tableau. Le résultat attendu serait :

<code>My value: 0
My value: 1
My value: 2</code>

Cependant, le résultat réel est :

<code>My value: 3
My value: 3
My value: 3</code>

C'est parce que la variable i est capturée par les fermetures et qu'elle est mise à jour vers la version finale valeur de 3 avant l'exécution de l'une des fermetures.

Solution ES6 : utilisation du mot-clé 'let'

ECMAScript 6 (ES6) introduit le mot-clé let, qui crée un bloc -variables de portée. Dans notre exemple, nous pouvons utiliser let au lieu de var pour créer une nouvelle variable i pour chaque itération :

<code>for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

Cette fois, chaque fermeture capturera sa propre variable i distincte et le résultat attendu sera obtenu .

Solution ES5.1 : Utiliser 'forEach'

La méthode Array.prototype.forEach de JavaScript fournit un moyen propre d'itérer sur un tableau. Chaque fonction de rappel transmise à forEach obtient une fermeture distincte autour de l'élément actuel :

<code>var someArray = [ /* whatever */ ];
someArray.forEach(function(element) {
  // Code specific to this element
});</code>

Solution classique : utilisation de fermetures

Les fermetures peuvent être utilisées pour lier la variable à une valeur spécifique en dehors de la fonction :

<code>function createfunc(i) {
  return function() {
    console.log("My value:", i);
  };
}

var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = createfunc(i);
}</code>

Ici, une fermeture spécifique à i est créée à l'aide de createfunc puis stockée dans le tableau funcs. Lorsque chacune de ces fermetures est exécutée, elles font référence à la variable i correspondante, ce qui donne le résultat correct.

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!