TypeScript 'let'-variabel och asynkront anrop

Jag är ny på TypeScript och stötte på detta exempel:

for (let i = 0; i < 10 ; i++) {
    setTimeout(function() {console.log(i); }, 100 * i);
}

utdata: 1,2,3,4,5,6,7,8,9,10

Men

for (var i = 0; i < 10 ; i++) {
    setTimeout(function() {console.log(i); }, 100 * i);
}

utdata : 10,10,10,10,10,10,10,10,10,10

Kan någon förklara anledningen, tack?

Svar #1

detta beror på skillnaden i omfattning

det beror på skillnaden i scopingen mellan var och let. Första gången timeouten faktiskt kan slutföra console.log, har i redan ändrats av loopen till 10. (I princip staplar du console.logs med olika timeouts, de kommer bara att köras när tiden är slut).

Med let, som är begränsad till blocket, tar i värdet inuti console.log (eftersom det är begränsat till det block från vilket det anropades). Med andra ord, så snart det stötte på denna kod blev variabeln 'begränsad' till funktionen inuti din timeout. Detta innebär att även om loopen ändrade variabeln 'i' utanför den, ändrade det inte variabeln i funktionen.

Svar #2

@DylanMeeus har rätt i att det är ett problem med scopning/closure. För att hjälpa till att visualisera detta, är detta vad användning av "let" kompileras till i es5:

var _loop_1 = function(i) {
    setTimeout(function () { console.log(i); }, 100 * i);
};
for (var i = 0; i < 10; i++) {
    _loop_1(i);
}

Observera att i i _loop_1 är en ny talinstans.