Quais são os fechamentos de JavaScript com exemplos?

JavaScript é uma linguagem de programação versátil que suporta uma ampla gama de paradigmas de programação. Um dos recursos mais poderosos do JavaScript são os fechamentos, que permitem aos desenvolvedores criar código poderoso e flexível. Neste artigo, exploraremos o que são os fechamentos e como eles funcionam, junto com alguns exemplos.

O que é um fechamento em JavaScript?

Um fechamento é uma função interna que tem acesso às variáveis, parâmetros e argumentos da função externa. A função interna pode acessar essas variáveis ​​mesmo após o retorno da função externa. Um fechamento permite que você encapsule e proteja dados dentro de uma função, impedindo que ele seja acessado por outras funções.

Os fechamentos são criados quando uma função é definida dentro de outra função e retornada como um valor. A função retornada mantém uma referência às variáveis ​​na função externa, mesmo depois que a função externa retornar. Isso significa que a função interna pode acessar e manipular essas variáveis.

Os fechamentos podem ser usados ​​em uma variedade de situações, como criar variáveis ​​e métodos privados, implementar retornos de chamada e manipuladores de eventos e gerenciar o estado.

Exemplo 1: variáveis ​​e métodos privados

Um dos usos mais comuns dos fechamentos é criar variáveis ​​e métodos privados. Variáveis ​​e métodos privados não são acessíveis de fora da função, tornando -os mais seguros e menos propensos a erros.

função contador () let count = 0; função increment () count ++; console.log (contagem); retornar incremento; const incrementCount = contador (); incrementCount (); // 1 incrementCount (); // 2 incrementCount (); // 3

12345678910111213141516

função contador () let count = 0; função increment () count ++; console.log (contagem); retornar incremento; const incrementCount = contador (); incrementCount (); // 1IncrementCount (); // 2IncrementCount (); // 3

No exemplo acima, criamos um contador função que retorna uma função de incremento. O contar A variável é definida no contador função, mas só é acessível a partir do incremento função. Cada vez que o incremento A função é chamada, aumenta a variável de contagem e registra o novo valor para o console.

Exemplo 2: retornos de chamada e manipuladores de eventos

Os fechamentos também podem ser usados ​​para implementar retornos de chamada e manipuladores de eventos. Um retorno de chamada é uma função que é passada como um argumento para outra função e é chamada quando a outra função completa. Os manipuladores de eventos são funções chamadas em resposta a um evento específico, como um clique de botão ou envio de formulário.

função fetchdata (url, retorno de chamada) fetch (url) .então (resposta => resposta.JSON ()) .então (dados => retorno de chamada (dados)) .captura (erro => console.erro (erro)); fetchdata ('https: // API.exemplo.com/data ', function (dados) console.log (dados); );

12345678910

função fetchdata (url, retorno de chamada) fetch (url) .então (resposta => resposta.JSON ()) .então (dados => retorno de chamada (dados)) .captura (erro => console.erro (erro)); fetchdata ('https: // api.exemplo.com/data ', function (dados) console.log (dados););

No exemplo acima, criamos um Fetchdata função que leva um URL e uma função de retorno de chamada como argumentos. O Fetchdata função usa o buscar API para recuperar dados do URL especificado e depois passa esses dados para a função de retorno de chamada. A função de retorno de chamada é definida como uma função anônima que registra os dados no console.

Exemplo 3: Gerenciando Estado

Os fechamentos também podem ser usados ​​para gerenciar o estado em um programa. Estado refere -se aos dados que descrevem a condição atual do programa, como entrada do usuário ou configurações de aplicativo.

function createCounter (InitialValue = 0) let count = InitialValue; return increment () count ++; console.log (contagem); , decrement () count--; console.log (contagem); , reset () count = InitialValue; console.log (contagem); ; const contador = createCounter (5); contador.incremento(); // 6 contador.decremento (); // 5 contador.reiniciar(); // 5

123456789101112131415161718192021222324

function createCounter (InitialValue = 0) let count = InitialValue; return increment () count ++; console.log (contagem); , decrement () count--; console.log (contagem); , reset () count = InitialValue; console.log (contagem); ; const contador = createCounter (5); contador.incremento(); // 6Counter.decremento (); // 5counter.reiniciar(); // 5

No exemplo acima, criamos um createCounter função que retorna um objeto com três métodos: incremento, decremento, e reiniciar. Os métodos acordam e manipulam uma variável de contagem que é definida no createCounter função. O valor inicial de contar está definido como o parâmetro inicial de valores passados ​​para createCounter. Cada método retorna o valor atualizado do contar e registra -o no console.

O contador objeto devolvido por createCounter mantém uma referência à variável de contagem no createCounter função, permitindo o incremento, decremento, e reiniciar métodos para acessar e modificar o estado do programa.

Conclusão

Em conclusão, os fechamentos são uma característica poderosa do JavaScript que permite criar código flexível e seguro. Os fechamentos são criados quando uma função é definida dentro de outra função e retornada como um valor. A função retornada mantém uma referência às variáveis ​​na função externa, mesmo depois que a função externa retornar. Os fechamentos podem ser usados ​​em uma variedade de situações, como criar variáveis ​​e métodos privados, implementar retornos de chamada e manipuladores de eventos e gerenciar o estado. Ao usar o fechamento em seu código JavaScript, você pode escrever aplicativos mais robustos e sustentáveis.