Guia de fechamento de JavaScript

Introdução

Os fechamentos são um conceito um pouco abstrato de linguagem JavaScript e esgueirar-se no lado do compilador da programação. No entanto, entender como JavaScript interpreta funções, funções aninhadas, áreas e ambientes lexicais é essencial para aproveitar todo o seu potencial.

Neste artigo, tentaremos desmistificar tais conceitos e fornecer um guia simples para o Fechamentos JavaScript

O que é um fechamento?

primeiro, vamos olhar para a definição oficial de fechar o MDN:

Um fechamento é a combinação de uma função agrupada ( bloqueado) com referências ao seu estado circundante (o ambiente léxico). Em outras palavras, um fechamento dá acesso ao alcance de uma função externa de uma função interna.

Em termos mais simples, um fechamento é uma função que tem acesso ao alcance de uma função externa. Para entender isso, vamos dar uma olhada em como as áreas funcionam em JavaScript.

Escopo no escopo Javascript

Determina quais variáveis são visíveis ou podem ser referenciadas em um determinado contexto. O escopo é amplamente dividido em dois tipos: escopo global e escopo local:

  • gama global – variáveis definidas fora de uma função. As variáveis podem ser acessadas neste campo e modificá-las de qualquer lugar do programa, portanto, o nome “global”.
  • variáveis – variáveis definidas em uma função. Essas variáveis são específicas para a função em um que é definido, então eles são chamados de “local”.
  • Vamos ver uma variável global e local em JavaScript:

let name = "Joe";function hello(){ let message = "Hello"; console.log(message + " " +name);}

No exemplo anterior, o escopo de name é global, ou seja, você pode acessá-lo de qualquer lugar. Por outro lado, message é definido dentro de uma função, seu intervalo é local para a função hello().

Javascript Ele usa o escopo léxico quando se trata de áreas de funcionamento. O que significa que o alcance de uma variável é definido pela posição de sua definição no código-fonte. Isso nos permite nos referir a variáveis globais dentro de áreas menores. Uma variável local pode usar uma variável global, mas o vice-versa não é possível.

en

function outer(){ let x = 10; function inner() { let y = 20; console.log(x); } inner(); console.log(y)}outer();

Este código resulta em:

o inner() função pode referenciar x como é definido a função . No entanto, o console.log(y) Declaração no outer() A função não pode se referir à variável y Porque é definido na faixa de função inner().

Além disso, neste cenário:

let x = 10;function func1(){ console.log(x);}function func2() { let x = 20; func1();}func2();

A saída será:

10

Quando chamamos func1() do interior func2(), temos uma variável local x. No entanto, esta variável é totalmente irrelevante para func1() Como não é acessível em func1().

Então, func1() Verifique se há uma variável global com esse identificador disponível e usá-lo, o que resulta no valor de 10.

O fechamento sob o capô

Um fechamento é uma função que tem acesso às variáveis de seus pais, mesmo após a função externa ter retornado. Em outras palavras, um fecho tem três áreas:

  • local: acesso a variáveis ao seu próprio alcance
  • escopo da função principal: acesso às variáveis dentro do seu principal
  • alcance global: acesso a variáveis globais

Vamos olhar para um fechamento no trabalho, fazendo uma função que retorna outra função:

function outer() { let x = 3 return function inner(y) { return x*y }}let multiplyByThree = outer();console.log(multiplyByThree(2));

Isto resulta em:

6

Se fizermos um:

console.log(multiplyByThree);

somos recebidos com:

function inner(y) { return x * y; }

Vamos rever o código passo a passo para ver o que está acontecendo sob o capô:

  • o outer() a função é definida no escopo global.
  • outer() é invocado e devolve uma função atribuída a multiplyByThree
  • é criado um novo contexto de execução para outer()
    • variável x é definido como 3.
  • retorna uma função chamada inner()
  • a referência a inner() é atribuído a multiplyByThree
  • Quando a função externa terminar a execução, todas as variáveis são excluídas ao seu alcance.
  • Resultado da chamada para a função é gravado no console.
  • inner() É invocado com 2 como um argumento. Então, y está definido como 2
  • como inner() Conserva a cadeia de reação de sua função principal, no momento da execução, você ainda terá acesso ao valor de x.
  • retorna 6 que é registrado no console.

Em conclusão, mesmo após a função, a função deixa de existir, o interior a função tem acesso às variáveis definidas no Escopo da função externa.

Fechamentos de visualização

Os fechamentos podem ser exibidos através do console do desenvolvedor:

function outer() { let x = 3 return function inner(y) { return x*y }}let multiplyByThree = outside();console.dir(multiplyByThree);

Ao executar o código anterior no console do desenvolvedor, podemos ver que temos acesso ao contexto de inner(y). Após uma inspeção mais próxima, podemos ver que parte de seu contexto é uma matriz , que contém as três áreas que estávamos falando.

e aqui, A matriz de escopo contém o escopo de sua função principal, que contém x = 3:

casos de uso comum

Os fechamentos são úteis porque Ajude-nos a agrupar dados com funções que operam nesses dados. Isso pode soar alguns de vocês que estão familiarizados com a programação orientada para objetos (OOP). Como resultado, podemos usar fechamentos em qualquer lugar onde podemos usar um objeto.

Outro caso de uso importante dos fechamentos é quando precisamos que nossas variáveis sejam privadas, uma vez que as variáveis definidas no escopo de um fechamento Eles estão fora dos limites das funções fora dela. Ao mesmo tempo, os fechamentos têm acesso a variáveis em sua cadeia de alcance.

Vamos ver o exemplo a seguir para entender isso melhor:

Neste exemplo, definimos uma variável constante balance e configure-a como o valor de retorno da nossa função anônima. Perceba privateBalance só pode ser alterado chamando os métodos em balance.

Conclusão

Embora os fechamentos sejam um conceito muito especializado em JavaScript, eles são uma importante ferramenta em um bom conjunto de ferramentas para desenvolvedores de JavaScript. Eles podem ser usados para implementar elegantemente soluções que, de outra forma, seria uma tarefa difícil.

Neste artigo, primeiro aprendemos um pouco sobre os campos e como eles são implementados em JavaScript. Então usamos esse conhecimento para entender como os fechamentos funcionam sob o trabalho do capô e como usá-los.

Leave a Comment

O seu endereço de email não será publicado. Campos obrigatórios marcados com *