var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

Il produit ceci:

Ma valeur: 3
Ma valeur: 3
Ma valeur: 3

Alors que je voudrais qu'il affiche:

Ma valeur: 0
Ma valeur: 1
Ma valeur: 2

Le même problème se produit lorsque le retard dans l'exécution de la fonction est provoqué par l'utilisation d'écouteurs d'événements:

var buttons = document.getElementsByTagName("button");
// let's create 3 functions
for (var i = 0; i < buttons.length; i++) {
  // as event listeners
  buttons[i].addEventListener("click", function() {
    // each should log its value.
    console.log("My value: " + i);
  });
}

<button>0</button>
<br />
<button>1</button>
<br />
<button>2</button>

… Ou code asynchrone, par exemple en utilisant Promises:

// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

for (var i = 0; i < 3; i++) {
  // Log `i` as soon as each promise resolves.
  wait(i * 100).then(() => console.log(i));
}

Edit: Il est également apparent dans for inet for ofboucles:

const arr = [1,2,3];
const fns = [];

for(i in arr){
  fns.push(() => console.log(`index: ${i}`));
}

for(v of arr){
  fns.push(() => console.log(`value: ${v}`));
}

for(f of fns){
  f();
}

Quelle est la solution à ce problème fondamental?

Eh bien, le problème est que la variable i, dans chacune de vos fonctions anonymes, est liée à la même variable en dehors de la fonction.

Solution classique: fermetures

Ce que vous voulez faire, c'est lier la variable de chaque fonction à une valeur distincte et immuable en dehors de la fonction:

var funcs = [];

function createfunc(i) {
  return function() {
    console.log("My value: " + i);
  };
}

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

for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

Puisqu'il n'y a pas de portée de bloc dans JavaScript - seulement la portée de la fonction - en encapsulant la création de la fonction dans une nouvelle fonction, vous vous assurez que la valeur de "i" reste comme vous le vouliez.

Solution ES5.1: forEach

Avec la disponibilité relativement répandue de la Array.prototype.forEachfonction (en 2015), il convient de noter que dans les situations impliquant une itération principalement sur un tableau de valeurs, .forEach()fournit un moyen propre et naturel d'obtenir une fermeture distincte pour chaque itération. Autrement dit, en supposant que vous disposez d'une sorte de tableau contenant des valeurs (références DOM, objets, etc.) et que le problème se pose de configurer des rappels spécifiques à chaque élément, vous pouvez le faire:

var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
  // ... code code code for this one element
  someAsynchronousFunction(arrayElement, function() {
    arrayElement.doSomething();
  });
});

L'idée est que chaque invocation de la fonction de rappel utilisée avec la .forEachboucle sera sa propre fermeture. Le paramètre transmis à ce gestionnaire est l'élément de tableau spécifique à cette étape particulière de l'itération. S'il est utilisé dans un rappel asynchrone, il n'entrera en collision avec aucun des autres rappels établis aux autres étapes de l'itération.

S'il vous arrive de travailler dans jQuery, la $.each()fonction vous donne une capacité similaire.

Solution ES6: let

ECMAScript 6 (ES6) lance une nouvelle letet des constmots - clés qui sont différentes que la portée se les varvariables à base. Par exemple, dans une boucle avec un letindex basé sur, chaque itération à travers la boucle aura une nouvelle variable iavec une portée de boucle, donc votre code fonctionnera comme vous vous y attendez. Il existe de nombreuses ressources, mais je recommanderais le post de portée de bloc de 2ality comme une excellente source d'informations.

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

Attention, cependant, IE9-IE11 et Edge avant la prise en charge d'Edge 14 letmais se trompent (ils n'en créent pas à ichaque fois, donc toutes les fonctions ci-dessus enregistreraient 3 comme si nous les utilisions var). Edge 14 réussit enfin.

Essayer:

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

for (var j = 0; j < 3; j++) {
    funcs[j]();
}

Modifier (2014):

Personnellement, je pense que la réponse.bind la plus récente de @ Aust sur l'utilisation est la meilleure façon de faire ce genre de chose maintenant. Il y a aussi lo tableau de bord / underscore est _.partialquand vous n'avez pas besoin ou si vous voulez jouer avec bind« s thisArg.

Un autre moyen qui n'a pas encore été mentionné est l'utilisation de Function.prototype.bind

