Sempre que você vê a palavra-chave da função dentro de outra função, a função interna tem acesso a variáveis na função externa.

function foo(x) {
  var tmp = 3;

  function bar(y) {
    console.log(x + y + (++tmp)); // will log 16
  }

  bar(10);
}

foo(2);

Isto irá sempre registar 16, Porque bar pode aceder ao {[5] } que foi definido como um argumento para foo, e também pode aceder a tmp a partir de foo.

function foo(x) {
  var tmp = 3;

  return function (y) {
    console.log(x + y + (++tmp)); // will also log 16
  }
}

var bar = foo(2); // bar is now a closure.
bar(10);

A função acima também irá log 16, Porque bar ainda pode se referir a x e tmp, mesmo que já não esteja diretamente dentro do escopo.

A o exemplo mais simples de um fechamento é este:

var a = 10;

function test() {
  console.log(a); // will output 10
  console.log(b); // will output 6
}
var b = 6;
test();

Quando uma função JavaScript é invocada, um novo contexto de execução é criado. Junto com os argumentos da função e o objeto pai, este contexto de execução também recebe todas as variáveis declaradas fora dele (no exemplo acima, tanto 'a' quanto 'b').

Aqui o número {[5] } é um número literal. Como com outros literais em JavaScript, quando foo é chamado, o número x é copiado em foo como seu argumento x.

Por outro lado, o JavaScript usa sempre referências quando lida com objectos. Se disser, você chamou foo com um objecto, O fecho que ele devolve irá referência que objecto original!

function foo(x) {
  var tmp = 3;

  return function (y) {
    console.log(x + y + tmp);
    x.memb = x.memb ? x.memb + 1 : 1;
    console.log(x.memb);
  }
}

var age = new Number(2);
var bar = foo(age); // bar is now a closure referencing age.
bar(10);

Como esperado, cada chamada para bar(10) irá aumentar x.memb. O que pode não ser esperado, é que x está simplesmente se referindo ao mesmo objeto que a variável age! Depois de algumas chamadas para bar, age.memb serão dois! Este referenciamento é a base para vazamentos de memória com objetos HTML.

Como o Velho Albert disse: "Se não o consegues explicar a um miúdo de seis anos, tu próprio não o entendes.". Bem, eu tentei explicar o fechamento JS a um amigo de 27 anos e falhou completamente. Alguém pode considerar que eu tenho 6 anos e estranhamente interessado nesse assunto ?

Era uma vez:

function princess() {

    var adventures = [];

    function princeCharming() { /* ... */ }

    var unicorn = { /* ... */ },
        dragons = [ /* ... */ ],
        squirrel = "Hello!";

    /* ... */

    return {

        story: function() {
            return adventures[adventures.length - 1];
        }
    };
}

var littleGirl = princess();

...contar histórias sobre magia e fantasia.

littleGirl.story();

O seu filho será capaz de seguir instruções em dois passos. Por exemplo, se você disser ao seu filho, "vá para a cozinha e me traga um saco de lixo" eles serão capazes de se lembrar dessa direção.

Podemos usar este exemplo para explicar os encerramentos, como se segue:

A cozinha é um fecho que tem uma variável local, chamada trashBags. Há uma função dentro da cozinha chamada {[2] } que recebe um saco do lixo e devolve-o.

Podemos codificar isto em JavaScript assim:

function makeKitchen() {
  var trashBags = ['A', 'B', 'C']; // only 3 at first

  return {
    getTrashBag: function() {
      return trashBags.pop();
    }
  };
}

var kitchen = makeKitchen();

console.log(kitchen.getTrashBag()); // returns trash bag C
console.log(kitchen.getTrashBag()); // returns trash bag B
console.log(kitchen.getTrashBag()); // returns trash bag A

Outros pontos que explicam porque os encerramentos são interessantes:

• cada vez que makeKitchen() é chamado, um novo fechamento é criado com o seu próprio separate trashBags.
• a variável trashBags é local para o interior de cada cozinha e não é acessível para fora, mas a função interna na propriedade getTrashBag tem acesso a ela.
• cada chamada de função cria um fecho, mas não haveria necessidade de manter o fecho à volta a menos que uma função interna, que tem acesso ao interior do fecho, possa ser chamada de fora do fecho. Devolver o objeto com a função getTrashBag faz isso aqui.

O Homem Palha

Solução Bastante Óbvia

// Declare counter outside event handler's scope
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  // Increment outside counter
  counter++;

  if (counter === 3) {
    // Do something every third time
    console.log("Third time's the charm!");

    // Reset counter
    counter = 0;
  }
});

<button id="button">Click Me!</button>

Considere esta opção

var element = document.getElementById('button');

element.addEventListener("click", (function() {
  // init the count to 0
  var count = 0;

  return function(e) { // <- This function becomes the click handler
    count++; //    and will retain access to the above `count`

    if (count === 3) {
      // Do something every third time
      console.log("Third time's the charm!");

      //Reset counter
      count = 0;
    }
  };
})());

