Sempre quis saber como funcionam Closures em JavaScript, já li algumas definições mas nunca entendi muito bem.
Vocês poderiam me dar uma explicação simples, objetiva mas com conteúdo?
Sempre quis saber como funcionam Closures em JavaScript, já li algumas definições mas nunca entendi muito bem.
Vocês poderiam me dar uma explicação simples, objetiva mas com conteúdo?
Closure ("clausura" em português, mas esse termo é raramente utilizado), 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.
Um exemplo de erro comum envolvendo closures é a criação de uma função dentro de um bloco for:
for ( var i = 0 ; i < elementos.length ; i++ ) {
elementos[i].onclick = function() {
alert("Esse é o elemento " + i);
}
}
Esse código não funciona como esperado, uma vez que a variável i
utilizada pela função anônima é o mesmo i
do contexto externo - o que significa que quando o i
externo muda, o valor que a função interna vai acessar é diferente. No final, i
será igual a elementos.length
(ex.: 10
), de modo que clicar em qualquer elemento sempre imprimirá "Esse é o elemento 10".
Uma possível solução para esse problema é a criação de um novo contexto léxico que "capture" o valor daquela variável no momento desejado:
for ( var i = 0 ; i < elementos.length ; i++ )
(function(i) {
elementos[i].onclick = function() {
alert("Esse é o elemento " + i);
}
})(i);
Dessa forma, o i
parâmetro da função não é o mesmo i
usado pelo laço for
- e ele possui o valor que a variável tinha no momento da execução.
Existem muitas vantagens em se usar closures, como exemplificado na resposta do @Jordão (que demonstra um meio de se implementar currying). Um outro exemplo seria simular variáveis privadas - algo que não é normalmente suportado pela linguagem JavaScript:
function MeuObjeto() {
this.publico = { ... }
var privado = { ... }
this.foo = function() {
return privado.a;
}
this.bar = function(x) {
privado.a = x;
}
...
}
var obj = new MeuObjeto();
obj.publico; // Acessível
obj.privado; // undefined
Note que, como não existe nenhuma referência direta para privado
, esse objeto não pode ser manipulado diretamente (apenas indiretamente por meio de foo
e bar
). Mas como foo
e bar
foram criados dentro do contexto léxico do construtor, elas têm acesso às variáveis locals do mesmo, podendo acessá-las normalmente.
Um outro exemplo "clássico" é o Accumulator Generator, citado num artigo do Paul Graham (em inglês) onde se discute o poder de expressividade relativa das diversas linguagens de programação. O requisito é simples:
Escreva uma função
foo
que recebe um númeron
e retorna uma função que recebe um númeroi
, e retornan
incrementado dei
.Nota: (a) [o argumento] é um número, não um inteiro. (b) é incrementado de, não mais.
A solução proposta, com exemplos de uso:
function foo (n) {
return function (i) {
return n += i;
}
}
var x = foo(10);
x(2); // 12
x(3); // 15
var y = foo(20);
y(5); // 25
y(2); // 27
Como os exemplos no final do artigo mostram, linguagens que não suportam closures acabam sendo muito mais varbosas (exigindo muito código para se fazer pouco), de modo que demoram mais para serem escritas, lidas, podem conter mais bugs (já que a probabilidade de bugs aumenta com a quantidade de linha de código), etc.
Nota: Incluí aqui parte de uma resposta que dei para uma pergunta semelhante (a pergunta não era sobre closures, mas a causa raiz do problema era), adaptando para a resposta ficar mais genérica.
script1.js
poderá acessar a variável a
definida pelo meuscript.js
normalmente (assumindo que ela foi definida no top-level, como no exemplo). É por isso que muitas bibliotecas - tipo o jQuery - colocam o script inteiro dentro de um (function() { ... })();
, para não criar variáveis globais sem necessidade (ou pior, quando as globais de um script sobrescrevem as globais de outro script).
Commented
8/06/2016 às 22:57
"Closures" (algo como "fechamento") são funções que "capturam" variáveis que vêm de fora da função. Em inglês se diz que uma "closure" closes over (se fecha sobre) certas variáveis.
Um exemplo típico:
function somador(v1) {
return function(v2) {
return v1 + v2;
}
}
somador
retorna uma "closure", uma função que captura o valor de v1
(note que somador
não é uma "closure", e sim seu valor de retorno):
var soma10 = somador(10);
var total1 = soma10(5); // total1 é 15, já que soma10 capturou o valor de v1 como "10"
var soma20 = somador(20);
var total2 = soma20(5); // total2 é 25, soma20 capturou v1 = 20
var total3 = somador(30)(5); // usando diretamente a "closure"
"Currying" é um função que "captura" alguns paramêtros para outras funções e retorna uma função (uma "closure") que aceita o restante dos parâmetros.
Dada a função soma
:
function soma(v1, v2) {
return v1 + v2;
}
E uma simples função de "currying":
function curry(fn /*, argumentos parciais para fn */) {
var args1 = [].slice.call(arguments, 1); // argumentos após fn
return function(/* o resto dos argumentos para fn */) {
var args2 = [].slice.call(arguments);
return fn.apply(null, args1.concat(args2)); // junta todos os argumentos
}
}
Podemos usá-las assim:
var soma10 = curry(soma, 10); // soma10 capturou "soma" e "10"
var total = soma10(5);
Closure é um conceito em linguagem de programação que, de forma simplificada, permite que uma função acesse variáveis de sua função parente.
Essa técnica é oriunda de linguagens funcionais, mas acabou sendo difundido e implementado também para outras linguagens como JavaScript e C#.
Exemplo:
function start() {
var message = "hello world";
function display() {
console.log(message);
}
display();
}
No exemplo a função display
tem acesso a variável message
, mas note que a variável foi declarada no corpo da função parente start
. A função "de dentro" (inner) tem acesso as variáveis da "função de fora" (outer). display
no exemplo é considerado um closure.
Mas, mais ainda, as variáveis referenciadas da função parente continuam disponíveis mesmo ao final de sua execução. Segue outro exemplo:
function getDisplay() {
var message = "hello world";
return function display() {
console.log(message);
};
}
var display = getDisplay();
display();
Note que agora a exibição do valor de message
é feito mesmo após sua função (getDisplay
) já ter terminado sua execução.
Para que isso seja possível a linguagem tem que prover para função não só a referências de suas variáveis locais e variáveis globais mas também as referências das variáveis não locais, que não estão nem em seu escopo e nem no escopo global, mas que de alguma forma se tornaram acessível a ela (como no exemplo pela função que a encapsula).
Falando de JavaScript, na prática, esse "ambiente" da função é chamado de execution context. Para cada chamada de função o interpretador monta um execution context para ela, e é daí que a mágica acontece :-)
Tradicionalmente, a memória utilizada pela variável é "liberada" para o garbage collector assim que termina seu escopo, o que normalmente é assim que a execução sai do bloco que a encapsula ({ }
).
A diferença no JavaScript é que seu interpretador mantém uma pilha de execution context conforme as funções vão sendo chamadas. E é essa pilha que vai fornecer para o interpretador a informação se o escopo da variável terminou ou não.
Vale deixar a nota: essa pilha não é a mesma memória que chamamos de "pilha" (stack) em outras linguagens como C/C++.
Como você deve ter percebido pela maioria dos exemplos que existem por aí, com closure é feita a cópia das referências das variáveis, e não de seus valores.
Isto significa que ao alterar o valor de uma variável dentro de um closure todos os outros contextos que possuem referência para essa variável irão obter este valor quando acessá-la. Cuidado com eventuais efeitos colaterais.
Closure tem a ver com o escopo de uma variável em JavaScript.
Para não poluir o namespace global, protegendo que as variáveis do seu script se misturem com outras variáveis de outros scripts, você pode usar um grande closure para colocar todo o código de seu plugin, app, ou library...
(function($){
// aqui vem o teu código
var contador;
})(jQuery);
O escopo de um closure sempre vai começar com o caracter {
e terminar com o caracter }
. Sim, é isso mesmo: um escopo (closure) sempre tem um começo e um fim determinados pelo abre-colchete e fecha-colchete.
O que é interessante é que, ao criar uma função em um ponto determinado do código, você automaticamente cria um closure, onde as atuais variáveis locais ficam disponíveis dentro do novo escopo:
var crud = (function(){
var modulo = {},
contador = 0;
modulo.update = function() { // aqui temos o início de outro closure
contador++;
}; // e aqui o respectivo final
return modulo;
})();
Repare na variável contador. Nós não temos acesso a ela "do lado de fora" do módulo crud. E ela também não foi definida dentro da função update. Quando chamamos crud.update() pela primeira vez, a variável contador vai passar a valer 1
. Se chamamos crud.update() pela segunda vez, a variável contador vai passar a valer 2
.
Você queria uma resposta simples e objetiva: contemple bem o exemplo acima. Se você entender o simples fato de que temos uma variável capturada dentro de um escopo, porém sempre disponível para a função que a "capturou", você vai ter entendido a essência da charada. Não é complicado. Mas é uma feature do JavaScript que abre espaço para padrões incríveis.
Closure, em JS, por exemplo - vou dar um exemplo de uma linguagem - é quando o escopo exterior é enxergado e guardado, de dentro de um bloco ou função interior.
Por exemplo,
var minhaUrl = "Produtos/1";
function ajaxeira() {
$.ajax({
url: minhaUrl,
...
success: function (data) {
alert(JSON.stringify(data));
}
});
}
No início da execução desse bloco acima, minhaUrl
contém "Produtos/1"
e está claro ao observá-lo.
Para fim de ilustração, posso demonstrar o uso desta função ajaxeira()
e mudar minhaUrl
como se ela estivesse dentro do escopo da função,
minhaUrl = "Pedidos/4";
ajaxeira(); // Imprime o pedido 4 em formato JSON, em um alert, se der boa
minhaUrl = "Produtos/11";
ajaxeira(); // Imprime o produto 11 em formato JSON, em um alert, se der boa
No caso acima, minhaUrl
é uma variável global, mas eu posso ter uma função que abriga var minhaUrl
e, dentro desta função, ter outra função, que usa minhaUrl
:
$(function () {
var minhaUrl = "Produtos/1";
function ajaxeira() {
alert('Imagine aqui a chamada ajax para ' + minhaUrl);
}
function pedidos4() {
minhaUrl = "Pedidos/4";
}
$('#btnPedidos4').on('click', pedidos4);
$('#btnAjaxeira').on('click', ajaxeira);
alert(minhaUrl); // Popup com 'Produtos/1'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnAjaxeira" value="Ajaxeira" />
<input type="button" id="btnPedidos4" value="Pedidos 4" />
No código acima, quando eu clicar no botão Pedido 4, eu altero o valor de minhaUrl
. A seguir, se eu apertar o botão Ajaxeira, vai aparecer o popup com o conteúdo do pedido e não mais do produto, que é o padrão.
Note também que estou aqui usando pedidos4()
e ajaxeira()
como callbacks e estes também enxergam e guardam o escopo imediatamente externo à suas declarações.
Uma Closure é um recurso disponível em algumas linguagens de programação em que uma função consegue acessar todo o escopo do ambiente léxico ao seu redor.
Um exemplo didático comum de closure é uma função dentro de outra função no qual a função interna consegue acessar todo o escopo da função mais externa.
No caso acima, a função interna da closure guarda as referencias do ambiente léxico ao seu redor e consegue acessar as respectivas variáveis mesmo que a função externa já tenha sido executada.
Entretanto, não é necessário estar dentro de outra função para ser closure, uma vez que a função consegue acessar o escopo global.
O ambiente léxico se refere ao escopo da função em que algum componente (variável, objeto, função, etc...) está ou o escopo do contexto global.
Em JS, a closure sempre acontece com todas as funções, sem a necessidade de keywords especiais.
function outer()
{
//Variável no Ambiente Léxico da função interna.
//Linha executada somente na atribuição de closureFunc.
const outerVar = 10;
// função interna
function inner()
{
console.log(outerVar)
}
return inner
}
//Criação da Closure
const closureFunc = outer();
//Execução da Closure
closureFunc(); // Saída: 10