Fechamentos de JavaScript vs. funções anônimas

Um amigo meu e eu estamos discutindo o que é um fechamento em JS e o que não é. Nós apenas queremos ter certeza de que realmente entendemos corretamente.

Vamos pegar este exemplo. Temos um loop de contagem e queremos imprimir a variável do contador no console atrasada. Portanto, usamos setTimeoute closures para capturar o valor da variável do contador para garantir que ela não imprima N vezes o valor N.

A solução errada sem fechamentos ou qualquer coisa próxima a fechamentos seria:

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

que obviamente imprimirá 10 vezes o valor de iapós o loop, ou seja, 10.

Então, sua tentativa foi:

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

imprimindo de 0 a 9 conforme o esperado.

Eu disse a ele que ele não está usando um fechamento para capturar i, mas ele insiste que está. Eu provei que ele não usa fechamentos colocando o corpo do loop for dentro de outro setTimeout(passando sua função anônima para setTimeout), imprimindo 10 vezes 10 novamente. O mesmo se aplica se eu armazenar sua função em a vare executá-la após o loop, também imprimindo 10 vezes 10. Portanto, meu argumento é que ele realmente não captura o valori , tornando sua versão não um fechamento.

Minha tentativa foi:

for(var i = 0; i < 10; i++) {
    setTimeout((function(i2){
        return function() {
            console.log(i2);
        }
    })(i), 1000);
}

Então eu capturo i(nomeado i2dentro do fechamento), mas agora retorno outra função e passo adiante. No meu caso, a função passada para setTimeout realmente captura i.

Agora quem está usando fechos e quem não está?

Observe que as duas soluções imprimem de 0 a 9 no console atrasadas, portanto resolvem o problema original, mas queremos entender qual dessas duas soluções usa fechamentos para fazer isso.

Nota do Editor: Todas as funções em JavaScript são encerramentos, conforme explicado nesta publicação . No entanto, estamos interessados ​​apenas em identificar um subconjunto dessas funções que são interessantes do ponto de vista teórico. Doravante, qualquer referência à palavra encerramento se referirá a este subconjunto de funções, a menos que indicado de outra forma.

Uma explicação simples para fechamentos:

1. Tome uma função. Vamos chamá-lo de F.
2. Liste todas as variáveis ​​de F.
3. As variáveis ​​podem ser de dois tipos:
   1. Variáveis ​​locais (variáveis ​​ligadas)
   2. Variáveis ​​não locais (variáveis ​​livres)
4. Se F não tiver variáveis ​​livres, não poderá ser um fechamento.
5. Se F tem nenhum variáveis livres (que são definidas em um escopo pai de F) em seguida:
   1. Deve haver apenas um escopo pai de F ao qual uma variável livre está vinculada.
   2. Se F for referenciado fora desse escopo pai, ele se tornará um fechamento para essa variável livre.
   3. Essa variável livre é chamada de valor superior do fechamento F.

Agora vamos usar isso para descobrir quem usa fechamentos e quem não usa (por uma questão de explicação, nomeei as funções):

Caso 1: Programa do seu amigo

for (var i = 0; i < 10; i++) {
    (function f() {
        var i2 = i;
        setTimeout(function g() {
            console.log(i2);
        }, 1000);
    })();
}

No programa acima, existem duas funções: fe g. Vamos ver se são fechamentos:

Para f:

1. Liste as variáveis:
   1. i2é uma variável local .
   2. ié uma variável livre .
   3. setTimeouté uma variável livre .
   4. gé uma variável local .
   5. consoleé uma variável livre .
2. Encontre o escopo pai ao qual cada variável livre está vinculada:
   1. iestá vinculado ao escopo global.
   2. setTimeoutestá vinculado ao escopo global.
   3. consoleestá vinculado ao escopo global.
3. Em qual escopo a função é referenciada ? O escopo global .
   1. Portanto, inão é fechado por f.
   2. Portanto, setTimeoutnão é fechado por f.
   3. Portanto, consolenão é fechado por f.

Portanto, a função fnão é um fechamento.