var funcs = {};
for (var i = 0; i < 3; i++) {
  funcs[i] = function(x) {
    console.log('My value: ' + x);
  }.bind(this, i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();
}

MISE À JOUR

Comme indiqué par @squint et @mekdev, vous obtenez de meilleures performances en créant d'abord la fonction en dehors de la boucle, puis en liant les résultats dans la boucle.

function log(x) {
  console.log('My value: ' + x);
}

var funcs = [];

for (var i = 0; i < 3; i++) {
  funcs[i] = log.bind(this, i);
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}

À l'aide d'une expression de fonction immédiatement invoquée , la manière la plus simple et la plus lisible pour entourer une variable d'index:

for (var i = 0; i < 3; i++) {

    (function(index) {

        console.log('iterator: ' + index);
        //now you can also loop an ajax call here 
        //without losing track of the iterator value:   $.ajax({});
    
    })(i);

}

Cela envoie l'itérateur idans la fonction anonyme que nous définissons comme index. Cela crée une fermeture, où la variable iest enregistrée pour une utilisation ultérieure dans toute fonctionnalité asynchrone au sein de l'IIFE.

Un peu tard pour la fête, mais j'explorais ce problème aujourd'hui et j'ai remarqué que la plupart des réponses ne traitent pas complètement de la façon dont Javascript traite les portées, ce qui est essentiellement ce que cela se résume.

Ainsi, comme beaucoup d'autres l'ont mentionné, le problème est que la fonction interne fait référence à la même ivariable. Alors pourquoi ne créons-nous pas simplement une nouvelle variable locale à chaque itération, et avons-nous la référence de fonction interne à la place?

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    var ilocal = i; //create a new local variable
    funcs[i] = function() {
        console.log("My value: " + ilocal); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

Tout comme auparavant, où chaque fonction interne a sorti la dernière valeur assignée à i, maintenant chaque fonction interne sort juste la dernière valeur assignée à ilocal. Mais chaque itération ne devrait-elle pas avoir la sienne ilocal?

Il s'avère que c'est le problème. Chaque itération partage la même étendue, donc chaque itération après la première n'est que l'écrasement ilocal. De MDN :

Important: JavaScript n'a pas de portée de bloc. Les variables introduites avec un bloc sont étendues à la fonction ou au script conteneur, et les effets de leur définition persistent au-delà du bloc lui-même. En d'autres termes, les instructions de bloc n'introduisent pas de portée. Bien que les blocs "autonomes" soient une syntaxe valide, vous ne voulez pas utiliser de blocs autonomes en JavaScript, car ils ne font pas ce que vous pensez qu'ils font, si vous pensez qu'ils font quelque chose comme de tels blocs en C ou Java.

Réitéré pour souligner:

JavaScript n'a pas de portée de bloc. Les variables introduites avec un bloc sont étendues à la fonction ou au script conteneur

Nous pouvons le voir en vérifiant ilocalavant de le déclarer à chaque itération:

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
  console.log(ilocal);
  var ilocal = i;
}

C'est exactement pourquoi ce bug est si délicat. Même si vous redéclarez une variable, Javascript ne lancera pas d'erreur et JSLint ne lancera même pas d'avertissement. C'est aussi pourquoi la meilleure façon de résoudre ce problème est de tirer parti des fermetures, ce qui est essentiellement l'idée qu'en Javascript, les fonctions internes ont accès aux variables externes car les portées internes "renferment" les portées externes.

Cela signifie également que les fonctions internes "conservent" les variables externes et les maintiennent en vie, même si la fonction externe revient. Pour utiliser cela, nous créons et appelons une fonction wrapper uniquement pour créer une nouvelle portée, déclarons ilocaldans la nouvelle portée et retournons une fonction interne qui utilise ilocal(plus d'explications ci-dessous):

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = (function() { //create a new scope using a wrapper function
        var ilocal = i; //capture i into a local var
        return function() { //return the inner function
            console.log("My value: " + ilocal);
        };
    })(); //remember to run the wrapper function
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

La création de la fonction interne à l'intérieur d'une fonction wrapper donne à la fonction interne un environnement privé auquel elle seule peut accéder, une "fermeture". Ainsi, chaque fois que nous appelons la fonction wrapper, nous créons une nouvelle fonction interne avec son propre environnement séparé, garantissant que les ilocalvariables ne se heurtent pas et ne se remplacent pas. Quelques optimisations mineures donnent la réponse finale que de nombreux autres utilisateurs de SO ont donnée:

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = wrapper(i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}
//creates a separate environment for the inner function
function wrapper(ilocal) {
    return function() { //return the inner function
        console.log("My value: " + ilocal);
    };
}

Mise à jour

Avec ES6 désormais intégré, nous pouvons désormais utiliser le nouveau letmot clé pour créer des variables de portée bloc:

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (let i = 0; i < 3; i++) { // use "let" to declare "i"
    funcs[i] = function() {
        console.log("My value: " + i); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) { // we can use "var" here without issue
    funcs[j]();
}

Regardez comme c'est facile maintenant! Pour plus d'informations, consultez cette réponse , sur laquelle mes informations sont basées.

L'ES6 étant désormais largement pris en charge, la meilleure réponse à cette question a changé. ES6 fournit les mots clés letet constpour cette circonstance exacte. Au lieu de jouer avec les fermetures, nous pouvons simplement utiliser letpour définir une variable d'étendue de boucle comme ceci:

var funcs = [];

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

valpointera ensuite sur un objet spécifique à ce tour particulier de la boucle et renverra la valeur correcte sans la notation de fermeture supplémentaire. Cela simplifie évidemment considérablement ce problème.

const est similaire à let la restriction supplémentaire selon laquelle le nom de variable ne peut pas être renvoyé à une nouvelle référence après l'affectation initiale.

La prise en charge du navigateur est désormais disponible pour ceux qui ciblent les dernières versions des navigateurs. const/ letsont actuellement pris en charge dans les derniers Firefox, Safari, Edge et Chrome. Il est également pris en charge dans Node, et vous pouvez l'utiliser n'importe où en tirant parti d'outils de construction comme Babel. Vous pouvez voir un exemple de travail ici: http://jsfiddle.net/ben336/rbU4t/2/

Documents ici:

• const
• laisser

Attention, cependant, IE9-IE11 et Edge avant la prise en charge d'Edge 14 letmais se trompent (ils n'en créent pas à ichaque fois, donc toutes les fonctions ci-dessus enregistreraient 3 comme si nous les utilisions var). Edge 14 réussit enfin.

Une autre façon de le dire est que le i dans votre fonction est lié au moment de l'exécution de la fonction, pas au moment de la création de la fonction.

Lorsque vous créez la fermeture, i est une référence à la variable définie dans la portée extérieure, et non une copie de celle-ci telle qu'elle était lorsque vous avez créé la fermeture. Il sera évalué au moment de l'exécution.

La plupart des autres réponses fournissent des moyens de contourner le problème en créant une autre variable qui ne changera pas la valeur pour vous.

Je pensais juste ajouter une explication pour plus de clarté. Pour une solution, personnellement, j'irais avec Harto car c'est la façon la plus explicite de le faire à partir des réponses ici. N'importe quel code publié fonctionnera, mais j'opterais pour une usine de fermeture plutôt que d'avoir à écrire une pile de commentaires pour expliquer pourquoi je déclare une nouvelle variable (Freddy et 1800) ou si j'ai une étrange syntaxe de fermeture intégrée (apphacker).

Ce que vous devez comprendre, c'est que la portée des variables en javascript est basée sur la fonction. C'est une différence importante que disons c # où vous avez une portée de bloc, et simplement copier la variable dans une à l'intérieur du for fonctionnera.

L'encapsuler dans une fonction qui évalue le retour de la fonction comme la réponse d'Apphacker fera l'affaire, car la variable a maintenant la portée de la fonction.

Il existe également un mot clé let au lieu de var, qui permettrait d'utiliser la règle d'étendue de bloc. Dans ce cas, définir une variable à l'intérieur du for ferait l'affaire. Cela dit, le mot clé let n'est pas une solution pratique en raison de la compatibilité.

var funcs = {};

for (var i = 0; i < 3; i++) {
  let index = i; //add this
  funcs[i] = function() {
    console.log("My value: " + index); //change to the copy
  };
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}

Voici une autre variante de la technique, similaire à celle de Bjorn (apphacker), qui vous permet d'affecter la valeur de la variable à l'intérieur de la fonction plutôt que de la passer en paramètre, ce qui peut parfois être plus clair:

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

Notez que quelle que soit la technique que vous utilisez, la indexvariable devient une sorte de variable statique, liée à la copie retournée de la fonction interne. C'est-à-dire que les modifications de sa valeur sont conservées entre les appels. Cela peut être très pratique.

Ceci décrit l'erreur courante lors de l'utilisation de fermetures en JavaScript.

Une fonction définit un nouvel environnement

Considérer:

function makeCounter()
{
  var obj = {counter: 0};
  return {
    inc: function(){obj.counter ++;},
    get: function(){return obj.counter;}
  };
}

counter1 = makeCounter();
counter2 = makeCounter();

counter1.inc();

alert(counter1.get()); // returns 1
alert(counter2.get()); // returns 0

Pour chaque makeCounterinvocation, {counter: 0}un nouvel objet est créé. De plus, une nouvelle copie de obj est également créée pour référencer le nouvel objet. Ainsi, counter1etcounter2 sont indépendants les uns des autres.

Fermetures en boucles

L'utilisation d'une fermeture dans une boucle est délicate.

Considérer:

var counters = [];

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = {
      inc: function(){obj.counter++;},
      get: function(){return obj.counter;}
    }; 
  }
}

