javascript: localizzare le variabili nel blocco

Question

cerco di capire la portata variabile in Javascript. Ecco quello che sto facendo:

<script> 
for (var i = 0; i < 3; i++) { 
    document.getElementById(i).onclick = function() { 
    console.log(i); 
    } 
} 
</script> 

L'uscita è sempre 3, e capisco che è perché i è stata mantenuta per riferimento. Come faccio a localizzare i in modo che possa registrare il valore incrementato?

Grazie!

aggiornamento

Grazie ragazzi per risposte rapide e decente. le soluzioni sono davvero d'aiuto!

Inizialmente, stavo cercando un approccio simile a @GrailsGuy, eccolo:

<script> 
for (var i = 1; i <= 3; i++) { 
    document.getElementById(i).onclick = function() { 
     console.log(logCall(i)); 
    } 
} 
function logCall(i) { 
    return i; 
} 
</script> 

ma sembra i non viene localizzato. Non riesco a capire perché!

Answer 1

creare un nuovo ambito

for (var i = 0; i < 3; i++) { 
    (function(i) { 
    document.getElementById(i).onclick = function() { 
     console.log(i); 
    } 
    }(i)); 
} 

Answer 2

in JavaScript, campo di applicazione non è stato creato da parentesi (contrari alla sintassi C-like). Scope è però, creato nel funzioni, in modo un modo è quello di estrarre la chiamata in una funzione (aggiornato):

<script> 
for (var i = 0; i < 3; i++) { 
    logCall(i); 
} 

function logCall(i) { 
    document.getElementById(i).onclick = function() { 
     console.log(i); 
    } 
} 
</script> 

Questo ha il vantaggio di rendere il codice di un po 'più riutilizzabile.