Para g:

1. Liste as variáveis:
   1. consoleé uma variável livre .
   2. i2é uma variável livre .
2. Encontre o escopo pai ao qual cada variável livre está vinculada:
   1. consoleestá vinculado ao escopo global.
   2. i2está vinculado ao escopo de f.
3. Em qual escopo a função é referenciada ? O escopo desetTimeout .
   1. Portanto, consolenão é fechado por g.
   2. Portanto, i2é fechado por g.

Portanto, a função gé um fechamento para a variável livre i2(que é um valor superior g) quando é referenciada de dentro setTimeout.

Ruim para você: seu amigo está usando um fechamento. A função interna é um fechamento.

Caso 2: seu programa

for (var i = 0; i < 10; i++) {
    setTimeout((function f(i2) {
        return function g() {
            console.log(i2);
        };
    })(i), 1000);
}

No programa acima, existem duas funções: fe g. Vamos ver se são fechamentos:

Para f:

1. Liste as variáveis:
   1. i2é uma variável local .
   2. gé uma variável local .
   3. consoleé uma variável livre .
2. Encontre o escopo pai ao qual cada variável livre está vinculada:
   1. consoleestá vinculado ao escopo global.
3. Em qual escopo a função é referenciada ? O escopo global .
   1. Portanto, consolenão é fechado por f.

Portanto, a função fnão é um fechamento.

Para g:

1. Liste as variáveis:
   1. consoleé uma variável livre .
   2. i2é uma variável livre .
2. Encontre o escopo pai ao qual cada variável livre está vinculada:
   1. consoleestá vinculado ao escopo global.
   2. i2está vinculado ao escopo de f.
3. Em qual escopo a função é referenciada ? O escopo desetTimeout .
   1. Portanto, consolenão é fechado por g.
   2. Portanto, i2é fechado por g.

Portanto, a função gé um fechamento para a variável livre i2(que é um valor superior g) quando é referenciada de dentro setTimeout.

Bom para você: você está usando um fechamento. A função interna é um fechamento.

Então você e seu amigo estão usando fechos. Pare de argumentar. Espero ter esclarecido o conceito de fechamento e como identificá-lo para vocês dois.

Edit: Uma explicação simples de por que todos os fechamentos de funções (créditos @ Peter):

Primeiro, vamos considerar o seguinte programa (é o controle ):

lexicalScope();

function lexicalScope() {
    var message = "This is the control. You should be able to see this message being alerted.";

    regularFunction();

    function regularFunction() {
        alert(eval("message"));
    }
}

1. Sabemos que ambos lexicalScopee regularFunctionnão são fechamentos da definição acima .
2. Quando executamos o programa , esperamos message ser alertados porque regularFunction não é um fechamento (ou seja, ele tem acesso a todas as variáveis ​​em seu escopo pai - inclusive message).
3. Quando executamos o programa , observamos que ele messageé realmente alertado.

Em seguida, vamos considerar o seguinte programa (é a alternativa ):

var closureFunction = lexicalScope();

closureFunction();

function lexicalScope() {
    var message = "This is the alternative. If you see this message being alerted then in means that every function in JavaScript is a closure.";

    return function closureFunction() {
        alert(eval("message"));
    };
}

1. Sabemos que apenas closureFunctioné um fechamento da definição acima .
2. Quando executamos o programa , esperamos message não ser alertados porque closureFunction é um fechamento (ou seja, ele só tem acesso a todas as suas variáveis ​​não locais no momento em que a função é criada ( veja esta resposta ) - isso não inclui message).
3. Quando executamos o programa , observamos que messagerealmente está sendo alertado.

O que deduzimos disso?

1. Os intérpretes JavaScript não tratam os fechamentos de maneira diferente da maneira como tratam outras funções.
2. Toda função carrega sua cadeia de escopo junto com ela. Os fechamentos não têm um ambiente de referência separado .
3. Um fechamento é como qualquer outra função. Apenas os chamamos de fechamento quando são referenciados em um escopo fora do escopo ao qual eles pertencem, porque este é um caso interessante.

