Esempio di chiusura di chiusura e portata JavaScript

Question

Qualcuno può spiegarmi (in modo chiaro e conciso) perché questo codice funziona come lo fa? Vengo da uno sfondo fortemente digitato in Java (6 e 7) dove le chiusure non esistono e non funzionano il modo in cui lo fanno in JavaScript. Penso che i concetti relativi a questa domanda siano: chiusure e catena dell'ambito.

Ecco l'esempio:

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'esempio sopra registrazione 9 (10 volte), ma l'aspettativa e la mia intuizione pensavano che avrebbe registrato 0-9.

Perché questo funziona come fa in JavaScript? Le chiusure sono molto potenti, ma sto cercando di cogliere il concetto una volta per sempre! Un esempio leggermente modificato produce l'uscita giusta, ma perché?

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(); }); 

.

Le chiusure non sono uniche per JavaScript, ma voglio vedere perché sono potenti nel contesto di quando JavaScript è scritto azionalmente scritto per l'interfaccia con il browser / Dom.

Qualcuno ha buoni e pratici esempi di come possiamo applicare la tecnica di chiusura quando si interfaccia con il browser / DOM?

Grazie.

Answer 1

Negli esempi che hai, è molto semplice.

Nel primo esempio, c'è solo una variabile i e tutto ciò riferisce che un valore singolo.Quindi .. stampa il numero 9 dieci volte.Ogni funzione ha acquisito un valore condiviso del i che cambia.

Nel secondo esempio stai usando una chiusura.Ogni funzione ha una variabile privata chiamata indexTagCode che riceve - ed ecco la parte importante - A Copia del valore i.

Allora, si ottiene 0 attraverso 9 perché ci sono dieci funzioni, ognuna con una variabile privata index e ciascuna di quelle variabili index ottengono un'istantanea di i come esisteva al momento.

.

Questa, una forma più lunga di chiusura, può aiutare:

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(); }); 

.