javascript fermeture et la portée de la chaîne d'exemple

Question

Quelqu'un peut m'expliquer (de façon claire et concise) pourquoi ce code fonctionne de la manière qu'il le fait?Je viens d'un fort arrière-plan en Java (6 et 7) où les fermetures n'existent pas et ne fonctionnent pas comme ils le font en javascript.Je pense que les concepts liés à cette question sont:des fermetures et de la portée de la chaîne.

Voici l'exemple:

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = function() { console.log(i); }
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); });

L'exemple ci-dessus journaux 9 (10 fois), mais l'attente et mon intuition était la pensée qu'il pourrait ouvrir une session 0-9.

Pourquoi ce travail de la manière qu'il le fait en Javascript?Les fermetures sont très puissants, mais j'essaie de saisir le concept une fois et pour de bon!Légèrement modifié pour exemple donne le droit de sortie, mais pourquoi?

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = (function(index) { console.log(index); })(i);
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); }); 

Les fermetures ne sont pas uniques à Javascript, mais je veux voir pourquoi ils sont puissants dans le contexte de quand le javascript est actaully écrit à l'interface avec le navigateur/dom.

Quelqu'un aurait-il des bonnes pratiques, des exemples de la façon dont nous pouvons appliquer la fermeture de la technique lors de l'interfaçage avec le navigateur/dom?

Merci.

Answer 1

Dans les exemples que vous avez, il est très simple.

Dans ton premier exemple, il y a une seule variable i et tout ce que les références que seule valeur.Donc..il imprime le numéro 9 dix fois.Chaque fonction a capturé un partagé la valeur de i que de changements.

Dans le deuxième exemple, vous êtes à l'aide d'une fermeture.Chaque fonction dispose d'une salle de variable appelée index qui reçoit -- et là c'est la partie importante -- un copie de la valeur i.

Ainsi, vous obtenez 0 par le biais de 9 parce qu'il y a dix fonctions, chacune avec une salle de index variable et chacun de ces index les variables d'obtenir un aperçu de i comme il existait à l'époque.

Cela, plus la forme d'une fermeture, peut vous aider:

function myFactory(index) {
  return function() {
    console.log(index);
  }
}

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = myFactory(i);
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); });