Fechamentos de função JavaScript | Explicado
O conceito de fechamento já existe há algum tempo, mas as pessoas têm dificuldade em entendê -lo. Vamos seguir passo a passo e facilitar a compreensão com a ajuda de exemplos.
O que são fechamentos em JavaScript
Muito brevemente, o fechamento está tendo acesso ao escopo externo do escopo interno ao trabalhar com funções aninhadas. Um fechamento é criado toda vez que uma função aninhada é executada em JavaScript. As variáveis definidas dentro da função são criadas na execução da função e são removidas da memória após a execução completa da respectiva função.
Para entender o conceito de fechamento em JavaScript, precisamos saber a diferença entre o escopo global e o escopo local. Bem, nós vamos repassar isso muito brevemente.
Escopos de variável
Como mencionado acima, existem dois principais escopos variáveis no JavaScript:
- Âmbito global
- Escopo local
As variáveis definidas fora de qualquer função são conhecidas como variáveis globais e ter um Âmbito global. Essas variáveis podem ser acessadas de qualquer lugar dentro do programa, é por isso que usamos o termo "global".
Comparativamente, as variáveis definidas dentro de uma função são conhecidas como variáveis locais e são conhecidos por ter um escopo local. O escopo local é dividido em escopo e bloqueio de função, mas isso não é uma grande preocupação para nós. Variáveis locais só pode ser acessado de dentro da função em que eles são declarados
Pegue este bloco de código para entender o escopo:
var sitename = "Linuxhint!";Função PrintSitename ()
Let TopicName = "JavaScript";
console.log (sitename);
PrintSitename ();
console.log (tópicoName);
O que estamos fazendo no código acima é que estamos criando uma variável global nome do site e estamos imprimindo dentro de uma função chamada PrintSitename (), Esta função inclui uma variável local nome do tópico E estamos tentando imprimir o valor dessa variável fora desta função. Aqui, nome do site é uma variável global e nome do tópico é uma variável local. A saída do código a seguir é como:
Como você pode ver claramente, fomos capazes de acessar o nome do site variáveis dentro de uma função, mas não conseguimos acessar a variável local nome do tópico Fora de sua função. Você pode aprender mais detalhes sobre essas diferentes variáveis e escopo.
Como funciona um fechamento em javascript
Agora que sabemos como o escopo funciona no JavaScript, podemos entender facilmente o funcionamento dos fechamentos.
Fechamentos são funções aninhadas dentro uma da outra de tal maneira que a função interna se torna escopo localmente para a função externa, e a função externa se torna globalmente escopo para a função interna. O que significa que a função interna tem acesso aos atributos da função externa.
Para uma melhor compreensão, pegue o seguinte código:
Função ExterterFunction ()Let Outvar = "Eu sou externo";
função innerfunction ()
deixe invar = "eu sou interno";
console.log (outvar);
console.log (invar);
retornar innerfunction ();
ExterterFunction ();
Estamos criando um Função externa e um INNERFUNCION dentro de Função externa. Da função interna, estamos acessando a variável outvar qual é a variável local do Função externa, e imprimir seu valor junto com o valor da variável dentro da função interna.
É assim que esse código funciona:
A saída do código acima é:
Conseguimos obter os valores das variáveis e imprimi -las no console usando o console.registro() função.
Como ter várias funções dentro de outra função em um fechamento
Se nos referirmos à função externa como o função pai do fechamento e a função interna como o Função da criança do fechamento. Então podemos colocar dessa maneira que um pai solteiro pode ter vários filhos. Uma função pai não terá acesso aos atributos de seus filhos. No entanto, toda criança terá acesso aos atributos de seus pais. Como uma função infantil também é um atributo do pai, portanto, uma função infantil também pode acessar as outras funções infantis do mesmo pai; Isso significa ter acesso a seus irmãos.
Observação: Parâmetros e argumentos também são acessíveis a crianças.
Suponha que queremos fazer uma função que cumprimenta uma função que a chama. Esta função possui 3 parâmetros, primeiro nome, nome do meio e último nome.
Primeiro, crie a função usando as seguintes linhas.
Função cumprimentadora (primeiro nome, name middlename, lastName)// comandos posteriores aqui dentro
Esta função de receptora é uma função pai com quatro filhos. 3 das crianças trabalham nos parâmetros e retornam o valor dos parâmetros como:
função getfirst ()retornar primeiro nome;
function getMiddle ()
Retornar MiddleName;
função getLast ()
Retornar LastName;
O último filho chama todos os seus irmãos e imprime os valores no console, que é implementado com as seguintes linhas:
função nameprinter ()console.log ("Bem -vindo! " + getFirst () +" " + getMiddle () +" " + getLast ());
No final da função pai cumprimentador () ele retorna o NamePrinter () criança para o local onde é chamado.
Para, executar este todo Fecho Precisamos chamar a função pai com a seguinte linha:
cumprimentador ("John", "Bukhari", "Doe");O trecho completo do código deste fechamento é:
Função cumprimentadora (primeiro nome, name middlename, lastName)função getfirst ()
retornar primeiro nome;
function getMiddle ()
Retornar MiddleName;
função getLast ()
Retornar LastName;
função nameprinter ()
console.log ("Bem -vindo! " + getFirst () +" " + getMiddle () +" " + getLast ());
retornar nameprinter ();
cumprimentador ("John", "Bukhari", "Doe");
Teremos a seguinte saída:
Conclusão
O fechamento é um recurso que veio com o lançamento do ES6 do JavaScript. Os fechamentos são a implementação do conceito com base no escopo de variáveis em JavaScript. Aprendemos o que são fechamentos e, como eles são baseados no escopo de variáveis que aprendemos sobre o escopo também. Passamos pela diferença entre o escopo global e o escopo variável em JS e, no final, testamos o funcionamento de fechamentos com a ajuda de exemplos.