<button id="button">Click Me!</button>

No exemplo acima, estou a usar o comportamento de encerramento do JavaScript. Este comportamento permite que qualquer função tenha acesso ao escopo em que foi criada, indefinidamente.Para praticamente aplicar isto, eu ... invocar imediatamente uma função que retorna outra função, e porque a função que estou retornando tem acesso à variável de contagem interna (por causa do comportamento de fechamento explicado acima) isso resulta em um escopo privado para o uso pela função resultante... Não é assim tão simples? Vamos diluí-lo...

Um simples encerramento de uma linha

//          _______________________Immediately invoked______________________
//         |                                                                |
//         |        Scope retained for use      ___Returned as the____      |
//         |       only by returned function   |    value of func     |     |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

Todas as variáveis fora da função devolvida estão disponíveis para a função devolvida, mas não estão directamente disponíveis para a objecto de função devolvido...

func();  // Alerts "val"
func.a;  // Undefined

Também, esta variável privada estado é totalmente acessível, tanto para leituras como para atribuir as suas variáveis privadas escopadas.

Publicação completa no 'Blog' ( incluindo jQuery considerations)

    var bind = function(x) {
        return function(y) { return x + y; };
    }
    
    var plus5 = bind(5);
    console.log(plus5(3));

O que aconteceria aqui se o JavaScript não soubesse dos encerramentos? Basta substituir a chamada na última linha por seu corpo método (que é basicamente qual função e tu recebes:

console.log(x + 3);

• um encerramento não é apenas criado quando você retorna uma função interna. de facto, a função envolvente não precisa de regressar de todo para que o seu encerramento seja criado. Você pode, em vez disso, atribuir a sua função interna a uma variável em um escopo exterior, ou passá-la como um argumento para outra função onde ela poderia ser chamada imediatamente ou em qualquer altura mais tarde. Portanto, o fechamento da função envolvente é, provavelmente, criado assim a função envolvente é chamado, uma vez que qualquer função interna tem acesso para que o fechamento sempre que a função mais interna é chamada, antes ou após o delimitador função retorna.
• um fecho não faz referência a uma cópia dos valores antigos das variáveis no seu âmbito. as próprias variáveis fazem parte do encerramento, e assim o valor visto ao aceder a uma dessas variáveis é o valor mais recente no momento em que é acessado. É por isso que as funções internas criadas dentro de laços podem ser complicadas, uma vez que cada um tem acesso às mesmas variáveis externas ao invés de pegar uma cópia das variáveis no momento em que a função é criada ou chamada.
• as "variáveis" num Fecho incluem quaisquer funções nomeadas declaradas dentro da função. Eles também incluem argumentos da função. Um fechamento também tem acesso às variáveis de fechamento que contém, até ao âmbito global.
• os encerramentos usam memória, mas não causam fugas de memória uma vez que o JavaScript por si só limpa as suas próprias estruturas circulares que não são referenciadas. Vazamentos de memória do Internet Explorer envolvendo fechamentos são criados quando ele não consegue desconectar os valores dos atributos DOM que referenciam fechamentos, mantendo assim referências a estruturas possivelmente circulares.

O encerramento é muito parecido com um objecto. É instintivo sempre que se chama uma função.

O escopo de um encerramento em JavaScript é lexical, o que significa que tudo o que está contido dentro da função o encerramento pertence, tem acesso a qualquer variável que está nele.

Uma variável está contida no fecho SE

1. atribua-o com var foo=1; ou
2. escreve apenas var foo;

Se uma função interna (uma função contida dentro de outra função) acede a tal variável sem defini-la em seu próprio escopo com var, ela modifica o conteúdo da variável no fecho exterior .

O encerramento ultrapassa o tempo de execução da função que o gerou. Se outras funções saírem do encerramento/âmbito em que estão definidas (por exemplo, como valores de retorno), estas continuarão a referir que: encerramento .

Exemplo

function example(closure) {
  // define somevariable to live in the closure of example
  var somevariable = 'unchanged';

  return {
    change_to: function(value) {
      somevariable = value;
    },
    log: function(value) {
      console.log('somevariable of closure %s is: %s',
        closure, somevariable);
    }
  }
}

closure_one = example('one');
closure_two = example('two');

closure_one.log();
closure_two.log();
closure_one.change_to('some new value');
closure_one.log();
closure_two.log();

Saída

somevariable of closure one is: unchanged
somevariable of closure two is: unchanged
somevariable of closure one is: some new value
somevariable of closure two is: unchanged

Os encerramentos são uma forma de deixar uma função ter variáveis persistentes e privadas - ou seja, variáveis que apenas uma função sabe sobre, onde pode manter o registo das informações das horas anteriores que foi executado.

Cheio pós:

O que são estas coisas de encerramento?

Os encerramentos são simples:

O seguinte exemplo simples cobre todos os pontos principais dos encerramentos de JavaScript.^*  

function make_calculator() {
  var n = 0; // this calculator stores a single number n
  return {
    add: function(a) {
      n += a;
      return n;
    },
    multiply: function(a) {
      n *= a;
      return n;
    }
  };
}

first_calculator = make_calculator();
second_calculator = make_calculator();

first_calculator.add(3); // returns 3
second_calculator.add(400); // returns 400

first_calculator.multiply(11); // returns 33
second_calculator.multiply(10); // returns 4000

O ponto-chave: Cada chamada para make_calculator cria uma nova variável local n, que continua a ser utilizável por que da calculadora add e multiply funções muito tempo depois de make_calculator retorna.

Se estiver familiarizado com o stack molduras, estas calculadoras parecem estranhas: como podem continuar a aceder a n Depois de make_calculator regressar? A resposta é imaginar que JavaScript não usa "stack frames", mas em vez disso usa" heap frames", que pode persistir após a chamada de função que os fez retornar.

Funções internas como add e multiply, que acedem variáveis declaradas numa função externa^**, são chamados encerramentos .

É praticamente tudo o que há para fazer. encerramento.

^{* Por exemplo, ele cobre todos os pontos da "Vedantes para Dummies" artigo dada em outra resposta, exceto exemplo 6, que simplesmente mostra que as variáveis podem ser usadas antes de serem declaradas, um bom fato para saber, mas completamente alheios a encerramentos. Ele também cobre todos os pontos em a resposta aceita , Exceto para os pontos (1) que funções copiam seus argumentos em variáveis locais (o nome argumentos de função), e (2) que copiar números cria um novo número, mas copiar uma referência de objeto lhe dá outra referência ao mesmo objeto. Estes também são bons para saber, mas mais uma vez completamente não relacionados com encerramentos. Também é muito semelhante ao exemplo em esta resposta mas um pouco mais curta e menos abstrata. Não cobre o ponto de esta resposta ou este comentário, que é que o JavaScript torna difícil ligar o valor actual de um variável de loop para a sua função interna: o passo" ligar-se " só pode ser feito com uma função auxiliar que encerra a sua função interna e é invocado em cada iteração de loop. (Estritamente falando, a função interna acessa a cópia da função auxiliar da variável, ao invés de ter qualquer coisa conectada.) Novamente, muito útil ao criar fechamentos, mas não parte do que um fechamento é ou como ele funciona. Existe uma confusão adicional devido a fechamentos que funcionam de forma diferente em linguagens funcionais como ML, onde as variáveis são vinculados a valores, em vez de espaço de armazenamento, fornecendo um fluxo constante de pessoas que entendem de tampas em uma forma (a saber, o "ligar" forma) que é simplesmente incorreta para JavaScript, onde as variáveis são sempre vinculado ao espaço de armazenamento, e nunca para os valores.}

^{** Qualquer função externa, se vários forem aninhados, ou mesmo no contexto global, como esta resposta aponta claramente.}

Pode explicar encerramentos a uma criança de 5 anos?*

Ainda acho que a explicação do Google funciona muito bem e é concisa:

/*
*    When a function is defined in another function and it
*    has access to the outer function's context even after
*    the outer function returns.
*
* An important concept to learn in JavaScript.
*/

function outerFunction(someNum) {
    var someString = 'Hey!';
    var content = document.getElementById('content');
    function innerFunction() {
        content.innerHTML = someNum + ': ' + someString;
        content = null; // Internet Explorer memory leak for DOM reference
    }
    innerFunction();
}

outerFunction(1);​

_{*uma pergunta C#}

Fechos feitos à direita:

console.log('CLOSURES DONE RIGHT');

var arr = [];

function createClosure(n) {
    return function () {
        return 'n = ' + n;
    }
}

for (var index = 0; index < 10; index++) {
    arr[index] = createClosure(index);
}

for (var index in arr) {
    console.log(arr[index]());
}

• No código acima createClosure(n) é invocado em cada iteração do laço. Note que eu nomeei a variável n para destacar que ela é uma variável Nova criada num novo âmbito de funções e não é a mesma variável que index que está ligada ao âmbito exterior.

• Isto cria um novo escopo e {[3] } Está ligado a esse escopo; isto significa que temos 10 escopos separados, um para cada iteração.

• createClosure(n) devolve uma função que devolve o n Dentro desse âmbito.

• Dentro de cada escopo n Está ligado a qualquer valor que teve quando createClosure(n) foi invocado de modo que a função aninhada que é devolvido irá sempre devolver o valor de n que teve quando createClosure(n) foi invocado.

Fechos feitos de forma errada:

console.log('CLOSURES DONE WRONG');

function createClosureArray() {
    var badArr = [];

    for (var index = 0; index < 10; index++) {
        badArr[index] = function () {
            return 'n = ' + index;
        };
    }
    return badArr;
}

var badArr = createClosureArray();

for (var index in badArr) {
    console.log(badArr[index]());
}

• No código acima, o loop foi movido dentro da função createClosureArray() e a função agora apenas retorna a matriz completa, que à primeira vista parece mais intuitiva.

• O que pode não ser óbvio é que desde createClosureArray() só é invocado uma vez que apenas um escopo é criado para esta função em vez de um para cada iteração do laço.

• Dentro desta função uma variável chamada index é definida. O ciclo corre e adiciona funções ao array que retornam index. Note que index é definido dentro da função createClosureArray que só é invocada uma vez.

• Como havia apenas um escopo dentro da função createClosureArray(), index só está ligado a um valor dentro desse escopo. Em outras palavras, cada vez que o loop muda o valor de index, Ele o muda para tudo que remete-o para esse âmbito de aplicação.

• Todas as funções adicionadas ao array retornam a mesma variável index do escopo pai onde foi definido em vez de 10 diferentes de 10 âmbitos diferentes, como o primeiro exemplo. O resultado final é que todas as 10 funções retornam a mesma variável do mesmo escopo.

• Depois que o loop terminou e index foi feito sendo modificado o valor final era 10, Portanto, cada função adicionada ao array retorna a valor da variável única index que está agora definida como 10.

FECHOS FEITOS À DIREITA
n = 0
n = 1
n = 2
n = 3
n = 4
n = 5
n = 6
n = 7
n = 8
n = 9

FECHOS FEITOS DE FORMA ERRADA
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10

Wikipédia em encerramentos:

Em Ciência da computação, um fechamento é uma função juntamente com um ambiente de referência para os nomes Não locais (variáveis livres) dessa função.

Uma vez que a construção definidora de escopo em JavaScript é uma função , não um bloco de código como em muitos outros languages, o que normalmente queremos dizer por Fecho em JavaScript é uma função a trabalhar com variáveis não locais definidas na função envolvente já executada.

Os encerramentos são frequentemente usados para criar funções com alguns dados privados ocultos (mas nem sempre é o caso).

var db = (function() {
    // Create a hidden object, which will hold the data
    // it's inaccessible from the outside.
    var data = {};

    // Make a function, which will provide some access to the data.
    return function(key, val) {
        if (val === undefined) { return data[key] } // Get
        else { return data[key] = val } // Set
    }
    // We are calling the anonymous surrounding function,
    // returning the above inner function, which is a closure.
})();

db('x')    // -> undefined
db('x', 1) // Set x to 1
db('x')    // -> 1
// It's impossible to access the data object itself.
// We are able to get or set individual it.

Ems

O exemplo acima está usando uma função anônima, que foi executada uma vez. Mas não tem de ser. Ele pode ser nomeado (por exemplo mkdb) e executado mais tarde, gerar uma função de banco de dados cada vez que é invocado. Cada função gerada terá seu próprio objeto de banco de dados escondido. Outro exemplo de uso de fechamentos é quando não retornamos uma função, mas um objeto contendo várias funções para diferentes propósitos, cada uma dessas funções tendo acesso aos mesmos dados.

var create = function (x) {
    var f = function () {
        return x; // We can refer to x here!
    };
    return f;
};
// 'create' takes one argument, creates a function

var g = create(42);
// g is a function that takes no arguments now

var y = g();
// y is 42 here

As crianças vão lembrar-se sempre dos segredos que partilharam com os pais, mesmo depois dos pais serem desaparecido. É isto que os encerramentos são para funções.

Os segredos das funções JavaScript são as variáveis privadas

var parent = function() {
 var name = "Mary"; // secret
}

Cada vez que lhe chamas, a variável local "name" é criada e o nome próprio "Mary". E cada vez que a função sai a variável é perdida e o nome é esquecido.

Como podes adivinhar, porque as variáveis são re-criado cada vez que a função é chamada, e ninguém mais vai conhecê-los, deve haver um lugar secreto onde eles são armazenados. Pode chamar-se Câmara dos segredos ou pilha ou âmbito local, mas não importa. Sabemos que estão lá, algures, escondidos na memória.

Mas, em JavaScript há uma coisa muito especial que as funções que são criadas dentro de outras funções, também pode conhecer as variáveis locais de seus pais e manter enquanto viverem.

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    // I can also see that "name" is "Mary"
  }
}

