Neste tutorial, você aprenderá sobre fechamentos de JavaScript com a ajuda de exemplos.
Antes de aprender sobre fechamentos, você precisa entender dois conceitos:
- Função Aninhada
- Retornando uma função
Função aninhada de JavaScript
Em JavaScript, uma função também pode conter outra função. Isso é chamado de função aninhada. Por exemplo,
// nested function example // outer function function greet(name) ( // inner function function displayName() ( console.log('Hi' + ' ' + name); ) // calling inner function displayName(); ) // calling outer function greet('John'); // Hi John
No programa acima, a greet()função contém a displayName()função dentro dela.
Retornando uma função
Em JavaScript, você também pode retornar uma função dentro de uma função. Por exemplo,
function greet(name) ( function displayName() ( console.log('Hi' + ' ' + name); ) // returning a function return displayName; ) const g1 = greet('John'); console.log(g1); // returns the function definition g1(); // calling the function
Resultado
function displayName () (console.log ('Hi' + '' + nome);) Olá John
No programa acima, a greet()função está retornando a displayNamedefinição da função.
Aqui, a definição da função retornada é atribuída à variável g1. Ao imprimir g1 usando console.log(g1), você obterá a definição da função.
Para chamar a função armazenada na variável g1, usamos g1()com parênteses.
Fechamentos de JavaScript
Em JavaScript, o fechamento fornece acesso ao escopo externo de uma função de dentro da função interna, mesmo após o fechamento da função externa. Por exemplo,
// javascript closure example // outer function function greet() ( // variable defined outside the inner function let name = 'John'; // inner function function displayName() ( // accessing name variable return 'Hi' + ' ' + name; ) return displayName; ) const g1 = greet(); console.log(g1); // returns the function definition console.log(g1()); // returns the value
Resultado
function displayName () (// acessando a variável de nome return 'Hi' + '' + name;) Hi John
No exemplo acima, quando a greet()função é chamada, ela retorna a definição da função de displayName.
Aqui, g1está uma referência à displayName()função.
Quando g1()é chamado, ainda tem acesso à greet()função.
Quando executamos console.log(g1), ele retorna a definição da função.
O conceito de encerramento existe para outras linguagens de programação como Python, Swift, Ruby, etc.
Vamos dar uma olhada em outro exemplo.
// closure example function calculate(x) ( function multiply(y) ( return x * y; ) return multiply; ) const multiply3 = calculate(3); const multiply4 = calculate(4); console.log(multiply3); // returns calculate function definition console.log(multiply3()); // NaN console.log(multiply3(6)); // 18 console.log(multiply4(2)); // 8
No programa acima, a calculate()função recebe um único argumento xe retorna a definição da multiply()função da função. A multiply()função recebe um único argumento ye retorna x * y.
Ambos multiply3e multiply4são encerramentos.
A calculate()função é chamada de passagem de parâmetro x. Quando multiply3e multiply4são chamados, a multipy()função tem acesso ao argumento x passado da calculate()função externa .
Dados privados
O fechamento do JavaScript ajuda na privacidade dos dados do programa. Por exemplo,
let a = 0; function sum() ( function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) const x = sum(); console.log(x()); // 1 console.log(x()); // 2 console.log(x()); // 3 a = a + 1; console.log(a); // 4
No exemplo acima, a sum()função retorna a definição da increaseSum()função da função.
A variável a é aumentada dentro da increaseSum()função. No entanto, o valor da variável a também pode ser alterado fora da função. Nesse caso, a = a + 1;altera o valor da variável fora da função.
Agora, se você quiser que a variável a seja aumentada apenas dentro da função, você pode usar um encerramento. Por exemplo,
function sum() ( let a = 0; function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) let x = sum(); let a = 5; console.log(x()); // 1 console.log(x()); // 2 console.log(a); // 5
No exemplo acima, a sum()função define o valor de a como 0 e retorna a increaseSum()função.
Por causa do fechamento, mesmo que sum()já seja executado, increaseSum()ainda tem acesso a a e pode adicionar 1 a a cada vez que x()for chamado.
E a variável a é privada para a sum()função. Isso significa que a variável a só pode ser acessada dentro da sum()função.
Mesmo que você o declare ae use, ele não afeta a avariável dentro da sum()função.
Observação : geralmente, os fechamentos são usados para privacidade de dados.
