¿Cómo paso el valor (no la referencia) de una variable JS a una función?

Question

Aquí es una versión simplificada de algo que estoy tratando de correr:

for (var i = 0; i < results.length; i++) { 
    marker = results[i]; 
    google.maps.event.addListener(marker, 'click', function() { 
     change_selection(i); 
    }); 
} 

pero estoy encontrando que cada oyente utiliza el valor de results.length (el valor cuando el bucle termina). ¿Cómo puedo agregar oyentes de modo que cada uno use el valor de i en el momento en que lo agregue, en lugar de la referencia a i?

Answer 1

Es necesario crear un ámbito separado que guarda la variable en su estado actual pasándolo como un parámetro de función:

for (var i = 0; i < results.length; i++) { 
    (function (i) { 
    marker = results[i]; 
    google.maps.event.addListener(marker, 'click', function() { 
     change_selection(i); 
    }); 
    })(i); 
} 

Al crear una función anónima y llamándola con la variable como primer argumento, está pasando de valor a la función y creando un cierre.

Answer 2

Estás terminando con un cierre. Here's an article on closures y cómo trabajar con ellos. Vea el Ejemplo 5 en la página; ese es el escenario con el que estás lidiando.

EDITAR: Cuatro años después, ese enlace está muerto. La raíz del problema anterior es que el bucle for forma cierres (específicamente en marker = results[i]). Como se pasa al addEventListener, verá el efecto secundario del cierre: el "entorno" compartido se actualiza con cada iteración del ciclo, antes de que finalmente se "guarde" a través del cierre después de la iteración final. MDN explains this very well.

Answer 3

cierres:

for (var i = 0, l= results.length; i < l; i++) { 
    marker = results[i]; 
    (function(index){ 
     google.maps.event.addListener(marker, 'click', function() { 
      change_selection(index); 
     }); 
    })(i); 
} 

Edición, 2013: Estos ahora se conoce comúnmente como un IIFE

Answer 4

Además de los cierres, puede utilizar function.bind:

google.maps.event.addListener(marker, 'click', change_selection.bind(null, i)); 

pasa el valor de i i n como un argumento para la función cuando se llama. (null es para la unión this, lo que no es necesario en este caso.)

function.bind se introdujo en el marco del prototipo y ha sido estandarizado en ECMAScript Quinta edición. Hasta navegadores todo lo soportan de forma nativa, se puede añadir sus propias function.bind admite el uso de cierres:

if (!('bind' in Function.prototype)) { 
    Function.prototype.bind= function(owner) { 
     var that= this; 
     var args= Array.prototype.slice.call(arguments, 1); 
     return function() { 
      return that.apply(owner, 
       args.length===0? arguments : arguments.length===0? args : 
       args.concat(Array.prototype.slice.call(arguments, 0)) 
      ); 
     }; 
    }; 
} 

Answer 5

Creo que podemos definir una variable temporal para almacenar el valor de i.

for (var i = 0; i < results.length; i++) { 
var marker = results[i]; 
var j = i; 
google.maps.event.addListener(marker, 'click', function() { 
    change_selection(j); 
}); 
} 

No lo he probado.

Answer 6

for (var i = 0; i < results.length; i++) { 
    marker = results[i]; 
    google.maps.event.addListener(marker, 'click', (function(i) { 
     return function(){ 
      change_selection(i); 
     } 
    })(i)); 
}