Então, enquanto estivermos na função-mãe, ela pode criar uma ou mais funções-filhos que compartilham as variáveis secretas do lugar secreto.

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    return "My name is " + childName  +", child of " + name; 
  }
  return child; // child leaves the parent ->
}
var child = parent(); // < - and here it is outside 

child("Alice") => "My name is Alice, child of Mary"

Não compreendo por que razão as respostas são tão complexas aqui.

Aqui está um encerramento:

var a = 42;

function b() { return a; }

Não há razão para acreditar que os encerramentos são uma invasão complexa para resolver problemas específicos. Não, os encerramentos são apenas sobre o uso de uma variável que vem de um escopo maior da perspectiva de onde a função foi declarada (não executar) . O que foi? permite que você faça pode ser mais espetacular, ver outras respostas.

Exemplo para o primeiro ponto de dlaliberte:

Um encerramento não é apenas criado quando você retorna uma função interna. De fato, a função envolvente não precisa retornar. Você pode, em vez disso, atribuir sua função interna a uma variável em um escopo exterior, ou passá-la como um argumento para outra função onde ela poderia ser usada imediatamente. Portanto, o fechamento da função envolvente provavelmente já existe no momento em que a função envolvente foi chamada, uma vez que qualquer função tem acesso a ele assim que é chamado.

