Perché lasciare e le associazioni var si comportano diversamente usando la funzione setTimeout?

Question

Questo codice tronchi 6, 6 volte:

(function timer() { 
    for (var i=0; i<=5; i++) { 
    setTimeout(function clog() {console.log(i)}, i*1000); 
    } 
})(); 

ma questo codice ...

(function timer() { 
    for (let i=0; i<=5; i++) { 
    setTimeout(function clog() {console.log(i)}, i*1000); 
    } 
})(); 

... registra il seguente risultato:

0 
1 
2 
3 
4 
5 

Perché?

E 'perché let si collega allo scope interno ogni elemento in modo diverso e var mantiene l'ultimo valore di i?

Answer 1

Con var si dispone di un insieme di funzioni, e solo uno condiviso vincolante per tutte le vostre iterazioni del ciclo - cioè la i in ogni callback setTimeout significa stesso variabile che finalmente è uguale a 6 dopo il ciclo l'iterazione finisce.

Con let si ha un campo di applicazione blocco e quando viene utilizzato nel ciclo for si ottiene un nuovo vincolante per ogni iterazione - ossia la i in ogni callback setTimeout mezzi un diverso variabile, ciascuno dei quali ha un valore diverso : il primo è 0, il prossimo è 1 ecc

Quindi questo:

(function timer() { 
    for (let i = 0; i <= 5; i++) { 
    setTimeout(function clog() { console.log(i); }, i * 1000); 
    } 
})(); 

è equivalente a questo utilizzando solo var:

(function timer() { 
    for (var j = 0; j <= 5; j++) { 
    (function() { 
     var i = j; 
     setTimeout(function clog() { console.log(i); }, i * 1000); 
    }()); 
    } 
})(); 

utilizzando l'espressione di funzione immediatamente invocata per utilizzare l'ambito di funzione in un modo simile a come l'ambito di blocco funziona nell'esempio con let.

Potrebbe essere scritto più breve senza utilizzare il nome j, ma forse non sarebbe più chiaro:

(function timer() { 
    for (var i = 0; i <= 5; i++) { 
    (function (i) { 
     setTimeout(function clog() { console.log(i); }, i * 1000); 
    }(i)); 
    } 
})(); 

E anche più breve con funzioni di direzione:

(() => { 
    for (var i = 0; i <= 5; i++) { 
    (i => setTimeout(() => console.log(i), i * 1000))(i); 
    } 
})(); 

(ma se si può usa le funzioni freccia, non c'è motivo di usare var.)

Ecco come Babel.js traduce il tuo esempio con.210 per l'esecuzione in ambienti in cui non è disponibile let:

"use strict"; 

(function timer() { 
    var _loop = function (i) { 
    setTimeout(function clog() { 
     console.log(i); 
    }, i * 1000); 
    }; 

    for (var i = 0; i <= 5; i++) { 
    _loop(i); 
    } 
})(); 

Grazie a Michael Geary per la pubblicazione il link al Babel.js nei commenti. Vedere il link nel commento per una demo dal vivo in cui è possibile modificare qualsiasi cosa nel codice e guardare la traduzione che si svolge immediatamente. È interessante vedere come vengono tradotte anche le altre funzionalità di ES6.

Answer 2

Tecnicamente è come @rsp spiega nella sua eccellente risposta. Questo è il modo in cui mi piace capire che le cose funzionano sotto il cofano.Per il primo blocco di codice utilizzando var

(function timer() { 
    for (var i=0; i<=5; i++) { 
    setTimeout(function clog() {console.log(i)}, i*1000); 
    } 
})(); 

si può immaginare il compilatore va in questo modo all'interno del ciclo for

setTimeout(function clog() {console.log(i)}, i*1000); // first iteration, remember to call clog with value i after 1 sec 
setTimeout(function clog() {console.log(i)}, i*1000); // second iteration, remember to call clog with value i after 2 sec 
setTimeout(function clog() {console.log(i)}, i*1000); // third iteration, remember to call clog with value i after 3 sec 

e così via

dal i viene dichiarato utilizzando var, quando clog viene chiamato, il compilatore trova la variabile i nel blocco funzione più vicino che è timer e poiché abbiamo già raggiunto la fine dello 0 Il ciclo, i contiene il valore 6 ed esegue clog. Ciò spiega che sei registrato sei volte.