javascript cierre y el alcance de la cadena de ejemplo
-
21-12-2019 - |
Pregunta
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.
Solución
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(); });