var i;
function foo(x) {
    var tmp = 3;
    i = function (y) {
        console.log(x + y + (++tmp));
    }
}
foo(2);
i(3);

Um fecho é onde uma função interna tem acesso a variáveis na sua função externa. Essa é provavelmente a explicação mais simples de uma linha que você pode obter para fechamentos.

Eu sei que já existem muitas soluções, mas acho que este pequeno e simples script pode ser útil para demonstrar o conceito:

// makeSequencer will return a "sequencer" function
var makeSequencer = function() {
    var _count = 0; // not accessible outside this function
    var sequencer = function () {
        return _count++;
    }
    return sequencer;
}

var fnext = makeSequencer();
var v0 = fnext();     // v0 = 0;
var v1 = fnext();     // v1 = 1;
var vz = fnext._count // vz = undefined

function sleepOver(howManyControllersToBring) {

    var numberOfDansControllers = howManyControllersToBring;

    return function danInvitedPaul(numberOfPaulsControllers) {
        var totalControllers = numberOfDansControllers + numberOfPaulsControllers;
        return totalControllers;
    }
}

var howManyControllersToBring = 1;

var inviteDan = sleepOver(howManyControllersToBring);

// The only reason Paul was invited is because Dan was invited. 
// So we set Paul's invitation = Dan's invitation.