De acordo com a closuredefinição:

Um "fechamento" é uma expressão (normalmente uma função) que pode ter variáveis ​​livres juntamente com um ambiente que liga essas variáveis ​​(que "fecha" a expressão).

Você está usando closurese definir uma função que utilize uma variável definida fora da função. (chamamos a variável de variável livre ).
Todos eles usam closure(mesmo no 1º exemplo).

Em poucas palavras JavaScript Closures permitem uma função para acessar uma variável que é declarada em uma função lexical-pai .

Vamos ver uma explicação mais detalhada. Para entender os fechamentos, é importante entender como o JavaScript define as variáveis.

Escopos

No JavaScript, os escopos são definidos com funções. Toda função define um novo escopo.

Considere o seguinte exemplo;

function f()
{//begin of scope f
  var foo='hello'; //foo is declared in scope f
  for(var i=0;i<2;i++){//i is declared in scope f
     //the for loop is not a function, therefore we are still in scope f
     var bar = 'Am I accessible?';//bar is declared in scope f
     console.log(foo);
  }
  console.log(i);
  console.log(bar);
}//end of scope f

chamando f impressões

hello
hello
2
Am I Accessible?

Vamos agora considerar o caso de termos uma função gdefinida dentro de outra função f.

function f()
{//begin of scope f
  function g()
  {//being of scope g
    /*...*/
  }//end of scope g
  /*...*/
}//end of scope f

Vamos chamar fo pai lexical de g. Como explicado antes, agora temos 2 escopos; o escopo fe o escopo g.

Mas um escopo está "dentro" do outro, então o escopo da função filho faz parte do escopo da função pai? O que acontece com as variáveis ​​declaradas no escopo da função pai; poderei acessá-los no escopo da função filho? É exatamente aí que os fechamentos entram em cena.

Encerramentos

Em JavaScript, a função gnão pode acessar apenas as variáveis ​​declaradas no escopo, gmas também acessar as variáveis ​​declaradas no escopo da função pai f.

Considere seguir;

function f()//lexical parent function
{//begin of scope f
  var foo='hello'; //foo declared in scope f
  function g()
  {//being of scope g
    var bar='bla'; //bar declared in scope g
    console.log(foo);
  }//end of scope g
  g();
  console.log(bar);
}//end of scope f

chamando f impressões

hello
undefined

Vamos olhar para a linha console.log(foo);. Neste ponto, estamos no escopo ge tentamos acessar a variável foodeclarada no escopo f. Mas, como afirmado anteriormente, podemos acessar qualquer variável declarada em uma função pai lexical, que é o caso aqui; gé o pai lexical de f. Portanto, helloé impresso.
Vamos agora olhar para a linha console.log(bar);. Neste ponto, estamos no escopo fe tentamos acessar a variável bardeclarada no escopo g. barnão é declarado no escopo atual e a função gnão é o pai de f, portanto, baré indefinida

Na verdade, também podemos acessar as variáveis ​​declaradas no escopo de uma função lexical de "grand parent". Portanto, se houver uma função hdefinida dentro da funçãog

function f()
{//begin of scope f
  function g()
  {//being of scope g
    function h()
    {//being of scope h
      /*...*/
    }//end of scope h
    /*...*/
  }//end of scope g
  /*...*/
}//end of scope f

em seguida, hseria capaz de acessar todas as variáveis declaradas no escopo da função h, ge f. Isso é feito com fechamentos . Nos fechamentos de JavaScript, podemos acessar qualquer variável declarada na função pai lexical, na função pai genérico lexical, na função pai bisavô lexical, etc. Isso pode ser visto como uma cadeia de escopo ; scope of current function -> scope of lexical parent function -> scope of lexical grand parent function -> ... até a última função pai que não tem pai lexical.

O objeto da janela

Na verdade, a cadeia não para na última função pai. Há mais um escopo especial; o escopo global . Toda variável não declarada em uma função é considerada declarada no escopo global. O escopo global possui duas especialidades;

• toda variável declarada no escopo global é acessível em qualquer lugar
• as variáveis ​​declaradas no escopo global correspondem às propriedades do windowobjeto.

