Explique los cierres o enlace del contador de bucles al alcance de la función

Question

He visto programadores asignar eventos oyentes dentro de bucles, utilizando el contador. Creo que esta es la sintaxis:

for(var i=0; i < someArray.length; i++){ 
    someArray[i].onclick = (function(i){/* Some code using i */})(i); 
} 

Podría alguien explicar la lógica detrás de esto, y esta sintaxis extraña, nunca he visto esto:

(function(i))(i); 

Muchas gracias por su tiempo y paciencia.

Answer 1

Esto se hace porque JavaScript solo tiene alcance de función, no alcance del bloque. Por lo tanto, cada variable que declare en un bucle está en el alcance de la función y cada cierre que cree tiene acceso a la misma variable.

Así que la única manera de crear un nuevo ámbito es llamar a una función y eso es lo que

(function(i){/* Some code using i */}(i)) 

está haciendo.

en cuenta que su ejemplo se pierde una parte importante: La función inmediata tiene que volver otra función que será el manejador de click:

someArray[i].onclick = (function(i){ 
    return function() { 
     /* Some code using i */ 
    } 
}(i)); 

La función inmediata es nada especial. De alguna manera, está definiendo la definición de función y la llamada a función. Puede reemplazarlo por una llamada a función normal:

function getClickHandler(i) { 
    return function() { 
     /* Some code using i */ 
    } 
} 

for(var i=0; i < someArray.length; i++){ 
    someArray[i].onclick = getClickHandler(i); 
} 

Answer 2

La sintaxis (function(i))(i) crea una función anónima y luego la ejecuta de inmediato.

Normalmente, hará esto para crear una función nueva cada vez que pasa el ciclo, que tiene su propia copia de la variable en lugar de que cada controlador de eventos comparta la misma variable.

Así, por ejemplo:

for(int i = 0; i < 10; i++) 
    buttons[i].click = function() { doFoo(i); }; 

normalmente toma a la gente, porque no importa lo que se hace clic en el botón, se llama doFoo(10).

Considerando lo siguiente:

for(int i = 0; i < 10; i++) 
    buttons[i].click = (function(i){ return function() { doFoo(i); };)(i); 

crea una nueva instancia de la función interna (con su propio valor de i) para cada iteración, y funciona como se esperaba.