var danInvitedPaul = inviteDan(howManyControllersToBring);

alert("There were " + danInvitedPaul + " controllers brought to the party.");

As funções JavaScript podem aceder às suas:

1. argumentos
2. locais (isto é, as suas variáveis locais e funções locais)
Ambiente, que inclui::

• globais, incluindo o DOM
• Qualquer coisa em funções exteriores

Se uma função acessa o seu ambiente, então a função é um fecho.

Imagine que os Eventos de 'Overflow' da pilha são implementados como encerramentos, voteUp_click e voteDown_click, que têm acesso a variáveis externas é votedup e isVotedDown, que são definidas globalmente. (Por uma questão de simplicidade, estou a referir-me aos botões de voto de StackOverflow, não ao conjunto de botões de voto de resposta.)

Quando o utilizador clica no botão VoteUp, a função voteup_ cllick verifica se está votada == verdadeiro para determinar se deve votar para cima ou simplesmente cancelar um voto para baixo. Função voteup_ cllick é um fecho porque está a aceder à sua ambiente.

var isVotedUp = false;
var isVotedDown = false;

function voteUp_click() {
  if (isVotedUp)
    return;
  else if (isVotedDown)
    SetDownVote(false);
  else
    SetUpVote(true);
}

function voteDown_click() {
  if (isVotedDown)
    return;
  else if (isVotedUp)
    SetUpVote(false);
  else
    SetDownVote(true);
}

function SetUpVote(status) {
  isVotedUp = status;
  // Do some CSS stuff to Vote-Up button
}

function SetDownVote(status) {
  isVotedDown = status;
  // Do some CSS stuff to Vote-Down button
}

O autor de Encerramentos explicou muito bem os encerramentos, explicando a razão pela qual precisamos deles e também explicando o ambiente lexical que é necessário para compreender os encerramentos.
Aqui está o resumo:

O processo consiste em dois passos:

1. primeiro, quando uma função f é criada, ela não é criada num vazio espaco. Existe um objecto Lexicalambiental actual. Caso acima, é a janela (a é indefinida no momento da função criacao).

Se uma variável é lida, mas não pode ser encontrada em qualquer lugar, um o erro é gerado.

Funções Aninhadas

Então, a função g tem acesso a g, A E F.

Encerramentos

Uma função aninhada pode continuar a viver após a função externa ter terminado:

A marcar. Lexical environments:

Como vemos, this.say é uma propriedade no objecto do utilizador, por isso continua a viver após o utilizador ter terminado.

E se se lembrar, quando this.say é criado, ele (como todas as funções) obtém uma referência interna this.say.[[Scope]] ao actual enquadramento lexical. Assim, o ambiente lexical da execução atual do usuário permanece na memória. Todas as variáveis de usuário também são suas propriedades, por isso eles também são cuidadosamente mantidos, não junked como geralmente.

O objetivo é garantir que, se a função interna quiser acessar uma variável externa no futuro, ela seja capaz de fazê-lo.

Para resumir:

1. a função interna mantém uma referência ao exterior. Lexicalambiente.
2. a função interna pode aceder a variáveis a partir dela. a qualquer momento, mesmo que a função exterior esteja terminada.
3. o navegador mantém o Lexicalambiente e todas as suas propriedades (variáveis) na memória até que haja uma função interior que a faz referência.

