English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial Básico JavaScript

objeto JavaScript

função JavaScript

HTML DOM JS

BOM do navegador JS

Tutorial Básico AJAX

Manual de Referência JavaScript

Encerramento do JavaScript

As variáveis JavaScript podem pertencer alocalespaço de escopo ouglobalespaço de escopo.

Podemos usarClosuresDefinir variáveis globais como locais (privadas).

Por que precisamos de closures?

Suponhamos que queremos usar uma variável para contar algo e queremos que o contador esteja disponível para todas as funções.

Podemos usar uma variável global e uma função para aumentar o contador:

// inicializar o contador
var counter = 0;
// função de incrementar o contador
function increment() {
  counter++;
}
// chamar increment() 3vezes
increment();
increment();
increment();
// 3
document.getElementById("output").innerHTML = `Contador: ${counter};`,
Teste e veja‹/›

A solução acima tem um problema: qualquer código na página pode alterar o contador sem chamar increment().

As funções internas do JavaScript podem resolver esse problema.

Função aninhada do JavaScript

O JavaScript suporta funções aninhadas. As funções aninhadas podem acessar os escopos acima.

Neste exemplo, a função interna pode acessar a variável de contador da função externa:

function outer() {
  var counter = 0;
  function inner() {
      counter++;
  }
  return counter; 
}
Teste e veja‹/›

As funções aninhadas podem resolver o problema anterior, se pudermos acessar a função inner() externamente.

Precisamos encontrar um método que execute apenas uma vez counter = 0, que é o encerramento mencionado abaixo.

Encerramento do JavaScript

O encerramento é a combinação de função e ambiente léxico que declara a função.

O encerramento pode acessar as variáveis do escopo de outra função. Isso é feito criando uma função interna. Claro, a função externa não pode acessar o escopo interno.

var increment = (function() {
  var counter = 0;
  function inner() {
      return ++counter;
  }
  return inner;
})();
Teste e veja‹/›

O valor de retorno da função autoexecutável é atribuído à incrementação da variável.

A função autoexecutável é executada apenas uma vez. Ela define o contador como zero e retorna a expressão da função.

O encerramento permite que a função acesse o escopo pai, mesmo que a função pai tenha sido encerrada.