tutoriais mais recente desenvolvimento web
 

JavaScript Closures


Variáveis JavaScript pode pertencer ao âmbito local ou global.

Variáveis privadas pode ser possível com fechos.


Variáveis ​​globais

A função pode acessar todas as variáveis definidas dentro da função, como este:

Exemplo

function myFunction() {
    var a = 4;
    return a * a;
}
Tente você mesmo "

Mas uma função também pode acessar as variáveis definidas fora da função, como este:

Exemplo

var a = 4;
function myFunction() {
    return a * a;
}
Tente você mesmo "

No último exemplo, um é uma variável global.

Em uma página da web, as variáveis ​​globais pertencem ao objeto de janela.

As variáveis ​​globais podem ser utilizados (e alterado) por todos os scripts na página (e, na janela).

No primeiro exemplo, um é uma variável local.

Uma variável local só pode ser usado dentro da função onde ele está definido. Está escondido de outras funções e outro código de script.

variáveis ​​globais e locais com o mesmo nome são variáveis ​​diferentes. Modificando um, não modifica o outro.

Variáveis criadas sem a palavra-chave var, são sempre global, mesmo se eles são criados dentro de uma função.


Lifetime variável

As variáveis ​​globais viver tanto tempo quanto a sua aplicação (sua janela / sua página web) vive.

As variáveis ​​locais têm vida curta. Eles são criados quando a função é chamada, e excluído quando a função é concluída.


Um Dilema Contador

Suponha que você queira usar uma variável para contar alguma coisa, e você quer esse contador para estar disponível para todas as funções.

Você poderia usar uma variável global, e uma função de aumentar o contador:

Exemplo

var counter = 0;

function add() {
    counter += 1;
}

add();
add();
add();

// the counter is now equal to 3
Tente você mesmo "

O contador só deve ser alterada pelo add() função.

O problema é que qualquer script na página pode alterar o contador, sem chamar add() .

Se eu declarar o contador dentro da função, ninguém será capaz de mudá-lo sem chamar add ():

Exemplo

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

add();
add();
add();

// the counter should now be 3, but it does not work !
Tente você mesmo "

Não funcionou! Toda vez que eu chamar o add() função, o contador é definido como 1.

A função interna JavaScript pode resolver isso.


Funções JavaScript aninhadas

Todas as funções têm acesso ao âmbito global.

Na verdade, no JavaScript, todas as funções de ter acesso ao âmbito "acima" los.

JavaScript suporta funções aninhadas. Funções aninhadas ter acesso ao âmbito "acima" los.

Neste exemplo, a função interna plus() tem acesso à variável do contador na função de pai:

Exemplo

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();   
    return counter;
}
Tente você mesmo "

Isto poderia ter resolvido o contador dilema, se pudéssemos chegar a plus() função a partir do exterior.

Nós também precisamos de encontrar uma maneira de executar contador = 0 apenas uma vez.

Precisamos de um encerramento.


Closures JavaScript

Lembre-se de funções de auto-invocando? O que esta função faz?

Exemplo

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

add();
add();
add();

// the counter is now 3
Tente você mesmo "

exemplo Explicado

O suplemento variável é atribuído o valor de retorno de uma função de auto-invocando.

A função de auto-invocando só é executado uma vez. Ele define o contador a zero (0), e retorna uma expressão de função.

Desta forma add torna-se uma função. A parte "maravilhoso" é que ele pode acessar o contador no escopo pai.

Isso é chamado de fechamento JavaScript. Isso torna possível para uma função para ter variáveis "privadas".

O contador é protegido pelo âmbito de aplicação da função anônima, e só pode ser alterado usando a função add.

Um fechamento é uma função que tem acesso ao escopo pai, mesmo após a função pai foi fechado.