function sing(person) {

    var firstPart = "There was " + person + " who swallowed ";

    var fly = function() {
        var creature = "a fly";
        var result = "Perhaps she'll die";
        alert(firstPart + creature + "\n" + result);
    };

    var spider = function() {
        var creature = "a spider";
        var result = "that wiggled and jiggled and tickled inside her";
        alert(firstPart + creature + "\n" + result);
    };

    var bird = function() {
        var creature = "a bird";
        var result = "How absurd!";
        alert(firstPart + creature + "\n" + result);
    };

    var cat = function() {
        var creature = "a cat";
        var result = "Imagine That!";
        alert(firstPart + creature + "\n" + result);
    };

    fly();
    spider();
    bird();
    cat();
}

var person="an old lady";

sing(person);

Instruções

Código: toda a escrita acima é chamada código . Está escrito em JavaScript.

Função: uma função em JavaScript é como uma fábrica. Pode ser uma pequena fábrica com apenas uma máquina lá dentro. Ou pode conter muitas outras pequenas fábricas, cada uma com muitas máquinas fazendo trabalhos diferentes. Numa fábrica de roupas da vida real, pode haver resmas de tecido e bobinas de fios a entrar e T-shirts e jeans a sair. A nossa fábrica JavaScript só processa dados, não pode coser, perfurar um buraco ou derreter metal. Na nossa fábrica JavaScript os dados entram e saem.

Uma função normalmente tem um nome, parêntesis e aparelho. Assim:

function cookMeal() {  /*  STUFF INSIDE THE FUNCTION  */  }

Note que /*...*/ e // parar o código sendo lido pelo navegador.

Nome: pode-se chamar uma função sobre qualquer palavra que se queira. O exemplo "farinha de cozinha" é típico em unir duas palavras e dar à Segunda uma letra maiúscula no início - mas isso não é necessário. Não pode ter um espaço nele, e não pode ser um número por si só.

Parênteses: "parênteses" ou () são a caixa de letras na porta da fábrica de funções JavaScript ou uma caixa de correio na rua Para enviar pacotes de informação para a fábrica. Às vezes, a caixa de correio pode estar marcada , por exemplo. cookMeal(you, me, yourFriend, myFriend, fridge, dinnerTime), nesse caso, você saiba que dados você tem para dar.

O EXEMPLO DO CÓDIGO LONGO ACIMA

O nosso código começa com a palavrafunção , por isso sabemos que é um! Então o nome da função sing - é a minha própria descrição do que é a função. Então parênteses (). Os parênteses estão sempre lá para uma função. Às vezes eles estão vazios, e às vezes eles têm algo dentro. Este tem uma palavra em: Depois disto, há um aparelho como este . Isto marca o início da função sing () . Ele tem um parceiro que marca o fim de sing () Assim }

function sing(person) {  /* STUFF INSIDE THE FUNCTION */  }

Agora, depois da função sing(), perto do fim do código está a linha

var person="an old lady";

Variável: as letras var significam "variável". Uma variável é como um envelope. No exterior, este envelope tem a menção "pessoa". No interior contém um pedaço de papel com a informação que a nossa função precisa, algumas letras e espaços Unidos como um pedaço de cadeia (é chamado de cadeia) que fazem uma frase lendo "uma velha senhora". O nosso envelope pode conter outros tipos de coisas como números( chamados inteiros), instruções (chamadas Funções), listas (chamadas arrays). Porque esta variável é escrita fora de todos os suspensórios {}, e porque você pode ver através das janelas coloridas quando você está dentro dos suspensórios, esta variável pode ser vista em qualquer lugar do Código. Chamamos a isto uma "variável global".

Variável GLOBAL: a pessoa é uma variável global, o que significa que se você mudar o seu valor de "uma senhora idosa "para " a" jovem", a pessoacontinuará a ser um jovem até que você decida mudá-lo novamente e que qualquer outra função no código pode ver que é um jovem. Carregue no botão F12 ou veja a configuração das opções para abrir a consola de desenvolvimento de um navegador e escreva "pessoa" para ver qual é este valor. Tipo person="a young man" para mudá-lo e, em seguida, digite "pessoa" novamente para ver que ele mudou.

sing(person);

"Vamoscantar , venha e peguepessoa !"

Quando o navegador carregar o código JavaScript an atingiu esta linha, irá iniciar a função. Eu coloquei a linha no final para ter certeza de que o navegador tem toda a informação que precisa para executá-lo.

As funções definem acções-a função principal é cantar. Contém uma variável chamada primeira parte {[25] } que se aplica ao canto sobre a pessoa que se aplica a cada um dos versos da canção: "havia" + pessoa + "que engoliu". Se você digitar firstPart para a consola, você não terá uma resposta porque a variável está trancada em uma função - o navegador não pode ver dentro das janelas coloridas dos suspensórios.

