Como você explicaria os fechamentos de JavaScript para alguém com conhecimento dos conceitos em que eles consistem (por exemplo, funções, variáveis ​​e similares), mas que não entendem eles mesmos?

Vi o exemplo de esquema dado na Wikipedia, mas infelizmente não ajudou.

Um encerramento é um par de:

1. Uma função e
2. Uma referência ao escopo externo dessa função (ambiente lexical)

Um ambiente lexical é parte de todo contexto de execução (quadro de pilha) e é um mapa entre identificadores (ou seja, nomes de variáveis ​​locais) e valores.

Toda função no JavaScript mantém uma referência ao seu ambiente lexical externo. Esta referência é usada para configurar o contexto de execução criado quando uma função é chamada. Essa referência permite que o código dentro da função "veja" variáveis ​​declaradas fora da função, independentemente de quando e onde a função é chamada.

Se uma função foi chamada por uma função, que por sua vez foi chamada por outra função, uma cadeia de referências a ambientes lexicais externos é criada. Essa cadeia é chamada de cadeia de escopo.

No código a seguir, innerforma um fechamento com o ambiente lexical do contexto de execução criado quando fooé chamado, fechando sobre a variável secret:

function foo() {
  const secret = Math.trunc(Math.random()*100)
  return function inner() {
    console.log(`The secret number is ${secret}.`)
  }
}
const f = foo() // `secret` is not directly accessible from outside `foo`
f() // The only way to retrieve `secret`, is to invoke `f`

Em outras palavras: em JavaScript, as funções carregam uma referência a uma "caixa de estado" privada, à qual somente elas (e quaisquer outras funções declaradas no mesmo ambiente lexical) têm acesso. Essa caixa de estado é invisível para o chamador da função, fornecendo um excelente mecanismo para ocultar e encapsular dados.

E lembre-se: as funções no JavaScript podem ser passadas como variáveis ​​(funções de primeira classe), o que significa que esses pares de funcionalidade e estado podem ser passados ​​pelo seu programa: semelhante à maneira como você pode passar uma instância de uma classe no C ++.

Se o JavaScript não tivesse encerramentos, mais estados teriam que ser passados ​​entre as funções explicitamente , tornando as listas de parâmetros mais longas e com o código mais barulhento.

Portanto, se você deseja que uma função sempre tenha acesso a um pedaço de estado particular, você pode usar um encerramento.

... e muitas vezes nós não queremos estado associado com uma função. Por exemplo, em Java ou C ++, quando você adiciona uma variável de instância privada e um método a uma classe, você está associando estado à funcionalidade.

Em C e na maioria dos outros idiomas comuns, após o retorno de uma função, todas as variáveis ​​locais não são mais acessíveis porque o quadro da pilha é destruído. No JavaScript, se você declarar uma função dentro de outra função, as variáveis ​​locais da função externa poderão permanecer acessíveis após o retorno dela. Dessa forma, no código acima, secretpermanece disponível para o objeto de função inner, depois que ele é retornado foo.

Usos dos fechamentos

Os fechamentos são úteis sempre que você precisar de um estado privado associado a uma função. Esse é um cenário muito comum - e lembre-se: o JavaScript não tinha uma sintaxe de classe até 2015 e ainda não possui uma sintaxe de campo privado. Os fechamentos atendem a essa necessidade.

Variáveis ​​de instância privada

No código a seguir, a função toStringfecha sobre os detalhes do carro.

function Car(manufacturer, model, year, color) {
  return {
    toString() {
      return `${manufacturer} ${model} (${year}, ${color})`
    }
  }
}
const car = new Car('Aston Martin','V8 Vantage','2012','Quantum Silver')
console.log(car.toString())

Programação Funcional

No código a seguir, a função innerfecha sobre ambos fne args.

function curry(fn) {
  const args = []
  return function inner(arg) {
    if(args.length === fn.length) return fn(...args)
    args.push(arg)
    return inner
  }
}

function add(a, b) {
  return a + b
}

const curriedAdd = curry(add)
console.log(curriedAdd(2)(3)()) // 5

Programação Orientada a Eventos

No código a seguir, a função onClickfecha sobre a variável BACKGROUND_COLOR.

const $ = document.querySelector.bind(document)
const BACKGROUND_COLOR = 'rgba(200,200,242,1)'

function onClick() {
  $('body').style.background = BACKGROUND_COLOR
}

$('button').addEventListener('click', onClick)

<button>Set background color</button>

Modularização

No exemplo a seguir, todos os detalhes da implementação estão ocultos dentro de uma expressão de função executada imediatamente. As funções ticke toStringfecham sobre o estado privado e as funções necessárias para concluir seu trabalho. Os fechamentos nos permitiram modularizar e encapsular nosso código.

let namespace = {};

(function foo(n) {
  let numbers = []
  function format(n) {
    return Math.trunc(n)
  }
  function tick() {
    numbers.push(Math.random() * 100)
  }
  function toString() {
    return numbers.map(format)
  }
  n.counter = {
    tick,
    toString
  }
}(namespace))

const counter = namespace.counter
counter.tick()
counter.tick()
console.log(counter.toString())

Exemplos

Exemplo 1

Este exemplo mostra que as variáveis ​​locais não são copiadas no fechamento: o fechamento mantém uma referência às próprias variáveis ​​originais . É como se o quadro da pilha permanecesse vivo na memória, mesmo após a saída da função externa.

function foo() {
  let x = 42
  let inner  = function() { console.log(x) }
  x = x+1
  return inner
}
var f = foo()
f() // logs 43

Exemplo 2

No código a seguir, três métodos log, incremente updatetoda apertada sobre o mesmo ambiente lexical.

E toda vez que createObjecté chamado, um novo contexto de execução (quadro da pilha) é criado e uma variável completamente nova x, e um novo conjunto de funções ( logetc.) são criados, que fecham sobre essa nova variável.