Portanto, existem exatamente duas maneiras de declarar uma variável foono escopo global; não declarando-o em uma função ou configurando a propriedade foodo objeto de janela.

Ambas as tentativas usam fechamentos

Agora que você leu uma explicação mais detalhada, agora pode ser aparente que ambas as soluções usam fechamentos. Mas, com certeza, vamos fazer uma prova.

Vamos criar uma nova linguagem de programação; JavaScript sem fechamento. Como o nome sugere, o JavaScript sem fechamento é idêntico ao JavaScript, exceto que ele não suporta Closures.

Em outras palavras;

var foo = 'hello';
function f(){console.log(foo)};
f();
//JavaScript-No-Closure prints undefined
//JavaSript prints hello

Tudo bem, vamos ver o que acontece com a primeira solução com JavaScript-No-Closure;

for(var i = 0; i < 10; i++) {
  (function(){
    var i2 = i;
    setTimeout(function(){
        console.log(i2); //i2 is undefined in JavaScript-No-Closure 
    }, 1000)
  })();
}

portanto, isso será impresso undefined10 vezes em JavaScript-No-Closure.

Portanto, a primeira solução usa fechamento.

Vamos olhar para a segunda solução;

for(var i = 0; i < 10; i++) {
  setTimeout((function(i2){
    return function() {
        console.log(i2); //i2 is undefined in JavaScript-No-Closure
    }
  })(i), 1000);
}

portanto, isso será impresso undefined10 vezes em JavaScript-No-Closure.

Ambas as soluções usam fechamentos.

Editar: Supõe-se que esses três trechos de código não estejam definidos no escopo global. Caso contrário, as variáveis fooe iseria ligam ao windowobjeto e, portanto, acessível através do windowobjeto em JavaScript e JavaScript-No-Encerramento.

Nunca fiquei feliz com a maneira como alguém explica isso.

A chave para entender os fechamentos é entender como seria o JS sem os fechamentos.

Sem fechamentos, isso geraria um erro

function outerFunc(){
    var outerVar = 'an outerFunc var';
    return function(){
        alert(outerVar);
    }
}

outerFunc()(); //returns inner function and fires it

Depois que outerFunc retornar em uma versão imaginária do JavaScript desativada por fechamento, a referência a outerVar será coletada como lixo e deixada sem deixar nada para a função interna fazer referência.

Os fechamentos são essencialmente as regras especiais que entram em ação e possibilitam a existência desses vars quando uma função interna faz referência a variáveis ​​de uma função externa. Com os fechamentos, os vars referenciados são mantidos mesmo após a função externa ser concluída ou 'fechada', se isso ajudar a lembrar o ponto.

Mesmo com fechamentos, o ciclo de vida de vars locais em uma função sem funções internas que fazem referência a seus locais funciona da mesma maneira que faria em uma versão sem fechamento. Quando a função é concluída, os locais recebem o lixo coletado.

Depois de ter uma referência em uma função interna a uma variável externa, no entanto, é como se um batente de porta fosse colocado no caminho da coleta de lixo para os vars referenciados.

Uma maneira talvez mais precisa de observar fechamentos é que a função interna basicamente usa o escopo interno como sua própria fundação de escopo.

Mas o contexto mencionado é, de fato, persistente, não como um instantâneo. O acionamento repetido de uma função interna retornada que continua incrementando e registrando o var local de uma função externa continuará alertando valores mais altos.

function outerFunc(){
    var incrementMe = 0;
    return function(){ incrementMe++; console.log(incrementMe); }
}
var inc = outerFunc();
inc(); //logs 1
inc(); //logs 2

Vocês dois estão usando fechamentos.

Vou com a definição da Wikipedia aqui:

Na ciência da computação, um fechamento (também fechamento lexical ou fechamento de função) é uma função ou referência a uma função junto com um ambiente de referência - uma tabela que armazena uma referência a cada uma das variáveis ​​não locais (também chamadas de variáveis ​​livres) dessa função . Um fechamento - diferente de um ponteiro de função simples - permite que uma função acesse essas variáveis ​​não locais, mesmo quando invocada fora de seu escopo lexical imediato.

