Apresentando sua atenção está a tradução de um artigo de Parathan Thiyagalingam publicado em medium.freecodecamp.org. Deseja saber como funcionam os fechamentos de JavaScript? Olhe embaixo do gato!
Foto Austin Distel com UnsplashUm fechamento é uma combinação de todas as variáveis no escopo no momento em que a função é criada. Para usar o fechamento, você precisa criar uma função aninhada, ou seja, uma função dentro da função. A função interna terá acesso a variáveis no escopo da função externa, mesmo após a conclusão da função externa. (É o
fechamento que fornece esse acesso.) Cada vez que uma função é criada, o fechamento é criado.
Antes de começar a entender o conceito de fechamento, considere quais são as cadeias de escopo no JavaScript.
Como regra, existem dois tipos de áreas de visibilidade: global e local.
No JavaScript, uma variável dentro de uma função não é acessível externamente - diferente de, por exemplo, variáveis dentro de um bloco (em condições como
if e
while ).
Com base nisso, uma função em JavaScript tem um escopo, mas um bloco não.
var a = 10; function app(){ var b = 2; console.log(a);
Como já sabemos,
a é uma variável global
eb é local, ou seja, usado apenas pela função do
app . Fora do escopo local, não temos acesso à variável local.
Como usar uma função aninhada (função dentro de uma função)
var a = 10; function app(){ var b = 2; var d = 3; function add(){ var c = a + b; } return add; } var x = app(); console.dir(x);
No exemplo acima,
app é a função pai,
add é a função filho.
- Em vez de console.log, console.dir é usado para exibir todas as propriedades do objeto selecionado.
- A variável x é atribuída à função de
app , que retorna a função de add . Isso permite que você veja todas as propriedades do objeto da função add .
Se você abrir o console em um navegador, encontrará o objeto
Closure dentro da matriz de dados
Scopes .
Como a função interna de
add tem acesso às variáveis
bec que pertencem à função externa, essas duas variáveis serão adicionadas ao objeto
Closure como referência.
Considere outro exemplo de fechamento.
var a = 10; var startFunc; function app(){ var b = 2; function add(){ var c = a + b; console.log(c); } startFunc = add(); } app();
- A função global
startFunc recebe a função add , que é filha do app funções pai. - Isso só é possível depois de chamar a função de aplicativo. Caso contrário, a função
startFunc se comportará como uma variável global sem um valor atribuído.
Como usar fechamentos em JavaScript
Muitos de nós, usando fechamentos ao escrever código, não entendemos completamente por que fazem isso. O JavaScript não possui os modificadores
públicos ,
protegidos e
privados encontrados nas linguagens de programação orientadas a objetos. Portanto, para bloquear o acesso ao espaço de nomes para código externo, somos forçados a recorrer à ajuda de funções.
E já que estamos falando de funções - a
função chamada imediatamente (IIFE) começa imediatamente após o anúncio. Ela nem precisa ser chamada.
A sintaxe IIFE é assim:
(function(){
Considere este exemplo:
var studnetEnrollment = (function () {
count e
prefix são duas variáveis privadas que não podem ser alteradas. O acesso a eles é aberto apenas para a função interna (no nosso caso, essa é a função
innerFunc ).
- Na primeira vez que a função
studentEnrollment é chamada, a função studentEnrollment aumenta o valor da variável count para 1. - Na segunda vez, a
count aumenta de 1 para 2. - Tudo isso é possível apenas através do fechamento.
Conclusão
Um fechamento é um conjunto de variáveis de uma função externa, devido ao qual o escopo da função interna obtém acesso a essas variáveis. Isso protege o espaço para nome global.
A funcionalidade de fechamento permite que os desenvolvedores escrevam código limpo - como em linguagens de programação orientadas a objetos, código no qual variáveis globais e locais não são confusas.
Tenha uma boa codificação!