Closures do JavaScript

Variáveis JavaScript pertencem alocalouGlobalEscopo.

As variáveis globais podem ser acessadas porEncerramentoImplementa local (privado).

Variável global

A função pode acessar a funçãoInternaVariáveis definidas, por exemplo:

Exemplo

function myFunction() {
    var a = 4;
    return a * a;
}

Experimente você mesmo

Mas a função também pode acessar funçõesExternaVariáveis definidas, por exemplo:

Exemplo

var a = 4;
function myFunction() {
    return a * a;
}

Experimente você mesmo

No último exemplo,a éGlobalVariável.

Na página da web, as variáveis globais pertencem ao objeto window.

As variáveis globais podem ser usadas e modificadas por todos os scripts na página (e na janela).

No primeiro exemplo,a éLocalVariável.

As variáveis locais podem ser usadas apenas dentro da função onde foram definidas. Para outras funções e scripts, são invisíveis.

As variáveis globais e locais com o mesmo nome são variáveis diferentes. Modificar uma não altera a outra.

nãopalavra-chave var As variáveis criadas sempre são globais, mesmo que sejam criadas dentro de uma função.

Ciclo de vida das variáveis

As variáveis globais vivem tanto quanto sua aplicação (janela, página da web).

As variáveis locais não vivem muito. Elas são criadas na chamada da função e são removidas quando a função termina.

Um dilema de contador

Suponha que você queira usar uma variável para contar e que você deseja que este contador esteja disponível para todas as funções.

Você pode usar variáveis globais e funções para incrementar o contador:

Exemplo

// Inicializar o contador
var counter = 0;
// Função de incrementar o contador
function add() {
  counter += 1;
}
// Chame três vezes add()
add();
add();
add();
// O contador deve ser 3

Experimente você mesmo

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

Para a função add(), o contador deve ser local, para evitar que outro código a altere:

Exemplo

// Inicializar o contador
var counter = 0;
// Função de incrementar o contador
function add() {
  var counter = 0; 
  counter += 1;
}
// Chame três vezes add()
add();
add();
add();
// O contador deve ser 3. Mas é 0.

Experimente você mesmo

Não serve, porque mostramos o contador global em vez do local.

Ao fazer a função retornar ela mesma, podemos eliminar o contador global e acessar o contador local:

Exemplo

// Função de incrementar o contador
function add() {
  var counter = 0; 
  counter += 1;
  return counter;
}
// Chame três vezes add()
add();
add();
add();
// O contador deve ser 3. Mas é 1.

Experimente você mesmo

Não serve, porque cada vez que chamamos a função, resetamos o contador local.

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

Funções aninhadas do JavaScript

Todas as funções têm permissão para acessar o escopo global.

De fato, no JavaScript, todas as funções têm permissão para acessar o escopo 'acima' delas.

JavaScript suporta funções aninhadas. As funções aninhadas podem acessar o escopo superior.

Neste exemplo, a função interna plus() pode acessar a variável pai da função counter Variável contadora：

Exemplo

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();     
    return counter; 
}

Experimente você mesmo

Desta forma, podemos resolver o dilema do contador, se pudermos acessar do exterior plus() função.

Precisamos encontrar uma função que execute apenas uma vez counter = 0 método.

Precisamos de um encerramento (closure).

Closures do JavaScript

Lembras da função autoinvocada? O que essa função fará?

Exemplo

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// O contador atual é 3

Experimente você mesmo

Explicação de Exemplo

variável add A atribuição é o valor de retorno da função autoinvocada.

Esta função autoinvocada é executada apenas uma vez. Ela define o contador como zero (0) e retorna a expressão de função.

Desta forma, add se tornou uma função. A parte mais 'espetacular' é que ela pode acessar o contador do escopo pai.

Este é chamado de JavaScript Encerramento. Isso faz com que a função tenha "PrivadoTorna possível a variável.

O contador é protegido pelo escopo da função anônima e pode ser modificado apenas através da função add.

Encerramento é uma função que tem acesso ao escopo pai, mesmo após o encerramento da função pai.