Encerramentos: os encerramentos são as funções menores que estão dentro da função big sing(). As pequenas fábricas dentro da grande fábrica. Cada um tem o seu aparelho. que as variáveis dentro delas não podem ser vistas do lado de fora. É por isso que os nomes das variáveis (criatura e resultado) podem ser repetidos nos encerramentos, mas com valores diferentes. Se você digitar estes nomes variáveis na janela da consola, você não vai obter o seu valor porque ele está escondido por duas camadas de janelas coloridas.

Todos os encerramentos sabem o que é a variável da função sing () {25]} chamada {24]} firstPart {25]}, porque eles podem ver a partir da sua cor janela.

fly();
spider();
bird();
cat();

A função sing() chamará cada uma destas funções na ordem que lhes é dada. Então o trabalho da função sing() será feito.

Imagina, estás a brincar com os teus irmãos e irmãs em toda a casa, e estás a mexer-te com os teus brinquedos e trouxeste alguns deles para o quarto do teu irmão mais velho. Passado algum tempo, o teu irmão voltou da escola e foi para o quarto dele, e trancou-o lá dentro, por isso agora já não podias ter acesso aos brinquedos deixados lá de uma forma directa. Mas podias bater à porta e ... pede ao teu irmão Os brinquedos. Isto chama-se Fecho de brinquedos; o teu irmão inventou-o para ti, e agora está no âmbito exterior.

function playingInBrothersRoom (withToys) {
  // We closure toys which we played in the brother's room. When he come back and lock the door
  // your brother is supposed to be into the outer [[scope]] object now. Thanks god you could communicate with him.
  var closureToys = withToys || [],
      returnToy, countIt, toy; // Just another closure helpers, for brother's inner use.

  var brotherGivesToyBack = function (toy) {
    // New request. There is not yet closureToys on brother's hand yet. Give him a time.
    returnToy = null;
    if (toy && closureToys.length > 0) { // If we ask for a specific toy, the brother is going to search for it.

      for ( countIt = closureToys.length; countIt; countIt--) {
        if (closureToys[countIt - 1] == toy) {
          returnToy = 'Take your ' + closureToys.splice(countIt - 1, 1) + ', little boy!';
          break;
        }
      }
      returnToy = returnToy || 'Hey, I could not find any ' + toy + ' here. Look for it in another room.';
    }
    else if (closureToys.length > 0) { // Otherwise, just give back everything he has in the room.
      returnToy = 'Behold! ' + closureToys.join(', ') + '.';
      closureToys = [];
    }
    else {
      returnToy = 'Hey, lil shrimp, I gave you everything!';
    }
    console.log(returnToy);
  }
  return brotherGivesToyBack;
}
// You are playing in the house, including the brother's room.
var toys = ['teddybear', 'car', 'jumpingrope'],
    askBrotherForClosuredToy = playingInBrothersRoom(toys);

// The door is locked, and the brother came from the school. You could not cheat and take it out directly.
console.log(askBrotherForClosuredToy.closureToys); // Undefined

// But you could ask your brother politely, to give it back.
askBrotherForClosuredToy('teddybear'); // Hooray, here it is, teddybear
askBrotherForClosuredToy('ball'); // The brother would not be able to find it.
askBrotherForClosuredToy(); // The brother gives you all the rest
askBrotherForClosuredToy(); // Nothing left in there

Uma resposta para uma criança de seis anos (assumindo que sabe o que é uma função e o que é uma variável, e o que são dados):

As funções podem devolver dados. Um tipo de dados que você pode retornar de uma função é outra função. Quando essa nova função é retornada, todas as variáveis e argumentos usados na função que a criou não desaparecem. Em vez disso, a função pai "fecha."Em outras palavras, nada pode olhar para dentro dele e ver as variáveis que ele usou, exceto para a função que ele indicar. Essa nova função tem uma habilidade especial de olhar para trás dentro da função que a criou e ver os dados dentro dela.

function the_closure() {
  var x = 4;
  return function () {
    return x; // Here, we look back inside the_closure for the value of x
  }
}

var myFn = the_closure();
myFn(); //=> 4

Outra maneira muito simples de explicar é em termos de alcance:

Toda vez que você criar um escopo menor dentro de um escopo maior, o escopo menor será sempre capaz de ver o que está no escopo maior.

Uma função em JavaScript não é apenas uma referência a um conjunto de instruções (como na linguagem C), mas também inclui uma estrutura de dados ocultos que é composta de referências a todas as variáveis não locais que usa (variáveis capturadas). Tais funções de duas peças são chamadas de fechamentos. Cada função em JavaScript pode ser considerada um fechamento.

Os encerramentos são funções com um estado. É um pouco semelhante a "isto" no sentido de que "isto" também fornece estado para uma função, mas função e "este" são objetos separados ("este" é apenas um parâmetro extravagante, e a única maneira de ligá-lo permanentemente a uma função é criar um fechamento). Enquanto "isto" e função sempre vivem separadamente, uma função não pode ser separada de seu fechamento e a linguagem não fornece meios para acessar variáveis capturadas.

