O nome do conceito que está te causando confusão é closure ("clausura" em português, mas esse termo é raramente utilizado), e se refere à forma como funções definidas dentro de um "contexto léxico" (i.e. o corpo de uma função, um bloco, um arquivo fonte) acessam variáveis definidas nesse contexto.
Em JavaScript, apenas funções definem um novo contexto léxico (outras linguagens têm regras diferentes - algumas sequer suportam o conceito de closure):
var a = 10; // Mesmo "a" para script1.js, script2.js, etc (efetivamente, uma global)
function f() {
var b = 20; // Um "b" diferente para cada invocação de f
if ( x ) {
var c = 30; // Mesmo "c" dentro e fora do if (i.e. o contexto é "f", não o bloco if)
E cada novo contexto criado dentro (inner) de um contexto já existente tem acesso a todas as variáveis definidas no "de fora" (outer):
function x(a1) { // "x" tem acesso a "a"
var a2;
function y(b1) { // "y" tem acesso a "a" e "b"
var b2;
function z(c1) { // "z" tem acesso a "a", "b", e "c"
var c2;
É importante observar que não importa quando a função interna irá executar, nem qual o valor as variáveis externas tinham no momento em que o objeto função foi criado (em contraste com a definição da função, que é em tempo de compilação/interpretação). O que importa é que ambas compartilham a mesma variável, e escritas de um lado refletirão nas leituras do outro e vice-versa.
No seu caso, você está criando uma nova função (anônima) dentro do contexto léxico do código externo (outra função? corpo do script?), e ela compartilha a variável i
(e não o valor de i
). No momento que essa função é executada, o laço for
já alterou seu valor várias vezes, levando-a ao seu valor máximo (50
) e é isso que a função interna vai acessar. Se o código externo modificasse ou reutilizasse i
para outros propósitos, isso também se refletiria na função interna (e da mesma forma, se um dos objetos-função alterasse esse i
isso interferiria nos outros também).
Existem várias maneiras de se modificar o código para se atingir o comportamento desejado (i.e. um i
diferente para cada objeto-função) - como já apontado por @Sergio - mas a minha preferida é aquela que torna a natureza do closure mais explícita (ainda que pareça visualmente "estranha" para quem não está familiarizado com o conceito):
for (var i = 0; i < 50; i++) {
(function(i) {
setTimeout(function() {
textArea.value += 'Mensagem ' + i + '\n';
textArea.scrollTop = textArea.scrollHeight;
}, 100 * i);
})(i);
}
Note que o i
argumento da função anônima não é o mesmo i
passado como parâmetro para a mesma - uma vez que estão em contextos léxicos diferentes. Também cabe ressaltar que a variável textArea
ainda está vindo do contexto externo, e dependendo do caso pode ser interessante incluí-la no closure também:
(function(i, textArea) { ... })(i, textArea);
Isso garante que - ainda que essa variável tenha seu valor alterado (i.e. aponte para um elemento diferente) - a função interna ainda tenha acesso ao valor que ela tinha no momento em que o loop foi executado.