O fechamento é uma dificuldade na linguagem JavaScript e em seu recurso. Muitos aplicativos avançados dependem de fechamentos para implementar.
Os fechamentos têm três características:
1. Funções aninhadas de função
2. A função pode se referir a parâmetros e variáveis externos dentro
3. Parâmetros e variáveis não serão coletados pelo mecanismo de coleta de lixo
Os fechamentos se referem a funções que têm acesso a variáveis no escopo de outra função. A maneira mais comum de criar fechamentos é criar outra função dentro de uma função e acessar variáveis locais dessa função por meio de outra função.
Há uma vantagem do uso de fechamentos e também é uma desvantagem, que é que ele pode residir variáveis locais na memória e evitar o uso de variáveis globais. As variáveis globais são chamáveis em todos os módulos, que devem ser catastróficos.
Portanto, é recomendável usar variáveis locais privadas e encapsuladas.
Após a execução da função geral, o objeto ativo local é destruído e apenas o escopo global é salvo na memória. Mas a situação de fechamento é diferente!
Fechamentos para funções aninhadas:
função aaa () {var a = 1; retornar function () {alert (a ++)}; } var Fun = aaa (); FUN (); // 1 Após a execução a ++, a ainda está em ~ diversão (); // 2 diversão = null; // a é reciclado! !O resultado da saída acima é 5;
Os fechamentos manterão as variáveis na memória o tempo todo e, se usadas incorretamente, aumentarão o consumo de memória.
O princípio da coleção de lixo em JavaScript
(1) No JavaScript, se um objeto não for mais referenciado, o objeto será reciclado pelo GC;
(2) Se dois objetos se referirem e não forem mais referenciados pela terceira pessoa, esses dois objetos se referirem também.
Então, quais são os benefícios do uso de fechamentos? Os benefícios do uso de fechamentos são:
1. Espero que uma variável esteja estacionada na memória por muito tempo
2. Evite a contaminação de variáveis globais
3. A existência de membros privados
1. Acumulação de variáveis globais
<Cript> var a = 1; função abc () {a ++; alerta (a);} abc (); // 2ABC (); // 3 </script>2. Variáveis locais
<Cript> função abc () {var a = 1; a ++; alerta (a);} abc (); // 2ABC (); // 2 </script>Então, como a variável A pode ser alcançada para que uma variável local e possa ser acumulada?
3. Acumulação de variáveis locais (que o fechamento pode fazer)
<SCRIPT> function Outer () {var x = 10; Return function () {// função aninhada função x ++; alerta (x); }} var y = Outer (); // A função externa é atribuída à variável y; y (); // A função y é chamada uma vez, o resultado é 11y (); // A função Y é chamada da segunda vez, o resultado é 12, percebendo o acúmulo </sCript>Declarações de função e expressões de função em JS:
No JS, podemos declarar uma função através da função da palavra -chave:
<Cript> function abc () {alert (123);} abc (); </script>Também podemos usar um "()" para transformar essa declaração em uma expressão:
<Cript> (function () {alert (123);}) (); // então chama diretamente a expressão anterior através (), para que a função não precise escrever um nome; </sCript>4. Código modular para reduzir a poluição de variáveis globais
<Cript> var abc = (function () {// abc é o valor de retorno da função anônima externa var a = 1; retornar function () {a ++; alert (a);}}) (); abc (); // 2; Chamar a função ABC uma vez está realmente chamando o valor de retorno da função interna ABC (); // 3 </script>5. A existência de membros particulares
<Cript> var aaa = (function () {var a = 1; função bbb () {a ++; alert (a);} função ccc () {a ++; alert (a);} return {b: bbb, // json struction c: ccc}}) (); aa.b (); //2aaa.c () // 3 </sCript>6. Encontre diretamente o índice do elemento correspondente no loop
<! xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "pt"> <head> <meta http-equiv = "content-ttype" content = "text/html; charset = utf-8"/> <title> </shript = <clript> document.getElementsByTagName ('li'); for (var i = 0; i <ali.length; i ++) {ali [i] .OnClick = function () {// Quando clicado, o loop for terminou alerta (i); }; }} </sCript> </head> <body> <ul> <li> <li> 123 </li> <li> 456 </li> <li> 789 </li> <li> 010 </li> </ul> </body> </html>7. Use o fechamento para reescrever o código acima:
<! xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "pt"> <head> <meta http-equiv = "content-ttype" content = "text/html; charset = utf-8"/> <title> </shript = <clript> document.getElementsByTagName ('li'); for (var i = 0; i <ali.length; i ++) {(function (i) {ali [i] .OnClick = function () {alert (i);};}) (i); }}; </script> </ad Head> <body> <ul> <li> 123 </li> <li> 456 </li> <li> 789 </li> </ul> </body> </html>