Porque todas estas variáveis externas referenciadas por uma função listicamente aninhada são na verdade variáveis locais na cadeia das suas funções lexicamente envolventes (variáveis globais) pode ser assumidas como variáveis locais de alguns função de raiz), e a cada execução de uma função cria novas instâncias de suas variáveis locais, segue-se que cada execução de uma função de retorno (ou de outra forma transferir-lo, tais como registrá-lo como uma chamada de retorno) uma função aninhada cria um novo fechamento (com seu próprio potencialmente conjunto exclusivo de referenciados variáveis não-locais, que representam o seu contexto de execução).

Além disso, deve ser entendido que as variáveis locais em JavaScript não são criados no frame da pilha, mas no heap e destruídos apenas quando ninguém os está referenciando. Quando uma função retorna, as referências às suas variáveis locais são diminuídos, mas eles ainda podem ser não-null se durante a execução atual, eles se tornaram parte de um fechamento, e ainda são referenciadas pelo seu léxico funções aninhadas (que só pode acontecer se as referências a estas funções aninhadas foram devolvidos ou de outra forma transferidos para algum código externo).

Exemplo:

function foo (initValue) {
   //This variable is not destroyed when the foo function exits.
   //It is 'captured' by the two nested functions returned below.
   var value = initValue;

   //Note that the two returned functions are created right now.
   //If the foo function is called again, it will return
   //new functions referencing a different 'value' variable.
   return {
       getValue: function () { return value; },
       setValue: function (newValue) { value = newValue; }
   }
}

function bar () {
    //foo sets its local variable 'value' to 5 and returns an object with
    //two functions still referencing that local variable
    var obj = foo(5);

    //Extracting functions just to show that no 'this' is involved here
    var getValue = obj.getValue;
    var setValue = obj.setValue;

    alert(getValue()); //Displays 5
    setValue(10);
    alert(getValue()); //Displays 10

    //At this point getValue and setValue functions are destroyed
    //(in reality they are destroyed at the next iteration of the garbage collector).
    //The local variable 'value' in the foo is no longer referenced by
    //anything and is destroyed too.
}

bar();

Um fecho é uma função que tem acesso ao escopo de outra função (suas variáveis e funções). A maneira mais fácil de criar um fechamento é com uma função dentro de uma função; a razão é que em JavaScript uma função sempre tem acesso a sua função contendo ambito.

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        alert(outerVar);
    }
    
    innerFunction();
}

outerFunction();

Alerta: macaco

No exemplo acima, a função exterior é chamada que por sua vez chama innerFunction. Note como o outerVar está disponível para qualquer função inner, evidenciado por sua indicação correta do valor do outerVar.

Agora considere o seguinte:

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        return outerVar;
    }
    
    return innerFunction;
}

var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction());

Alerta: macaco

ReferenceToInnerFunction é definido como outerFunction (), que simplesmente devolve uma referência a innerFunction. Quando referenceToInnerFunction é chamado, ele retorna outerVar. Mais uma vez, como acima, isto demonstra que a função interna tem acesso à função externa, uma variável da função externa. Além disso, é interessante notar que ele mantém este acesso mesmo depois que a função externa terminou de executar.

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        return outerVar;
    }
    
    return innerFunction;
}

var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction());

outerFunction = null;
alert(referenceToInnerFunction());

A razão pela qual o referencetoinfunction ainda pode aceder ao valor de outerVar é porque quando o encerramento foi criado pela primeira vez colocando uma função interna dentro da função externa, a função interna adicionou uma referência a o escopo da função externa (suas variáveis e funções) para a sua cadeia de escopo. O que isso significa é que innerFunction tem um ponteiro ou referência a todas as variáveis de outerFunction, incluindo outerVar. Assim, mesmo quando outerFunction terminar a execução, ou mesmo se ele for excluído ou definido como nulo, as variáveis em seu âmbito, como outerVar, ficar na memória por causa do saldo de referência a elas por parte do innerFunction que tenha sido devolvido para referenceToInnerFunction. Para libertar verdadeiramente outerVar e o resto das variáveis de outerFunction a partir da memória você teria que se livrar desta referência notável a elas, por exemplo, definindo referenceToInnerFunction como null também.

//////////

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        alert(outerVar);
    }
    
    outerVar = "gorilla";

    innerFunction();
}

outerFunction();

Eu simplesmente apontaria para a Página de Encerramento do Mozilla . É a melhor, a maior parte da explicação concisa e simples {[[5]} do básico de fechamento e uso prático que eu encontrei. É altamente recomendado para qualquer um que aprende JavaScript.

E sim, eu até recomendaria a uma criança de 6 anos -- se a criança de 6 anos está aprendendo sobre fechamentos, então é lógico que eles estejam prontos para compreender a explicaçãoconcisa e simples fornecida no artigo.