O conceito de fechamentos, efeitos colaterais e cenários comuns

O conceito de fechamento

Defina uma função interna em uma função e retorne a função interna. Mesmo que a função externa tenha sido executada, as variáveis da função interna que fazem referência à função externa ainda são armazenadas na memória. Chamamos a coleção dessas variáveis de um fechamento (ou volta a função interna em um fechamento).
Algumas pessoas também definem o conceito de fechamento como: definir uma função dentro de uma função, então essa função interna é chamada de "fechamento".

function f1(){
    
    
	var a1=1;
    function f2(){
    
    
      console.log(a1)
    }
    return f2
}
let result=f1()
result();//1

f2 é chamado de fechamento

O papel dos fechamentos

Por meio do fechamento, o ambiente externo pode acessar as variáveis na função
Variáveis acessadas por f2 em f1 são sempre armazenadas na memória. Faça a mochila variável exclusiva de f2.
Usando encerramentos, as variáveis de função internas não poluirão as variáveis externas e evitarão conflitos

Efeitos colaterais de fechamentos

Variáveis residem na memória e causam estouro de memória, então lembre-se de esvaziá-las quando não estiverem em uso.
Solução: lembre-se de limpar a variável quando não estiver em uso

Ambiente de execução e cadeia de escopo

Para entender os fechamentos, devemos primeiro ter uma compreensão do ambiente de execução e do escopo de js

Cada função tem um ambiente de execução e um ambiente de execução está associado a um objeto variável.A coleção de objetos variáveis é chamada de cadeia de escopo.
O front end da cadeia de escopo é o objeto variável onde o código de execução atual está localizado, e o próximo objeto é a função externa, que continua até a variável global.
A resolução do identificador é um processo de rastreamento passo a passo do front end ao longo da cadeia do escopo.
Após a execução do código, o ambiente no qual ele está localizado será destruído.O ambiente de execução global na web é o objeto da janela, e o ambiente global será destruído quando o aplicativo sair.

Aplicação de fechamentos

O objeto img é frequentemente usado para relatórios de dados, da seguinte maneira:

var report = function(src) {
    
    
    var img = new Image();
    img.src = src;
}
report('http://xxx.com/xxx.png');

Quando este código está sendo executado, é descoberto que há um bug em alguns navegadores de versão inferior e alguns dados serão relatados. O motivo é que img é uma variável local na função de relatório. Depois que a função de relatório é chamada, o O objeto img é destruído imediatamente, e isso pode não ter tempo para enviar a solicitação http, portanto, esta solicitação será perdida.
Solução: Portanto, podemos usar um encerramento para fechar o objeto img para resolver o problema de perda de dados:

var report = (function() {
    
    
    var imgs = [];
    return function(src) {
    
    
        var img = new Image();
        imgs.push(img);
        img.src = src;
    }
})()


 (function(){
    
    
        //i在外部就不认识啦
        for(var i=0;i<count;i++){
    
    }
  })();
  console.log(i);//报错，无法访问