A tentativa de seu amigo usa claramente a variável i, que não é local, pegando seu valor e fazendo uma cópia para armazenar no local i2.

Sua própria tentativa passa i(que no site de chamada está no escopo) para uma função anônima como argumento. Até agora, este não é um fechamento, mas essa função retorna outra função que faz referência à mesma i2. Como a função anônima interna i2não é local, isso cria um fechamento.

Você e seu amigo usam fechos:

Um fechamento é um tipo especial de objeto que combina duas coisas: uma função e o ambiente em que essa função foi criada. O ambiente consiste em quaisquer variáveis ​​locais que estavam no escopo no momento em que o fechamento foi criado.

MDN: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures

Na função de código do seu amigo, function(){ console.log(i2); }definida dentro do fechamento da função anônima function(){ var i2 = i; ...e pode ler / gravar variável local i2.

No seu código, a função é function(){ console.log(i2); }definida dentro do fechamento da função function(i2){ return ...e pode ler / escrever localmente valioso i2(declarado neste caso como um parâmetro).

Nos dois casos, a função function(){ console.log(i2); }passou para setTimeout.

Outro equivalente (mas com menos utilização de memória) é:

function fGenerator(i2){
    return function(){
        console.log(i2);
    }
}
for(var i = 0; i < 10; i++) {
    setTimeout(fGenerator(i), 1000);
}

Fecho

Um fechamento não é uma função e nem uma expressão. Ele deve ser visto como um tipo de 'instantâneo' das variáveis ​​usadas fora do escopo de funções e usadas dentro da função. Gramaticalmente, deve-se dizer: 'faça o fechamento das variáveis'.

Novamente, em outras palavras: Um fechamento é uma cópia do contexto relevante de variáveis ​​das quais a função depende.

Mais uma vez (naïf): Um fechamento está tendo acesso a variáveis ​​que não estão sendo passadas como parâmetro.

Lembre-se de que esses conceitos funcionais dependem fortemente da linguagem / ambiente de programação que você usa. Em JavaScript, o fechamento depende do escopo lexical (o que é verdade na maioria dos idiomas c).

Portanto, retornar uma função geralmente retorna uma função anônima / sem nome. Quando a função acessa variáveis, não passadas como parâmetro, e dentro de seu escopo (lexical), um fechamento é realizado.

Então, com relação aos seus exemplos:

// 1
for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i); // closure, only when loop finishes within 1000 ms,
    }, 1000);           // i = 10 for all functions
}
// 2
for(var i = 0; i < 10; i++) {
    (function(){
        var i2 = i; // closure of i (lexical scope: for-loop)
        setTimeout(function(){
            console.log(i2); // closure of i2 (lexical scope:outer function)
        }, 1000)
    })();
}
// 3
for(var i = 0; i < 10; i++) {
    setTimeout((function(i2){
        return function() {
            console.log(i2); // closure of i2 (outer scope)

        }
    })(i), 1000); // param access i (no closure)
}

Todos estão usando fechamentos. Não confunda o ponto de execução com fechamentos. Se o 'instantâneo' dos fechamentos for tirado no momento errado, os valores podem ser inesperados, mas certamente um fechamento será feito!

Vejamos as duas maneiras:

(function(){
    var i2 = i;
    setTimeout(function(){
        console.log(i2);
    }, 1000)
})();

Declara e executa imediatamente uma função anônima que é executada setTimeout()em seu próprio contexto. O valor atual de ié preservado fazendo uma cópia i2primeiro; funciona por causa da execução imediata.

setTimeout((function(i2){
    return function() {
        console.log(i2);
    }
})(i), 1000);

Declara um contexto de execução para a função interna na qual o valor atual de ié preservado i2; essa abordagem também usa execução imediata para preservar o valor.

Importante

Deve-se mencionar que a semântica de execução NÃO é a mesma entre as duas abordagens; sua função interna é transmitida, setTimeout()enquanto a função interna setTimeout()se chama .

