Exemplo de fechamento de Javascript

| | | | | | | | | | | | | | | | | | | | | | | | |

Uma das maiores senhas em JavaScript é o desligamento. Ele é alvo de muitas perguntas em entrevistas de emprego nas empresas FAANG. Neste artigo, falaremos sobre cerca e meta, ilustraremos os conceitos com exemplos simples e, em seguida, concluiremos com uma amostra de pergunta de uma entrevista com um dos maiores gigantes da tecnologia.

Quando alguém lhe diz que algo faz ou não faz parte de um projeto, o que significa?

Gostaria de pensar em um periscópio ou telescópio quando penso na resposta a esta pergunta. Essas ferramentas nos mostram todos os tipos de coisas dentro dos limites das lentes que ele tem: ele está em campo. Se estiver fora do alcance, você não poderá ver além do diâmetro da lente. E iluminar algo fora do diâmetro não é possível. Você deve pensar sobre isso enquanto falamos sobre três tipos muito importantes e distintos de escopos em JavaScript: local, global e léxico.

Escopo local

O escopo local é o menor dos os três escopos que discutiremos hoje. Quando declaramos uma função, qualquer coisa entre colchetes ({}) é considerada local para a função. Quando o mecanismo JavaScript lê a função, ele declara as variáveis; quando terminar, destruirá as variáveis.

Como você pode ver, quando "console.log()" é o resultado da função de saudação invocada, podemos acessar o WebsiteName após o função foi jogada. Isso nos dá o canal "Hello Karma Career‚" que estávamos procurando. Como já mencionado o console.log() da variável que foi declarada na função gera um erro porque não pode ser definida .

, o motivo do WebsiteName ser indefinido é porque as variáveis são criadas dentro das funções quando chamadas e depois destruídas quando a instrução do terminal é executada. Qualquer coisa fora da função não tem acesso a coisas dentro da função, a menos que tem uma configuração particular.

alcance global

Este próximo campo é praticamente uma tradução literal da frase. Um escopo global pega elementos declarados fora de uma função e os reserva em um espaço onde todos os scripts, métodos e funções podem acessá-los e usá-los para sua própria lógica.

O que o código acima faz se console.log() conta no final do código? O que você espera que aconteça?

Vejamos o código: .

  1. variable counter declarado e iniciado no ambiente global
  2. Adicionado uma função declarada no ambiente global.
  3. Add é invocado.
  4. a variável de contador declarada e iniciada no locale .
  5. o contador local aumenta em 1 ‚áê porque é local e não global?
  6. O contador é retornado. As extremidades da função.
  7. Add é chamado novamente
  8. Execute as etapas 4 a 6.
  9. Repita as etapas 3 novamente 6.a
  10. console.log (contador), ‚áê o que é retornado?

Como a função termina sempre que o contador for 1, nossa variável contador local é novamente declarada e reiniciado em 0 cada vez que a função é executada. Aconteça o que acontecer, o contador sempre irá parar em 1 localmente.

Se uma função encontra uma variável dentro de seu escopo , ela não procura o escopo global da variável - então a variável global nunca muda. Então nosso console.log() irá gerar 0 já que nossa variável definida mais próxima no ambiente desta instrução está no ambiente global.

Escopo lexical

O escopo léxico é um dos conceitos fundamentais do JavaScript. É a ideia de que a criação de uma função ou variável será acessível a certas partes do código e, portanto, inacessível a outras partes do código. Tudo depende de onde está a declaração de cada variável e função.

Vamos dar uma olhada neste bloco de código:.

Aqui temos um conjunto de funções aninhadas. A função init() declara uma variável chamada var1, declara uma função chamada second e chama second().

Quando o compilador passa por este código pela primeira vez, ele examina em alto nível o que temos:

Neste ponto, não podemos ver mais nada dentro do init() - só sabemos que a função existe quando nossa função init() é chamada, o compilador dá outra olhada de alto nível no que está dentro da função:

  1. var1.
  2. segundos ()
  3. segundo () chamadas

o init() não sabe nada sobre o que está acontecendo dentro do bloco seconds() . Ele só pode ver o que está lá em seu ambiente léxico - o estado circundante.

Cada função aninhada reside em um contêiner menor, como um conjunto de matryoshkas russas aninhadas (veja o topo do página, por exemplo, se você não tiver certeza de quem em que são). As bonecas sobre ela sabem o que está acontecendo dentro de seu recipiente e o que já aconteceu ou tem/leu no pai. A boneca maior, por exemplo, só sabe que a próxima boneca existe em seu recipiente. Ela não conhece nenhuma das outras bonecas do conjunto, apenas o que está em seu ambiente lexical (seu estado) e o que já aconteceu (o reino externo).

Na verdade, sabemos duas coisas:.

  1. O domínio externo não pode ver o domínio interno
  2. O escopo interno tem acesso ao domínio externo.

Já que o externo não pode ver o que está acontecendo lá dentro, podemos dizer com segurança que esta é uma relação de mão única. O interior pode ver e usar as variáveis do exterior, mas o exterior não pode ver o interior. Isso é chamado de finalidade léxica .

A beleza do escopo léxico é que o valor de uma variável é determinado por seu posicionamento no código . As funções primeiro procuram o significado de uma variável em sua localidade - se não conseguir encontrá-la, ela vai para a função que define essa função. Se não encontrá-lo lá, ele sobe na cadeia para a próxima função definida.

Isso está se tornando um conceito muito importante em JavaScript que aparecerá repetidamente à medida que você aprender mais sobre o framework JavaScript e como eles funcionam. Você pode ir de fora, mas nunca pode "subir" para o outro lado. Isso é muito importante quando se trata do assunto principal em questão: fechamento .

Encerramento

A definição de encerramento é muito semelhante à de um escopo léxico. A principal diferença entre os dois é que o encerramento é uma função de ordem superior e o escopo lexical não é. Uma função de ordem superior tem uma característica básica: ela retorna uma função ou usa uma função como parâmetro.

A closure é uma função que pode atingir seu escopo lexical, mesmo quando esta função é chamada posteriormente.

Tanto o fechamento quanto o escopo léxico têm suas próprias variáveis, podem acessar variáveis e parâmetros de uma função pai e podem usar variáveis globais. com o seguinte código:

  1. Saudações () a função existe, mas ainda não sabemos o conteúdo.
  2. greetUser existe, mas ainda não conheço seu conteúdo
  3. greetUser() - esta linha chama a anterior, que por sua vez chama a saudação ( ).
  4. userName declare
  5. welcomeGreeting () existe, mas ainda não conheço o conteúdo
  6. A instrução Return sob o bloco welcomeGreeting() retorna a mesma função
  7. console.log (`Hello,` + username) ; Nosso console.log aqui pode acessar o escopo pai para obter o valor de userName
  8. Declaração do terminal que encerra a função e destrói o significado das variáveis no bloco de código.
  9. Neste código, passamos informações aninhando funções juntas para que possamos acessar a ninhada dos pais mais tarde



    Conclusão

    Neste artigo, abordamos um tópico bastante pesado sobre JavaScript: escopo e encerramentos. Eu recomendaria ramificar e ler vários artigos sobre o assunto. A maneira como isso é ensinado pode vir de várias perspectivas - o que significa, é claro, que existem muitas maneiras de aprender. Espero que você tenha achado este livro de alfabeto útil!Boa sorte com seu estudo contínuo sobre fechamentos!