javascript cierre y el alcance de la cadena de ejemplo

Question

Alguien puede explicar a mí (de forma clara y concisa) ¿por qué este código funciona de la manera que lo hace?Yo vengo de un establecimiento inflexible de tipos de fondo en Java (6 y 7), donde los cierres no existen y no funcionar de la manera que lo hacen en javascript.Creo que los conceptos relacionados con este tema son:los cierres y el alcance de la cadena.

Aquí está el ejemplo:

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

El ejemplo anterior de los registros de 9 (10 veces), pero la expectativa y mi propia intuición estaba pensando que sería de registro de 0-9.

¿Por qué funciona esto de la manera que lo hace en Javascript?Los cierres son muy poderosos, pero estoy tratando de entender el concepto de una vez y para siempre!Modificado ligeramente el ejemplo produce la salida derecha, pero ¿por qué?

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

Los cierres no son únicos a Javascript, pero quiero ver por qué ellos son poderosos en el contexto de cuando javascript está actaully escrito a la interfaz con el navegador/dom.

¿Alguien tiene una buena, ejemplos prácticos de cómo podemos aplicar el cierre de la técnica al interactuar con el navegador/dom?

Gracias.

Answer 1

En los ejemplos que usted tiene, es muy simple.

En el primer ejemplo, sólo hay una variable i y todo lo que hace referencia a que solo valor.Así que..se imprime el número de 9 diez veces.Cada función capturado un compartido valor de i que cambios.

En el segundo ejemplo utiliza un cierre.Cada función tiene una variable privada llamada index el que recibe-y aquí está la parte importante-un copia de el valor i.

Así que se puede obtener 0 a través de 9 porque hay diez funciones, cada uno con un privado index variable y cada uno de los index las variables de obtener una instantánea de la i tal como existía en el momento.

Esto, más la forma de un cierre, pueden ayudar:

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