function createObject() {
  let x = 42;
  return {
    log() { console.log(x) },
    increment() { x++ },
    update(value) { x = value }
  }
}

const o = createObject()
o.increment()
o.log() // 43
o.update(5)
o.log() // 5
const p = createObject()
p.log() // 42

Exemplo 3

Se você estiver usando variáveis ​​declaradas var, tenha cuidado para entender qual variável você está fechando. Variáveis ​​declaradas usando varsão içadas. Isso é muito menos problemático no JavaScript moderno devido à introdução de lete const.

No código a seguir, toda vez que o loop inneré criado, uma nova função é encerrada i. Mas, como var ié içada fora do loop, todas essas funções internas se fecham sobre a mesma variável, o que significa que o valor final de i(3) é impresso três vezes.

function foo() {
  var result = []
  for (var i = 0; i < 3; i++) {
    result.push(function inner() { console.log(i) } )
  }
  return result
}

const result = foo()
// The following will print `3`, three times...
for (var i = 0; i < 3; i++) {
  result[i]() 
}

Pontos finais:

• Sempre que uma função é declarada em JavaScript, um fechamento é criado.
• Retornar um functionde dentro de outra função é o exemplo clássico de um fechamento, porque o estado dentro da função externa está implicitamente disponível para a função interna retornada, mesmo após a função externa ter concluído a execução.
• Sempre que você usa eval()dentro de uma função, um fechamento é usado. O texto você evalpode referenciar variáveis ​​locais da função e, no modo não estrito, você pode até criar novas variáveis ​​locais usando eval('var foo = …').
• Quando você usa new Function(…)(o construtor Function ) dentro de uma função, ela não fecha seu ambiente lexical: fecha-se sobre o contexto global. A nova função não pode fazer referência às variáveis ​​locais da função externa.
• Um fechamento no JavaScript é como manter uma referência ( NÃO uma cópia) ao escopo no momento da declaração da função, que por sua vez mantém uma referência ao seu escopo externo e assim por diante, até o objeto global no topo da a cadeia de escopo.
• Um fechamento é criado quando uma função é declarada; esse fechamento é usado para configurar o contexto de execução quando a função é chamada.
• Um novo conjunto de variáveis ​​locais é criado toda vez que uma função é chamada.

Ligações

• Os atributos privados simulados de Douglas Crockford e métodos privados para um objeto, usando closures.
• Uma ótima explicação de como o fechamento pode causar vazamento de memória no IE, se você não tomar cuidado.

Toda função em JavaScript mantém um link para seu ambiente lexical externo. Um ambiente lexical é um mapa de todos os nomes (por exemplo, variáveis, parâmetros) dentro de um escopo, com seus valores.

Portanto, sempre que você vir a functionpalavra - chave, o código dentro dessa função terá acesso a variáveis ​​declaradas fora da função.

function foo(x) {
  var tmp = 3;

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

  bar(10);
}

foo(2);

Isso registrará 16porque a função barfecha sobre o parâmetro xe a variável tmp, ambas existentes no ambiente lexical da função externafoo .

Função bar, juntamente com seu vínculo com o ambiente lexical da função, fooé um fechamento.

Uma função não precisa retornar para criar um fechamento. Simplesmente em virtude de sua declaração, toda função se fecha sobre seu ambiente lexical, formando um fechamento.