O agrupamento de ambos os códigos dentro de outro setTimeout()não prova que apenas a segunda abordagem use encerramentos, simplesmente não há a mesma coisa para começar.

Conclusão

Ambos os métodos usam encerramentos, então tudo se resume ao gosto pessoal; a segunda abordagem é mais fácil de "mover" ou generalizar.

Eu escrevi isso há um tempo atrás para me lembrar do que é um fechamento e como ele funciona no JS.

Um fechamento é uma função que, quando chamada, usa o escopo em que foi declarado, não o escopo em que foi chamado. No javaScript, todas as funções se comportam assim. Os valores variáveis ​​em um escopo persistem, desde que haja uma função que ainda os aponte. A exceção à regra é 'this', que se refere ao objeto em que a função está dentro quando é chamada.

var z = 1;
function x(){
    var z = 2; 
    y(function(){
      alert(z);
    });
}
function y(f){
    var z = 3;
    f();
}
x(); //alerts '2' 

Depois de inspecionar atentamente, parece que vocês dois estão usando o fechamento.

No caso dos seus amigos, ié acessado na função anônima 1 e i2na função anônima 2, onde console.logestá presente.

No seu caso, você está acessando i2dentro da função anônima onde console.logestá presente. Adicione uma debugger;declaração antes console.loge nas ferramentas do desenvolvedor do Chrome, em "Variáveis ​​de escopo", que informará sob qual escopo a variável é.

Considere o seguinte. Isso cria e recria uma função fque fecha i, mas diferentes !:

i=100;

f=function(i){return function(){return ++i}}(0);
alert([f,f(),f(),f(),f(),f(),f(),f(),f(),f(),f()].join('\n\n'));

f=function(i){return new Function('return ++i')}(0);        /*  function declarations ~= expressions! */
alert([f,f(),f(),f(),f(),f(),f(),f(),f(),f(),f()].join('\n\n'));

enquanto o seguinte se fecha sobre "uma" função "em si"
(elas mesmas! o trecho depois disso usa um único referente f)

for(var i = 0; i < 10; i++) {
    setTimeout( new Function('console.log('+i+')'),  1000 );
}

ou para ser mais explícito:

for(var i = 0; i < 10; i++) {
    console.log(    f = new Function( 'console.log('+i+')' )    );
    setTimeout( f,  1000 );
}

NB a última definição de fé function(){ console.log(9) } antes 0 é impressa.

Embargo! O conceito de fechamento pode ser uma distração coercitiva da essência da programação elementar:

for(var i = 0; i < 10; i++) {     setTimeout( 'console.log('+i+')',  1000 );      }

x-refs .:
Como funcionam os fechamentos de JavaScript?
Explicação sobre fechamentos Javascript Um fechamento
(JS) requer uma função dentro de uma função
Como entender fechamentos em Javascript?
Confusão de variáveis ​​locais e globais em Javascript

Gostaria de compartilhar meu exemplo e uma explicação sobre fechamentos. Fiz um exemplo em python e duas figuras para demonstrar os estados da pilha.

def maker(a, b, n):
    margin_top = 2
    padding = 4
    def message(msg):
        print('\n’ * margin_top, a * n, 
            ' ‘ * padding, msg, ' ‘ * padding, b * n)
    return message

f = maker('*', '#', 5)
g = maker('', '♥’, 3)
…
f('hello')
g(‘good bye!')

A saída desse código seria a seguinte:

*****      hello      #####

      good bye!    ♥♥♥

Aqui estão duas figuras para mostrar pilhas e o fechamento anexado ao objeto de função.

quando a função é retornada do criador

quando a função é chamada mais tarde

Quando a função é chamada por meio de um parâmetro ou de uma variável não-local, o código precisa de ligações de variáveis ​​locais como margin_top, padding e também a, b, n. Para garantir que o código de função funcione, o quadro de pilha da função maker que desapareceu há muito tempo deve estar acessível, com backup no fechamento que podemos encontrar junto com o objeto de mensagem de função.