El cierre es una dificultad en el lenguaje JavaScript y su característica. Muchas aplicaciones avanzadas dependen de los cierres para implementar.
Los cierres tienen tres características:
1. Funciones Funciones anidadas
2. La función puede referirse a parámetros y variables externas dentro
3. Los parámetros y variables no serán recolectados por el mecanismo de recolección de basura
Los cierres se refieren a funciones que tienen acceso a variables en el alcance de otra función. La forma más común de crear cierres es crear otra función dentro de una función y acceder a las variables locales de esta función a través de otra función.
Existe la ventaja de usar cierres, y también es una desventaja de ello, que es que puede residir las variables locales en la memoria y evitar el uso de variables globales. Las variables globales se pueden llamar en cada módulo, que seguramente será catastrófico.
Por lo tanto, se recomienda utilizar variables locales privadas y encapsuladas.
Después de ejecutar la función general, el objeto activo local se destruye y solo el alcance global se guarda en la memoria. ¡Pero la situación de cierre es diferente!
Cierres para funciones anidadas:
función aaa () {var a = 1; Función de retorno () {alerta (a ++)}; } var divertir = aaa (); divertir (); // 1 Después de la ejecución a ++, entonces A todavía está en ~ divertir (); // 2 Fun = Null; // A se recicla! !El resultado de salida anterior es 5;
Los cierres mantendrán variables en la memoria todo el tiempo, y si se usan de manera incorrecta, aumentará el consumo de memoria.
El principio de la recolección de basura en JavaScript
(1) En JavaScript, si ya no se hace referencia a un objeto, el objeto será reciclado por GC;
(2) Si dos objetos se refieren entre sí y ya no son referenciados por la tercera persona, entonces estos dos objetos se refiren entre sí también se reciclarán.
Entonces, ¿cuáles son los beneficios de usar cierres? Los beneficios del uso de cierres son:
1. Espero que una variable esté estacionada en la memoria durante mucho tiempo
2. Evite la contaminación de las variables globales
3. La existencia de miembros privados
1. Acumulación de variables globales
<script> var a = 1; function abc () {a ++; alerta (a);} abc (); // 2ABC (); // 3 </script>2. Variables locales
<script> function abc () {var a = 1; a ++; alerta (a);} abc (); // 2ABC (); // 2 </script>Entonces, ¿cómo se puede lograr la variable A que tanto una variable local como se puede acumular?
3. Acumulación de variables locales (que los cierres pueden hacer)
<script> function outer () {var x = 10; function de return () {// función de la función anidada x ++; alerta (x); }} var y = outer (); // La función externa se asigna a la variable y; y (); // y La función se llama una vez, el resultado es 11y (); // y la función se llama la segunda vez, el resultado es 12, dando cuenta de la acumulación </script>Declaraciones de funciones y expresiones de funciones en JS:
En JS podemos declarar una función a través de la función de palabras clave:
<script> function abc () {alert (123);} abc (); </script>También podemos usar un "()" para convertir esta declaración en una expresión:
<script> (function () {alerta (123);}) (); // luego llame directamente a la expresión anterior a través de (), por lo que la función no tiene que escribir un nombre; </script>4. Código modular para reducir la contaminación de las variables globales
<script> var abc = (function () {// abc es el valor de retorno de la función anónima externa var a = 1; return function () {a ++; alert (a);}}) (); abc (); // 2; Llamar a la función ABC una vez está llamando al valor de retorno de la función interna ABC (); // 3 </script>5. La existencia de miembros privados
<script> var aaa = (function () {var a = 1; function bbb () {a ++; alert (a);} function ccc () {a ++; alert (a);} return {b: bbb, // json estructura c: ccc}}) (); aaa.b (); //2aaa.c () // 3 </script>6. Encuentre directamente el índice del elemento correspondiente en el bucle
< xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <script> window.onloade = function () {var ali = = document.getElementsBytagName ('li'); for (var i = 0; i <ali.length; i ++) {ali [i] .Onclick = function () {// Cuando se hace clic, el bucle for ha terminado alerta (i); }; }} </script> </head> <body> <ul> <li> <li> 123 </li> <li> 456 </li> <li> 789 </li> <li> 010 </li> </ul> </body> </html>7. Use cierres para reescribir el código anterior:
< xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <script> window.onloade = function () {var ali = = document.getElementsBytagName ('li'); for (var i = 0; i <ali.length; i ++) {(function (i) {ali [i] .Onclick = function () {alerta (i);};}) (i); }}; </script> </head> <body> <ul> <li> 123 </li> <li> 456 </li> <li> 789 </li> </ul> </body> </html>