function foo(x) {
  var tmp = 3;

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

var bar = foo(2);
bar(10); // 16
bar(10); // 17

A função acima também registrará 16, porque o código interno barainda pode se referir ao argumento xe à variável tmp, mesmo que eles não estejam mais diretamente no escopo.

No entanto, como tmpainda está pendurado no interior bardo fechamento, está disponível para ser incrementado. Ele será incrementado toda vez que você ligarbar .

O exemplo mais simples de fechamento é o seguinte:

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 é chamada, um novo contexto de execução ecé criado. Juntamente com os argumentos da função e o objeto de destino, esse contexto de execução também recebe um link para o ambiente lexical do contexto de execução de chamada, o que significa que as variáveis ​​declaradas no ambiente lexical externo (no exemplo acima, ambos ae b) estão disponíveis em ec.

Toda função cria um fechamento porque toda função tem um link para seu ambiente lexical externo.

Observe que as próprias variáveis são visíveis de dentro de um fechamento, não de cópias.

PREFÁCIO: esta resposta foi escrita quando a pergunta era:

Como o velho Albert disse: "Se você não pode explicar isso para uma criança de seis anos, você realmente não entende por si mesmo." Bem, tentei explicar o fechamento de JS para um amigo de 27 anos e falhei completamente.

Alguém pode considerar que eu tenho 6 anos e estranhamente interessado nesse assunto?

Tenho certeza de que fui uma das únicas pessoas que tentaram levar a pergunta inicial literalmente. Desde então, a pergunta mudou várias vezes, então minha resposta agora pode parecer incrivelmente boba e fora de lugar. Espero que a ideia geral da história continue sendo divertida para alguns.

Sou um grande fã de analogia e metáfora ao explicar conceitos difíceis, então deixe-me tentar minha mão com uma história.

Era uma vez:

Havia uma princesa ...

function princess() {

Ela viveu em um mundo maravilhoso, cheio de aventuras. Ela conheceu seu príncipe encantado, viajou pelo mundo em um unicórnio, lutou contra dragões, encontrou animais falantes e muitas outras coisas fantásticas.

    var adventures = [];

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

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

    /* ... */

Mas ela sempre teria que voltar ao seu mundo monótono de tarefas e adultos.

    return {

E ela costumava contar a eles sobre sua última e incrível aventura como princesa.

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

Mas tudo o que veriam é uma garotinha ...

var littleGirl = princess();

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

littleGirl.story();

E mesmo que os adultos soubessem de princesas reais, eles nunca acreditariam nos unicórnios ou dragões porque nunca poderiam vê-los. Os adultos disseram que só existiam dentro da imaginação da menininha.

Mas nós sabemos a verdade real; que a menina com a princesa por dentro ...

... é realmente uma princesa com uma garotinha por dentro.

Levando a questão a sério, devemos descobrir o que uma criança de 6 anos de idade é capaz de cognitivamente, embora seja certo que alguém interessado em JavaScript não seja tão típico.

Sobre o desenvolvimento infantil: 5 a 7 anos , diz:

Seu filho poderá seguir as instruções em duas etapas. Por exemplo, se você disser ao seu filho: "Vá para a cozinha e me traga um saco de lixo", ele será capaz de se lembrar dessa direção.

Podemos usar este exemplo para explicar os fechamentos, da seguinte maneira:

A cozinha é um fechamento que possui uma variável local, chamada trashBags. Existe uma função dentro da cozinha chamada getTrashBagque pega um saco de lixo e o devolve.

Podemos codificar isso 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 por que os fechamentos são interessantes:

• Cada vez que makeKitchen()é chamado, um novo fechamento é criado com seu própriotrashBags .
• A trashBagsvariável é local para o interior de cada cozinha e não é acessível fora, mas a função interna nogetTrashBag propriedade tem acesso a ela.
• Toda chamada de função cria um fechamento, mas não há necessidade de manter o fechamento, a menos que uma função interna, que tenha acesso ao interior do fechamento, possa ser chamada de fora do fechamento. Retornar o objeto com a getTrashBagfunção faz isso aqui.

The Straw Man

Preciso saber quantas vezes um botão foi clicado e fazer algo a cada terceiro clique ...

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>

Agora isso vai funcionar, mas invade o escopo externo ao adicionar uma variável, cujo único objetivo é acompanhar a contagem. Em algumas situações, isso seria preferível, pois seu aplicativo externo pode precisar acessar essas informações. Mas, nesse caso, estamos apenas alterando o comportamento de cada terceiro clique, portanto, é preferível incluir essa funcionalidade dentro do manipulador de eventos .

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>

Observe algumas coisas aqui.

No exemplo acima, estou usando o comportamento de fechamento do JavaScript. Esse comportamento permite que qualquer função tenha acesso ao escopo em que foi criada, indefinidamente. Para praticamente aplicar isso, invoco imediatamente uma função que retorna outra função e, como a função que estou retornando, tem acesso à variável de contagem interna (devido ao comportamento de fechamento explicado acima), isso resulta em um escopo privado para uso pelo resultado função ... Não é tão simples? Vamos diluir ...

Um fechamento simples 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 retornada estão disponíveis para a função retornada, mas não estão diretamente disponíveis para o objeto da função retornada ...

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

Pegue? Portanto, em nosso exemplo principal, a variável count está contida no fechamento e sempre disponível para o manipulador de eventos, portanto, mantém seu estado de clique para clicar.

Além disso, esse estado de variável privada é totalmente acessível, para leituras e atribuições às suas variáveis ​​de escopo privadas.

Ai está; Agora você está encapsulando totalmente esse comportamento.

Postagem completa no blog (incluindo considerações sobre jQuery)

É difícil explicar os fechamentos porque são usados ​​para fazer funcionar algum comportamento que todo mundo espera intuitivamente que funcione de qualquer maneira. Acho que a melhor maneira de explicá-las (e da maneira que eu aprendi o que eles fazem) é de imaginar a situação sem eles:

    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 conhecesse fechamentos? Apenas substitua a chamada na última linha pelo corpo do método (que é basicamente o que as chamadas de função fazem) e você obtém:

console.log(x + 3);

Agora, onde está a definição de x? Não o definimos no escopo atual. A única solução é deixar plus5 levar seu escopo (ou melhor, o escopo de seus pais). Dessa forma, xé bem definido e está vinculado ao valor 5.

TLDR

Um fechamento é um link entre uma função e seu ambiente lexical externo (isto é, conforme escrito), de modo que os identificadores (variáveis, parâmetros, declarações de função etc.) definidos nesse ambiente sejam visíveis de dentro da função, independentemente de quando ou de onde a função é chamada.

Detalhes

Na terminologia da especificação ECMAScript, pode-se dizer que um fechamento é implementado pela [[Environment]]referência de cada objeto de função, que aponta para o ambiente lexical no qual a função é definida.

Quando uma função é chamada pelo [[Call]]método interno , a [[Environment]]referência no objeto de função é copiada na referência do ambiente externo do registro de ambiente do contexto de execução recém-criado (quadro de pilha).

No exemplo a seguir, a função ffecha-se sobre o ambiente lexical do contexto de execução global:

function f() {}

No exemplo a seguir, a função hfecha-se sobre o ambiente lexical da função g, que, por sua vez, fecha-se sobre o ambiente lexical do contexto de execução global.

function g() {
    function h() {}
}

Se uma função interna for retornada por uma externa, o ambiente lexical externo persistirá após o retorno da função externa. Isso ocorre porque o ambiente lexical externo precisa estar disponível se a função interna for eventualmente invocada.

No exemplo a seguir, a função se jfecha sobre o ambiente lexical da função i, o que significa que a variável xé visível a partir da função interna j, muito depois que a função iconcluir a execução:

function i() {
    var x = 'mochacchino'
    return function j() {
        console.log('Printing the value of x, from within function j: ', x)
    }
} 

const k = i()
setTimeout(k, 500) // invoke k (which is j) after 500ms

Em um fecho, as variáveis do ambiente exterior lexical -se são disponíveis, não cópias.

function l() {
  var y = 'vanilla';

  return {
    setY: function(value) {
      y = value;
    },
    logY: function(value) {
      console.log('The value of y is: ', y);
    }
  }
}

const o = l()
o.logY() // The value of y is: vanilla
o.setY('chocolate')
o.logY() // The value of y is: chocolate

A cadeia de ambientes lexicais, vinculada entre contextos de execução por meio de referências ao ambiente externo, forma uma cadeia de escopo e define os identificadores visíveis de qualquer função.

Observe que, na tentativa de melhorar a clareza e a precisão, essa resposta foi substancialmente alterada da original.

OK, fã de fechamentos de 6 anos de idade. Deseja ouvir o exemplo mais simples de fechamento?

Vamos imaginar a próxima situação: um motorista está sentado em um carro. Aquele carro está dentro de um avião. Avião está no aeroporto. A capacidade do motorista de acessar coisas fora de seu carro, mas dentro do avião, mesmo que esse avião saia de um aeroporto, é um fechamento. É isso aí. Quando você completa 27 anos, veja a explicação mais detalhada ou o exemplo abaixo.

Aqui está como eu posso converter minha história de avião no código.

var plane = function(defaultAirport) {

  var lastAirportLeft = defaultAirport;

  var car = {
    driver: {
      startAccessPlaneInfo: function() {
        setInterval(function() {
          console.log("Last airport was " + lastAirportLeft);
        }, 2000);
      }
    }
  };
  car.driver.startAccessPlaneInfo();

  return {
    leaveTheAirport: function(airPortName) {
      lastAirportLeft = airPortName;
    }
  }
}("Boryspil International Airport");

plane.leaveTheAirport("John F. Kennedy");

Esta é uma tentativa de esclarecer vários (possíveis) mal-entendidos sobre fechamentos que aparecem em algumas das outras respostas.

• Um fechamento não é criado apenas quando você retorna uma função interna. De fato, a função de fechamento não precisa retornar para que seu fechamento seja criado. Em vez disso, você pode atribuir sua função interna a uma variável em um escopo externo ou passá-la como argumento para outra função na qual ela pode ser chamada imediatamente ou a qualquer momento depois. Portanto, o fechamento da função de fechamento provavelmente é criado assim que a função de fechamento é chamada, já que qualquer função interna tem acesso a esse fechamento sempre que a função interna é chamada, antes ou depois do retorno da função de fechamento.
• Um fechamento não faz referência a uma cópia dos valores antigos das variáveis ​​em seu escopo. As próprias variáveis ​​fazem parte do fechamento e, portanto, o valor visto ao acessar uma dessas variáveis ​​é o valor mais recente no momento em que é acessado. É por isso que funções internas criadas dentro de loops podem ser complicadas, pois cada uma tem acesso às mesmas variáveis ​​externas em vez de pegar uma cópia das variáveis ​​no momento em que a função é criada ou chamada.
• As "variáveis" em um fechamento 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 ​​do fechamento que o contém, até o escopo global.
• Os fechamentos usam memória, mas não causam vazamentos de memória, já que o JavaScript, por si só, limpa 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 desconecta os valores de atributo DOM que fazem referência a fechamentos, mantendo assim referências a estruturas circulares.

Eu escrevi um post de blog há algum tempo explicando os fechamentos. Aqui está o que eu disse sobre fechamentos em termos de por que você quer um.

Os fechamentos são uma maneira de permitir que uma função tenha variáveis ​​privadas persistentes - ou seja, variáveis ​​que apenas uma função conhece, onde pode acompanhar as informações dos tempos anteriores em que foi executada.

Nesse sentido, eles permitem que uma função atue um pouco como um objeto com atributos privados.

Post completo:

Então, quais são essas coisas de fechamento?

Os fechamentos são simples:

O exemplo simples a seguir abrange todos os principais pontos de fechamento de JavaScript. ^*  

Aqui está uma fábrica que produz calculadoras que podem adicionar e multiplicar:

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 principal: Cada chamada para make_calculatorcria uma nova variável local n, que continua a ser utilizável pela calculadora adde multiplyfunciona por muito tempo depois dos make_calculatorretornos.

Se você conhece os quadros de pilha, essas calculadoras parecem estranhas: como elas podem continuar acessando napós make_calculatorretornos? A resposta é imaginar que o JavaScript não usa "quadros de pilha", mas usa "quadros de heap", que podem persistir após a chamada de função que os fez retornar.

Funções internas como adde multiply, que acessam variáveis ​​declaradas em uma função externa ^** , são chamadas de fechamentos .

Isso é praticamente tudo o que há para fechamentos.

^{* Por exemplo, abrange todos os pontos do artigo "Fechamentos para manequins", fornecidos em outra resposta , exceto o exemplo 6, que mostra simplesmente que as variáveis ​​podem ser usadas antes de serem declaradas, um fato interessante a ser conhecido, mas completamente não relacionado aos fechamentos. Ele também abrange todos os pontos da resposta aceita , exceto os pontos (1) que funções copiam seus argumentos em variáveis ​​locais (argumentos da função nomeada) e (2) que a cópia de números cria um novo número, mas a referência de objeto fornece outra referência ao mesmo objeto. Também é bom saber disso, mas novamente não relacionado a fechamentos. Também é muito semelhante ao exemplo nesta resposta, mas um pouco mais curto e menos abstrato. Não cobre o ponto deesta resposta ou atual este comentário, que é o JavaScript que dificulta a conexão dovalor de uma variável de loop em sua função interna: A etapa "plug-in" pode ser realizada apenas com uma função auxiliar que encerra sua função interna e é invocada em cada iteração de loop. (Estritamente falando, a função interna acessa a cópia da variável da função auxiliar, em vez de ter alguma coisa conectada.) Novamente, muito útil ao criar fechamentos, mas não faz parte do que é um fechamento ou como funciona. Existe uma confusão adicional devido aos fechamentos que funcionam de maneira diferente em linguagens funcionais como o ML, em que as variáveis ​​são vinculadas a valores e não a espaço de armazenamento, fornecendo um fluxo constante de pessoas que entendem os fechamentos de uma maneira (ou seja, a maneira "conectada") que é simplesmente incorreto para JavaScript, onde as variáveis ​​estão sempre ligadas ao espaço de armazenamento e nunca aos valores.}

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

Como eu explicaria isso a uma criança de seis anos:

Você sabe como os adultos podem possuir uma casa, e eles chamam de lar? Quando uma mãe tem um filho, o filho realmente não possui nada, certo? Mas seus pais possuem uma casa; portanto, sempre que alguém perguntar à criança "Onde está sua casa?", Ela poderá responder "aquela casa!" E apontar para a casa de seus pais. Um "fechamento" é a capacidade da criança de sempre (mesmo no exterior) poder dizer que tem uma casa, mesmo que sejam realmente os pais que são os donos da casa.

Você pode explicar o fechamento de 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);​

_{* Questão AC #}

Costumo aprender melhor comparando BOM / MAU. Eu gosto de ver o código de trabalho seguido pelo código não funcional que alguém provavelmente encontrará. Eu montei um jsFiddle que faz uma comparação e tenta resumir as diferenças para as explicações mais simples que eu possa ter.

Fechamentos feitos corretamente:

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 todas as iterações do loop. Observe que eu nomeei a variável npara destacar que ela é uma nova variável criada em um novo escopo de função e não é a mesma variável indexque está vinculada ao escopo externo.

• Isso cria um novo escopo e nestá vinculado a esse escopo; isso significa que temos 10 escopos separados, um para cada iteração.

• createClosure(n) retorna uma função que retorna n dentro desse escopo.

• Dentro de cada escopo, né vinculado a qualquer valor que tinha quando createClosure(n)foi chamado, portanto a função aninhada que é retornada sempre retornará o valor nque tinha quando createClosure(n)foi chamado.

Fechamentos feitos incorretamente:

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 createClosureArray()função e a função agora retorna o array completo, que à primeira vista parece mais intuitivo.

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

• Dentro desta função, uma variável denominada indexé definida. O loop é executado e adiciona funções à matriz que retorna index. Observe que indexé definido na createClosureArrayfunção que apenas é invocada uma vez.

• Como havia apenas um escopo dentro da createClosureArray()função, indexé vinculado apenas a um valor dentro desse escopo. Em outras palavras, cada vez que o loop altera o valor de index, ele é alterado para tudo o que faz referência a esse escopo.

• Todas as funções adicionadas à matriz retornam a indexvariável SAME do escopo pai onde foi definida, em vez de 10 diferentes de 10 escopos diferentes, como no 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 indexfoi modificado, o valor final era 10, portanto, todas as funções adicionadas à matriz retornam o valor da indexvariável única que agora está definida como 10.

Resultado

FECHAMENTOS DIREITOS
n = 0
n = 1
n = 2
n = 3
n = 4
n = 5
n = 6
n = 7
n = 8
n = 9

FECHAMENTOS ERRADOS
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10

Wikipedia sobre fechamentos :

Na 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.

Tecnicamente, em JavaScript , toda função é um encerramento . Ele sempre tem acesso a variáveis ​​definidas no escopo circundante.

Como a construção de definição de escopo no JavaScript é uma função , não um bloco de código como em muitas outras linguagens, o que geralmente queremos dizer com fechamento no JavaScript é uma função que trabalha com variáveis ​​não-locais definidas na função circundante já executada .

Os fechamentos 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 precisa ser assim. Ele pode ser nomeado (por exemplo mkdb) e executado posteriormente, gerando uma função de banco de dados toda vez que é chamada. Toda função gerada terá seu próprio objeto de banco de dados oculto. Outro exemplo de uso de fechamentos é quando não retornamos uma função, mas um objeto que contém várias funções para propósitos diferentes, cada uma dessas funções tendo acesso aos mesmos dados.

Eu montei um tutorial interativo em JavaScript para explicar como funcionam os fechamentos. O que é um fechamento?

Aqui está um dos exemplos:

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 sempre se lembram dos segredos que compartilharam com os pais, mesmo depois que os pais se foram. É assim que os fechamentos são para funções.

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

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

Sempre que você o chama, a variável local "name" é criada e recebe o nome "Mary". E toda vez que a função sai, a variável é perdida e o nome é esquecido.

Como você pode imaginar, como as variáveis ​​são recriadas toda vez que a função é chamada e ninguém mais as conhece, deve haver um local secreto onde elas são armazenadas. Pode ser chamado de Câmara Secreta ou pilha ou escopo local mas isso realmente não importa. Sabemos que eles estão lá, em algum lugar, escondidos na memória.

Mas, no JavaScript, existe uma coisa muito especial: as funções criadas dentro de outras funções também podem conhecer as variáveis ​​locais de seus pais e mantê-las enquanto viverem.

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

Portanto, enquanto estivermos na função pai, ele poderá criar uma ou mais funções filho que compartilham as variáveis ​​secretas do local secreto.

Mas o triste é que, se a criança também for uma variável privada de sua função pai, ela também morrerá quando o pai terminar, e os segredos morrerão com ela.

Então, para viver, a criança tem que sair antes que seja tarde demais

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 

E agora, mesmo que Maria "não esteja mais fugindo", a memória dela não se perde e seu filho sempre se lembrará de seu nome e de outros segredos que eles compartilharam durante o tempo que passaram juntos.

Então, se você chamar a criança de "Alice", ela responderá

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

É tudo o que há para dizer.

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

Aqui está um encerramento:

var a = 42;

function b() { return a; }

Sim. Você provavelmente usa isso muitas vezes ao dia.

Não há razão para acreditar que o fechamento seja um truque complexo de design para resolver problemas específicos. Não, os fechamentos são apenas sobre o uso de uma variável que vem de um escopo mais alto da perspectiva de onde a função foi declarada (não executada) .

Agora, o que ele permite que você faça pode ser mais espetacular, veja outras respostas.

Exemplo para o primeiro ponto por dlaliberte:

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

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

Um fechamento é o local onde uma função interna tem acesso a variáveis ​​em sua função externa. Essa é provavelmente a explicação mais simples de uma linha que você pode obter sobre os fechamentos.

Sei que já existem muitas soluções, mas acho que esse script pequeno e simples 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

Você está dormindo e convida Dan. Você diz a Dan para trazer um controlador XBox.

Dan convida Paul. Dan pede a Paul para trazer um controlador. Quantos controladores foram trazidos para a festa?

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.");

O autor de Closures explicou muito bem os fechamentos, explicando o motivo pelo qual precisamos deles e também o LexicalEnvironment necessário para entender os fechamentos.
Aqui está o resumo:

E se uma variável for acessada, mas não for local? Como aqui:

Nesse caso, o intérprete encontra a variável no exterior LexicalEnvironment objeto .

O processo consiste em duas etapas:

1. Primeiro, quando uma função f é criada, ela não é criada em um espaço vazio. Há um objeto LexicalEnvironment atual. No caso acima, é janela (a é indefinida no momento da criação da função).

Quando uma função é criada, ela obtém uma propriedade oculta, denominada [[Scope]], que faz referência ao LexicalEnvironment atual.

Se uma variável for lida, mas não puder ser encontrada em nenhum lugar, será gerado um erro.

Funções aninhadas

As funções podem ser aninhadas uma dentro da outra, formando uma cadeia de LexicalEnvironments, que também pode ser chamada de cadeia de escopo.

Portanto, a função g tem acesso a g, a e f.

Encerramentos

Uma função aninhada pode continuar ativa após a conclusão da função externa:

Como marcar LexicalEnvironments:

Como vemos, this.sayé uma propriedade no objeto de usuário, portanto continua ativa após a conclusão do Usuário.

E se você se lembrar, quando this.sayé criado, ele (como todas as funções) recebe uma referência interna this.say.[[Scope]]para o LexicalEnvironment atual. Portanto, o LexicalEnvironment da execução atual do usuário permanece na memória. Todas as variáveis ​​de User também são suas propriedades, portanto, elas também são mantidas com cuidado, e não são descartadas normalmente.

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

Para resumir:

1. A função interna mantém uma referência ao LexicalEnvironment externo.
2. A função interna pode acessar variáveis ​​a qualquer momento, mesmo que a função externa esteja concluída.
3. O navegador mantém o LexicalEnvironment e todas as suas propriedades (variáveis) na memória até que haja uma função interna que faça referência a ele.

Isso é chamado de encerramento.

As funções JavaScript podem acessar:

1. Argumentos
2. Locais (ou seja, suas variáveis ​​locais e funções locais)
3. Ambiente, que inclui:
   • globais, incluindo o DOM
   • qualquer coisa em funções externas

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

Observe que funções externas não são necessárias, embora ofereçam benefícios que não discuto aqui. Ao acessar dados em seu ambiente, um fechamento mantém esses dados ativos. Na subcasa das funções externas / internas, uma função externa pode criar dados locais e, eventualmente, sair, e, no entanto, se alguma função interna sobreviver após a saída da função externa, as funções internas manterão os dados locais da função externa vivo.

Exemplo de um fechamento que usa o ambiente global:

Imagine que os eventos de botão Votação para cima e Votação para pilha excedente sejam implementados como closures, voteUp_click e voteDown_click, que têm acesso a variáveis ​​externas isVotedUp e isVotedDown, definidas globalmente. (Por uma questão de simplicidade, estou me referindo aos botões de votação de perguntas do StackOverflow, não à matriz de botões de votação de resposta.)

Quando o usuário clica no botão VoteUp, a função voteUp_click verifica se isVotedDown == true para determinar se é necessário votar ou simplesmente cancelar uma votação para baixo. A função voteUp_click é um fechamento porque está acessando seu 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
}

Todas essas quatro funções são encerramentos, pois todos acessam seu ambiente.

Como pai de uma criança de 6 anos, atualmente ensina crianças pequenas (e um novato em relação à codificação sem educação formal, para que sejam necessárias correções), acho que a lição seria melhor através de brincadeiras práticas. Se a criança de 6 anos está pronta para entender o que é um fechamento, então ela tem idade suficiente para tentar. Eu sugiro colar o código no jsfiddle.net, explicando um pouco e deixando-os sozinhos para criar uma música única. O texto explicativo abaixo é provavelmente mais apropriado para uma criança de 10 anos.

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

DADOS: Os dados são uma coleção de fatos. Pode ser números, palavras, medidas, observações ou até apenas descrições de coisas. Você não pode tocar, cheirar ou provar. Você pode escrever, falar e ouvir. Você poderia usá-lo para criar cheiro e sabor toque usando um computador. Pode ser útil por um computador usando código.

CÓDIGO: Toda a escrita acima é chamada de código . Está escrito em JavaScript.

JAVASCRIPT: JavaScript é uma linguagem. Como inglês, francês ou chinês são idiomas. Existem muitos idiomas que são entendidos por computadores e outros processadores eletrônicos. Para que o JavaScript seja entendido por um computador, é necessário um intérprete. Imagine se um professor que só fala russo vem ensinar sua classe na escola. Quando o professor disser "садятся", a turma não entenderá. Mas, felizmente, você tem um aluno russo em sua classe que diz a todos que isso significa "todos se sentam" - assim todos vocês. A turma é como um computador e o aluno russo é o intérprete. Para JavaScript, o intérprete mais comum é chamado de navegador.

NAVEGADOR: Quando você se conecta à Internet em um computador, tablet ou telefone para visitar um site, usa um navegador. Exemplos que você pode conhecer são o Internet Explorer, Chrome, Firefox e Safari. O navegador pode entender o JavaScript e informar ao computador o que ele precisa fazer. As instruções JavaScript são chamadas de funções.

FUNÇÃO: Uma função em JavaScript é como uma fábrica. Pode ser uma pequena fábrica com apenas uma máquina dentro. Ou pode conter muitas outras pequenas fábricas, cada uma com muitas máquinas fazendo trabalhos diferentes. Em uma fábrica de roupas da vida real, pode haver resmas de tecido e bobinas de fio entrando e camisetas e jeans saindo. Nossa fábrica JavaScript processa apenas dados, não pode costurar, perfurar ou derreter metais. Em nossa fábrica de JavaScript, os dados entram e saem.

Todo esse material de dados parece um pouco chato, mas é realmente muito legal; podemos ter uma função que diga ao robô o que fazer para o jantar. Digamos que eu convide você e seu amigo para minha casa. Você gosta mais de coxas de frango, gosto de salsichas, seu amigo sempre quer o que você quer e meu amigo não come carne.

Como não tenho tempo para fazer compras, a função precisa saber o que temos na geladeira para tomar decisões. Cada ingrediente tem um tempo de cozimento diferente e queremos que tudo seja servido quente pelo robô ao mesmo tempo. Precisamos fornecer à função os dados sobre o que gostamos, a função pode 'conversar' com a geladeira e a função pode controlar o robô.

Uma função normalmente tem um nome, parênteses e chaves. Como isso:

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

Observe que /*...*/e //pare o código que está sendo lido pelo navegador.

NOME: Você pode chamar uma função sobre qualquer palavra que desejar. O exemplo "cookMeal" é típico ao unir duas palavras e fornecer à segunda uma letra maiúscula no início - mas isso não é necessário. Ele não pode ter um espaço e não pode ser um número por si só.

PAIS: "Parênteses" ou ()são a caixa de correio na porta da fábrica da função JavaScript ou uma caixa postal na rua para enviar pacotes de informações à fábrica. Às vezes, a caixa postal pode ser marcada, por exemplo cookMeal(you, me, yourFriend, myFriend, fridge, dinnerTime) , nesse caso, você sabe quais dados você precisa fornecer.

Suspensórios: "Suspensórios" que se parecem com isso {}são as janelas coloridas de nossa fábrica. De dentro da fábrica, você pode ver, mas de fora, não pode ver.

O EXEMPLO DE CÓDIGO LONGO ACIMA

Nosso código começa com a palavra função , então sabemos que é uma! Então o nome da função canta - essa é 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 em Este tem uma palavra em.: (person). Depois disso, existe uma chave assim {. Isso marca o início da função sing () . Tem um parceiro que marca o final de cantar () como este}

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

Portanto, essa função pode ter algo a ver com o canto e pode precisar de alguns dados sobre uma pessoa. Possui instruções internas para fazer algo com esses dados.

Agora, após a função cantar () , perto do final do código está a linha

var person="an old lady";

VARIÁVEL: As letras var representam "variável". Uma variável é como um envelope. Do lado de fora, este envelope está marcado como "pessoa". No interior, ele contém um pedaço de papel com as informações de que nossa função precisa, algumas letras e espaços unidos como um pedaço de barbante (chamado de barbante) que faz a frase "uma velha senhora". Nosso envelope pode conter outros tipos de coisas como números (chamados números inteiros), instruções (chamadas funções), listas (chamadas matrizes ). Como essa variável é gravada fora de todos os chavetas {}, e porque você pode ver através das janelas coloridas quando estiver dentro das chavetas, essa variável pode ser vista de qualquer lugar no código. Chamamos isso de 'variável global'.

VARIÁVEL GLOBAL: pessoa é uma variável global, o que significa que se você alterar seu valor de "uma velha senhora" para "um jovem", a pessoa continuará sendo jovem até que você decida alterá-la novamente e que qualquer outra função em o código pode ver que é um jovem. Pressione o F12botão ou veja as configurações de Opções para abrir o console do desenvolvedor de um navegador e digite "pessoa" para ver qual é esse valor. Digite person="a young man"para alterá-lo e digite "pessoa" novamente para ver se foi alterado.

Depois disso, temos a linha

sing(person);

Esta linha está chamando a função, como se estivesse chamando um cachorro

"Vamos cantar , venha e pegue uma pessoa !"

Quando o navegador carrega o código JavaScript e atinge essa linha, ele inicia a função. Coloquei a linha no final para garantir que o navegador tenha todas as informações necessárias para executá-lo.

Funções definem ações - a principal função é cantar. Ele contém uma variável chamada firstPart que se aplica ao canto da pessoa que se aplica a cada um dos versos da música: "Havia" + pessoa + "que engoliu". Se você digitar firstPart no console, não receberá resposta porque a variável está bloqueada em uma função - o navegador não pode ver dentro das janelas coloridas dos aparelhos.

FECHAMENTOS: Os fechamentos 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 seu próprio aparelho, o que significa que as variáveis ​​dentro deles não podem ser vistas de fora. É por isso que os nomes das variáveis ​​( criatura e resultado ) podem ser repetidos nos fechamentos, mas com valores diferentes. Se você digitar esses nomes de variáveis ​​na janela do console, não obterá seu valor porque está oculto por duas camadas de janelas coloridas.

Todos os fechamentos sabem qual é a variável da função sing () chamada firstPart , porque eles podem ver pelas janelas coloridas.

Após os fechamentos vêm as linhas

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

A função sing () chama cada uma dessas funções na ordem em que são dadas. Em seguida, o trabalho da função sing () será concluído.

Ok, conversando com uma criança de 6 anos, eu usaria as seguintes associações.

Imagine - você está brincando com seus irmãos e irmãs pequenos em toda a casa, e está andando com seus brinquedos e trouxe alguns deles para o quarto do seu irmão mais velho. Depois de um tempo, seu irmão voltou da escola e foi para o quarto dele, e ele trancou dentro dela, então agora você não podia mais acessar os brinquedos deixados lá de maneira direta. Mas você pode bater na porta e pedir ao seu irmão esses brinquedos. Isso é chamado de fechamento do brinquedo ; seu irmão fez isso por você, e agora ele está no escopo externo .

Compare com uma situação em que uma porta foi trancada por correntes de ar e ninguém dentro (execução da função geral); em seguida, algum incêndio local ocorre e incendeia a sala (coletor de lixo: D); em seguida, uma nova sala foi construída e agora você pode sair outro brinquedos lá (nova instância de função), mas nunca obtenha os mesmos brinquedos que foram deixados na primeira instância da sala.

Para uma criança avançada, eu colocaria algo como o seguinte. Não é perfeito, mas faz você se sentir sobre o que é:

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

Como você pode ver, os brinquedos deixados na sala ainda são acessíveis pelo irmão e não importa se a sala está trancada. Aqui está um jsbin para brincar com ele.

Uma resposta para um garoto de seis anos (supondo que ele saiba o que é uma função, o que é uma variável e quais são os dados):

Funções podem retornar 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, essa função pai "fecha". Em outras palavras, nada pode olhar dentro dele e ver as variáveis ​​que ele usou, exceto a função que retornou. Essa nova função tem uma capacidade especial de olhar para trás na função que a criou e ver os dados nela.

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 realmente simples de explicar é em termos de escopo:

Sempre que você criar um escopo menor dentro de um escopo maior, o escopo menor sempre poderá 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 oculta que é composta de referências a todas as variáveis ​​não-locais que ele usa (variáveis ​​capturadas). Essas funções de duas peças são chamadas de fechamentos. Toda função em JavaScript pode ser considerada um fechamento.

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

Como todas essas variáveis ​​externas referenciadas por uma função lexicamente aninhada são na verdade variáveis ​​locais na cadeia de suas funções anexas lexicamente (variáveis ​​globais podem ser consideradas variáveis ​​locais de alguma função raiz), e toda execução de uma função cria novas instâncias de suas variáveis ​​locais, segue-se que toda execução de uma função retornando (ou transferindo-a, como registrando-a como um retorno de chamada) uma função aninhada cria um novo fechamento (com seu próprio conjunto potencialmente exclusivo de variáveis ​​não-locais referenciadas que representam sua execução contexto).

Além disso, deve-se entender que variáveis ​​locais em JavaScript são criadas não no quadro da pilha, mas na pilha e destruídas apenas quando ninguém as está referenciando. Quando uma função retorna, as referências a suas variáveis ​​locais são decrementadas, mas ainda podem ser nulas se, durante a execução atual, se tornarem parte de um fechamento e ainda são referenciadas por suas funções lexicamente aninhadas (o que pode acontecer apenas se as referências a essas funções aninhadas foram retornadas ou transferidas para algum código externo).

Um 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();

Talvez um pouco além de todos, exceto o mais precoce dos seis anos, mas alguns exemplos que ajudaram a tornar o conceito de fechamento em JavaScript um clique para mim.

Um fechamento é 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 ao escopo da função que a contém.

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

outerFunction();

ALERTA: macaco

No exemplo acima, chama-se outerFunction, que por sua vez chama innerFunction. Observe como outerVar está disponível para innerFunction, evidenciado pelo alerta correto do valor de 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 retorna uma referência a innerFunction. Quando referenceToInnerFunction é chamado, ele retorna outerVar. Novamente, como acima, isso demonstra que innerFunction tem acesso a outerVar, uma variável de outerFunction. Além disso, é interessante notar que ele mantém esse acesso mesmo após a execução da outerFunction.

E é aqui que as coisas ficam realmente interessantes. Se nos livrarmos de outerFunction, digamos defini-lo como nulo, você pode pensar que referenceToInnerFunction perderia seu acesso ao valor de outerVar. Mas esse não é o caso.

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

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

outerFunction = null;
alert(referenceToInnerFunction());

ALERTA: macaco ALERTA: macaco

Mas como é isso? Como referenceToInnerFunction ainda pode saber o valor de outerVar agora que outerFunction foi definido como nulo?

A razão pela qual referenceToInnerFunction ainda pode acessar o valor de outerVar é porque, quando o fechamento foi criado pela primeira vez, colocando innerFunction dentro de outerFunction, innerFunction adicionou uma referência ao escopo do outerFunction (suas variáveis ​​e funções) à sua cadeia de escopos. O que isso significa é que innerFunction possui um ponteiro ou referência a todas as variáveis ​​de outerFunction, incluindo outerVar. Portanto, mesmo quando o outerFunction terminar de executar, ou mesmo se ele for excluído ou definido como nulo, as variáveis ​​em seu escopo, como outerVar, permanecem na memória por causa da excelente referência a eles na parte do innerFunction que foi retornada para referenceToInnerFunction. Para liberar verdadeiramente a outerVar e o restante das variáveis ​​da outerFunction da memória, você precisaria se livrar dessa excelente referência a elas,

//////////

Duas outras coisas sobre fechamentos a serem observadas. Primeiro, o fechamento sempre terá acesso aos últimos valores de sua função de contenção.

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

    innerFunction();
}

outerFunction();

ALERTA: gorila

Segundo, quando um fechamento é criado, ele mantém uma referência a todas as variáveis ​​e funções de sua função envolvente; não consegue escolher. E, portanto, os fechamentos devem ser usados ​​com moderação ou pelo menos com cuidado, pois podem consumir muita memória; muitas variáveis ​​podem ser mantidas na memória muito tempo após a conclusão da execução de uma função de contenção.

Eu simplesmente apontaria para a página Mozilla Closures . É a melhor, mais concisa e simples explicação dos princípios básicos do fechamento e do uso prático que eu encontrei. É altamente recomendado para quem aprende JavaScript.

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