makeCounters(2);

counters[0].inc();

alert(counters[0].get()); // returns 1
alert(counters[1].get()); // returns 1

Notez que counters[0]et necounters[1] sont pas indépendants. En fait, ils fonctionnent sur le même obj!

En effet, il n'y a qu'une seule copie de objpartagée sur toutes les itérations de la boucle, peut-être pour des raisons de performances. Même si {counter: 0}un nouvel objet est créé à chaque itération, la même copie de objsera simplement mise à jour avec une référence à l'objet le plus récent.

La solution consiste à utiliser une autre fonction d'assistance:

function makeHelper(obj)
{
  return {
    inc: function(){obj.counter++;},
    get: function(){return obj.counter;}
  }; 
}

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = makeHelper(obj);
  }
}

Cela fonctionne parce que les variables locales dans l'étendue de la fonction directement, ainsi que les variables d'argument de fonction, se voient allouer de nouvelles copies à l'entrée.

La solution la plus simple serait,

À la place d'utiliser:

var funcs = [];
for(var i =0; i<3; i++){
    funcs[i] = function(){
        alert(i);
    }
}

for(var j =0; j<3; j++){
    funcs[j]();
}

qui alerte "2", 3 fois. En effet, les fonctions anonymes créées dans la boucle for partagent la même fermeture et, dans cette fermeture, la valeur de iest la même. Utilisez ceci pour empêcher la fermeture partagée:

var funcs = [];
for(var new_i =0; new_i<3; new_i++){
    (function(i){
        funcs[i] = function(){
            alert(i);
        }
    })(new_i);
}

for(var j =0; j<3; j++){
    funcs[j]();
}

L'idée derrière cela est d'encapsuler le corps entier de la boucle for avec une IIFE (Immediateely Invoked Function Expression) et de passer new_ien paramètre et de le capturer en tant que i. Étant donné que la fonction anonyme est exécutée immédiatement, lei valeur est différente pour chaque fonction définie à l'intérieur de la fonction anonyme.

Cette solution semble répondre à un tel problème car elle nécessitera des modifications minimes du code d'origine souffrant de ce problème. En fait, c'est par conception, cela ne devrait pas être un problème du tout!

essayez celui-ci plus court

• pas de tableau

• pas de supplément pour la boucle

for (var i = 0; i < 3; i++) {
    createfunc(i)();
}

function createfunc(i) {
    return function(){console.log("My value: " + i);};
}

http://jsfiddle.net/7P6EN/

Voici une solution simple qui utilise forEach(fonctionne sur IE9):

var funcs = [];
[0,1,2].forEach(function(i) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
})
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

Tirages:

My value: 0
My value: 1
My value: 2

Le principal problème avec le code affiché par l'OP est qu'il in'est jamais lu jusqu'à la deuxième boucle. Pour démontrer, imaginez voir une erreur à l'intérieur du code

funcs[i] = function() {            // and store them in funcs
    throw new Error("test");
    console.log("My value: " + i); // each should log its value.
};

L'erreur ne se produit pas tant qu'elle funcs[someIndex]n'est pas exécutée (). En utilisant cette même logique, il devrait être évident que la valeur de in'est pas non plus collectée avant ce point non plus. Une fois que les finitions de boucle d' origine, i++apporte ià la valeur 3qui se traduit par la condition i < 3défaillante et la boucle sans fin. À ce stade, iest 3et donc quand funcs[someIndex]()est utilisé, eti évalué, il est 3 - à chaque fois.

Pour dépasser cela, vous devez évaluer au ifur et à mesure qu'il se produit. Notez que cela s'est déjà produit sous forme defuncs[i] (où il y a 3 index uniques). Il existe plusieurs façons de capturer cette valeur. La première consiste à le passer en paramètre à une fonction qui est déjà présentée de plusieurs façons ici.

Une autre option consiste à construire un objet fonction qui pourra se refermer sur la variable. Cela peut être accompli ainsi

jsFiddle Demo

funcs[i] = new function() {   
    var closedVariable = i;
    return function(){
        console.log("My value: " + closedVariable); 
    };
};

Les fonctions JavaScript "ferment" la portée à laquelle elles ont accès lors de la déclaration et conservent l'accès à cette portée même lorsque les variables de cette portée changent.

var funcs = []

for (var i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log(i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

Chaque fonction du tableau ci-dessus se ferme sur la portée globale (globale, simplement parce que c'est la portée dans laquelle ils sont déclarés).

Plus tard, ces fonctions sont appelées à enregistrer la valeur la plus récente de idans la portée globale. C'est la magie et la frustration de la fermeture.

"Les fonctions JavaScript se ferment sur la portée dans laquelle elles sont déclarées et conservent l'accès à cette portée même lorsque les valeurs des variables à l'intérieur de cette portée changent."

Utiliser letau lieu de varrésout cela en créant une nouvelle portée à chaque forexécution de la boucle, en créant une portée séparée pour chaque fonction à fermer. Diverses autres techniques font la même chose avec des fonctions supplémentaires.

var funcs = []

for (let i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log(i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

( letrend le bloc de variables limité. Les blocs sont indiqués par des accolades, mais dans le cas de la boucle for, la variable d'initialisation, idans notre cas, est considérée comme déclarée dans les accolades.)

Après avoir lu diverses solutions, j'aimerais ajouter que la raison pour laquelle ces solutions fonctionnent est de s'appuyer sur le concept de chaîne de portée . C'est la façon dont JavaScript résout une variable pendant l'exécution.

• Chaque définition de fonction forme une étendue composée de toutes les variables locales déclarées par varet son arguments.
• Si nous avons une fonction interne définie à l'intérieur d'une autre fonction (externe), cela forme une chaîne et sera utilisé pendant l'exécution
• Lorsqu'une fonction est exécutée, le runtime évalue les variables en recherchant la chaîne de portée . Si une variable peut être trouvée à un certain point de la chaîne, elle arrêtera la recherche et l'utilisera, sinon elle continue jusqu'à ce que la portée globale atteinte à laquelle appartient window.

Dans le code initial:

funcs = {};
for (var i = 0; i < 3; i++) {         
  funcs[i] = function inner() {        // function inner's scope contains nothing
    console.log("My value: " + i);    
  };
}
console.log(window.i)                  // test value 'i', print 3

Une fois funcsexécuté, la chaîne de portée sera function inner -> global. Étant donné que la variable ine peut pas être trouvée dans function inner(ni déclarée à l'aide varni passée comme arguments), elle continue de rechercher, jusqu'à ce que la valeur de isoit finalement trouvée dans la portée globale qui est window.i.

En l'enveloppant dans une fonction externe, définissez explicitement une fonction d'aide comme l'a fait harto ou utilisez une fonction anonyme comme l'a fait Bjorn :

funcs = {};
function outer(i) {              // function outer's scope contains 'i'
  return function inner() {      // function inner, closure created
   console.log("My value: " + i);
  };
}
for (var i = 0; i < 3; i++) {
  funcs[i] = outer(i);
}
console.log(window.i)          // print 3 still

Une fois funcsexécuté, la chaîne de portée le sera désormais function inner -> function outer. Cette heure ipeut être trouvée dans la portée de la fonction externe qui est exécutée 3 fois dans la boucle for, chaque fois que la valeur est iliée correctement. Il n'utilisera pas la valeur de window.il'exécution interne.

Plus de détails peuvent être trouvés ici.
Cela inclut l'erreur courante de créer une fermeture dans la boucle comme ce que nous avons ici, ainsi que la raison pour laquelle nous avons besoin d'une fermeture et de la performance.

Avec les nouvelles fonctionnalités de l'ES6, la portée au niveau du bloc est gérée:

var funcs = [];
for (let i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (let j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

Le code de la question OP est remplacé par letau lieu de var.

Je suis surpris que personne n'ait encore suggéré d'utiliser la forEachfonction pour mieux éviter de (ré) utiliser des variables locales. En fait, je n'utilise for(var i ...)plus du tout pour cette raison.

[0,2,3].forEach(function(i){ console.log('My value:', i); });
// My value: 0
// My value: 2
// My value: 3

// modifié pour utiliser à la forEachplace de la carte.

Cette question montre vraiment l'histoire de JavaScript! Maintenant, nous pouvons éviter la portée des blocs avec les fonctions fléchées et gérer les boucles directement à partir des nœuds DOM à l'aide des méthodes Object.

const funcs = [1, 2, 3].map(i => () => console.log(i));
funcs.map(fn => fn())

const buttons = document.getElementsByTagName("button");
Object
  .keys(buttons)
  .map(i => buttons[i].addEventListener('click', () => console.log(i)));

<button>0</button><br>
<button>1</button><br>
<button>2</button>

La raison pour laquelle votre exemple d'origine n'a pas fonctionné est que toutes les fermetures que vous avez créées dans la boucle faisaient référence au même cadre. En effet, avoir 3 méthodes sur un objet avec une seule ivariable. Ils ont tous imprimé la même valeur.

Tout d'abord, comprenez ce qui ne va pas avec ce code:

var funcs = [];
for (var i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

Ici, lorsque le funcs[]tableau est en cours d'initialisation, iest incrémenté, le funcstableau est initialisé et la taille du functableau devient 3, donc i = 3,. Maintenant, lorsque le funcs[j]()est appelé, il utilise à nouveau la variable i, qui a déjà été incrémentée à 3.

Maintenant, pour résoudre ce problème, nous avons de nombreuses options. En voici deux:

1. Nous pouvons initialiser iavec letou initialiser une nouvelle variable indexavec letet la rendre égale à i. Ainsi, lorsque l'appel est en cours, indexsera utilisé et sa portée se terminera après l'initialisation. Et pour appeler, indexsera à nouveau initialisé:

   var funcs = [];
   for (var i = 0; i < 3; i++) {          
       let index = i;
       funcs[i] = function() {            
           console.log("My value: " + index); 
       };
   }
   for (var j = 0; j < 3; j++) {
       funcs[j]();                        
   }

2. Une autre option peut être d'introduire un tempFuncqui renvoie la fonction réelle:

   var funcs = [];
   function tempFunc(i){
       return function(){
           console.log("My value: " + i);
       };
   }
   for (var i = 0; i < 3; i++) {  
       funcs[i] = tempFunc(i);                                     
   }
   for (var j = 0; j < 3; j++) {
       funcs[j]();                        
   }

Utilisez une structure de fermeture , cela réduirait votre supplément de boucle. Vous pouvez le faire en une seule boucle for:

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

Nous vérifierons ce qui se passe réellement lorsque vous déclarez varet let un par un.

Cas 1 : utilisationvar

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

Ouvrez maintenant la fenêtre de votre console Chrome en appuyant sur F12 et actualisez la page. Développer toutes les 3 fonctions à l'intérieur du tableau.Vous verrez une propriété appelée [[Scopes]].Agrandir celle-ci. Vous verrez un objet tableau appelé "Global", développez-le. Vous trouverez une propriété 'i'déclarée dans l'objet qui a la valeur 3.

Conclusion:

1. Lorsque vous déclarez une variable en utilisant en 'var'dehors d'une fonction, elle devient une variable globale (vous pouvez vérifier en tapant iou window.idans la fenêtre de la console. Elle renverra 3).
2. La fonction annominale que vous avez déclarée n'appellera pas et ne vérifiera pas la valeur à l'intérieur de la fonction, sauf si vous appelez les fonctions.
3. Lorsque vous appelez la fonction, console.log("My value: " + i)prend la valeur de son Globalobjet et affiche le résultat.

CAS2: utilisation de let

Remplacez maintenant le 'var'par'let'

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

Faites la même chose, allez dans les étendues. Vous verrez maintenant deux objets "Block"et "Global". Maintenant, développez l' Blockobjet, vous verrez que «i» y est défini, et l'étrange est que, pour chaque fonction, la valeur if iest différente (0, 1, 2).

Conclusion:

Lorsque vous déclarez une variable en utilisant 'let'même en dehors de la fonction mais à l'intérieur de la boucle, cette variable ne sera pas une variable globale, elle deviendra une Blockvariable de niveau qui n'est disponible que pour la même fonction. C'est la raison pour laquelle nous obtenons une valeur idifférente pour chaque fonction lorsque nous invoquons les fonctions.

Pour plus de détails sur le fonctionnement plus proche, veuillez consulter le didacticiel vidéo génial https://youtu.be/71AtaJpJHw0

Vous pouvez utiliser un module déclaratif pour les listes de données telles que query-js (*). Dans ces situations, je trouve personnellement une approche déclarative moins surprenante

var funcs = Query.range(0,3).each(function(i){
     return  function() {
        console.log("My value: " + i);
    };
});

Vous pouvez ensuite utiliser votre deuxième boucle et obtenir le résultat attendu ou vous pouvez le faire

funcs.iterate(function(f){ f(); });

(*) Je suis l'auteur de query-js et donc partisan de son utilisation, alors ne prenez pas mes mots comme recommandation pour ladite bibliothèque uniquement pour l'approche déclarative :)

Je préfère utiliser la forEachfonction, qui a sa propre fermeture avec la création d'une pseudo-plage:

var funcs = [];

new Array(3).fill(0).forEach(function (_, i) { // creating a range
    funcs[i] = function() {            
        // now i is safely incapsulated 
        console.log("My value: " + i);
    };
});

for (var j = 0; j < 3; j++) {
    funcs[j](); // 0, 1, 2
}

Cela semble plus laid que les gammes dans d'autres langues, mais à mon humble avis moins monstrueux que d'autres solutions.

Et encore une autre solution: au lieu de créer une autre boucle, liez simplement le thisà la fonction de retour.

var funcs = [];

function createFunc(i) {
  return function() {
    console.log('My value: ' + i); //log value of i.
  }.call(this);
}

for (var i = 1; i <= 5; i++) {  //5 functions
  funcs[i] = createFunc(i);     // call createFunc() i=5 times
}

En liant cela , résout également le problème.

De nombreuses solutions semblent correctes, mais elles ne mentionnent pas son nom, Curryingqui est un modèle de conception de programmation fonctionnelle pour des situations comme ici. 3 à 10 fois plus rapide que bind en fonction du navigateur.

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = curryShowValue(i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

function curryShowValue(i) {
  return function showValue() {
    console.log("My value: " + i);
  }
}

Voir le gain de performances dans différents navigateurs .

Votre code ne fonctionne pas, car il fait:

Create variable `funcs` and assign it an empty array;  
Loop from 0 up until it is less than 3 and assign it to variable `i`;
    Push to variable `funcs` next function:  
        // Only push (save), but don't execute
        **Write to console current value of variable `i`;**

// First loop has ended, i = 3;

Loop from 0 up until it is less than 3 and assign it to variable `j`;
    Call `j`-th function from variable `funcs`:  
        **Write to console current value of variable `i`;**  
        // Ask yourself NOW! What is the value of i?

Maintenant, la question est, quelle est la valeur de variable ilorsque la fonction est appelée? Étant donné que la première boucle est créée avec la condition de i < 3, elle s'arrête immédiatement lorsque la condition est fausse, ce qui est le cas i = 3.

Vous devez comprendre que, au moment où vos fonctions sont créées, aucun de leur code n'est exécuté, il n'est enregistré que pour plus tard. Et donc quand ils sont appelés plus tard, l'interprète les exécute et demande: "Quelle est la valeur actuelle de i?"

Ainsi, votre objectif est d'enregistrer d'abord la valeur de ipour fonctionner et uniquement après cela, d'enregistrer la fonction dans funcs. Cela pourrait être fait par exemple de cette façon:

var funcs = [];
for (var i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function(x) {            // and store them in funcs
        console.log("My value: " + x); // each should log its value.
    }.bind(null, i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

De cette façon, chaque fonction aura sa propre variable xet nous la mettons xà la valeur de idans chaque itération.

Ce n'est qu'une des multiples façons de résoudre ce problème.

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function(param) {          // and store them in funcs
    console.log("My value: " + param); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](j);                      // and now let's run each one to see with j
}

Utilisez let (portée bloquée) au lieu de var.

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