Cierres de la función JavaScript | Explicado
El concepto de cierres ha existido desde hace bastante tiempo, pero las personas tienen dificultades para entenderlo. Vamos a pasar paso a paso y hacer que sea realmente fácil de entender con la ayuda de ejemplos.
¿Cuáles son los cierres en JavaScript?
Muy brevemente, el cierre está teniendo acceso al alcance externo desde el alcance interno cuando se trabaja con funciones anidadas. Se crea un cierre cada vez que se ejecuta una función anidada en JavaScript. Las variables definidas dentro de la función se crean en la ejecución de la función y se eliminan de la memoria en la ejecución completa de la función respectiva.
Para comprender el concepto de cierres en JavaScript, necesitamos saber la diferencia entre el alcance global y el alcance local. Bueno, vamos a repasar estos realmente brevemente.
Ámbitos de variable
Como se mencionó anteriormente, hay dos alcances variables principales en JavaScript:
- Alcance global
- Alcance local
Las variables definidas fuera de cualquier función se conocen como variables globales y tener un alcance global. Se puede acceder a estas variables desde cualquier lugar dentro del programa, es por eso que usamos el término "global".
Comparativamente, las variables definidas dentro de una función se conocen como variables locales y se sabe que tienen un alcance local. El alcance local se divide aún más en el alcance de la función y el alcance del bloque, pero eso no es una preocupación importante para nosotros. Variables locales solo se puede acceder desde la función en la que se declaran
Tome este bloque de código para comprender el alcance:
var sitename = "Linuxhint!";function printSiteName ()
Let TopicName = "JavaScript";
consola.log (Sitename);
printsiteName ();
consola.log (TopicName);
Lo que estamos haciendo en el código anterior es que estamos creando una variable global nombre del sitio y lo estamos imprimiendo dentro de una función llamada printsiteName (), Esta función incluye una variable local nombre del tema Y estamos tratando de imprimir el valor de esta variable fuera de esta función. Aquí, nombre del sitio es una variable global y nombre del tema es una variable local. La salida del siguiente código es como:
Como puede ver claramente, pudimos acceder al nombre del sitio variables dentro de una función, pero no pudimos acceder a la variable local nombre del tema fuera de su función. Puede obtener más detalles sobre estas diferentes variables y alcance.
¿Cómo funciona un cierre en JavaScript?
Ahora que sabemos cómo funciona el alcance en JavaScript, podemos entender fácilmente el funcionamiento de los cierres.
Cierre son funciones que se anidan entre sí de tal manera que la función interna se alcanza localmente para la función externa, y la función exterior se reduce globalmente para la función interna. Lo que significa que la función interna tiene acceso a los atributos de la función exterior.
Para una mejor comprensión, tome el siguiente código:
function OuterFunction ()Let outVar = "Soy externo";
function innerFunction ()
Let Invar = "Soy interno";
consola.log (OutVar);
consola.log (invar);
return innerFunction ();
FUNCIÓN OUTER ();
Estamos creando un función exterior y un intermediario dentro de función exterior. Desde la función interior, estamos accediendo a la variable sallar ¿Cuál es la variable local del función exterior, e imprimir su valor junto con el valor de la variable dentro de la función interna.
Así es como funciona este código:
La salida del código anterior es:
Pudimos obtener los valores de ambas variables e imprimirlas en la consola utilizando el consola.registro() función.
Cómo tener múltiples funciones dentro de otra función en un cierre
Si nos referimos a la función exterior como la función principal del cierre y la función interna como la función infantil del cierre. Entonces podemos decir de esta manera que un solo padre puede tener varios hijos. Una función principal no tendrá acceso a los atributos de sus hijos. Sin embargo, cada niño tendrá acceso a los atributos de su padre. Dado que una función infantil también es un atributo de los padres, por lo que una función infantil también puede acceder a las otras funciones infantiles del mismo padre; Esto significa tener acceso a sus hermanos.
Nota: Los parámetros y argumentos también son accesibles para los niños.
Supongamos que queremos hacer una función que salude una función que lo llame. Esta función tiene 3 parámetros, primer nombre, middlename y dastName.
Primero, cree la función utilizando las siguientes líneas.
FUNCIÓN GOOWER (FirstName, MidDlename, LastName)// comandos posteriores dentro de aquí
Esta función de saluda es una función principal con cuatro hijos. 3 de los niños trabajan en los parámetros y devuelven el valor de los parámetros como:
función getFirst ()regresar FirstName;
función getMiddle ()
regresar middlename;
función getLast ()
regresar a lastname;
El último niño llama a todos sus hermanos e imprime los valores en la consola, que se implementa con las siguientes líneas:
función nameprinter ()consola.Log ("Bienvenido! " + getFirst () +" " + getMiddle () +" " + getLast ());
Al final de la función principal Saludador() Devuelve el nameprinter () niño al lugar donde se llama.
A, ejecutar todo este Cierre Necesitamos llamar a la función principal con la siguiente línea:
saluder ("John", "bukhari", "doe");El fragmento de código completo de este cierre es:
FUNCIÓN GOOWER (FirstName, MidDlename, LastName)función getFirst ()
regresar FirstName;
función getMiddle ()
regresar middlename;
función getLast ()
regresar a lastname;
función nameprinter ()
consola.Log ("Bienvenido! " + getFirst () +" " + getMiddle () +" " + getLast ());
return nameprinter ();
saluder ("John", "bukhari", "doe");
Obtendremos la siguiente salida:
Conclusión
El cierre es una característica que vino con la versión ES6 de JavaScript. Los cierres son la implementación del concepto basado en el alcance de las variables en JavaScript. Aprendimos qué son los cierres y, dado que se basan en el alcance de las variables, también aprendimos sobre el alcance. Pasamos por la diferencia entre el alcance global y el alcance variable en JS, y al final, probamos el funcionamiento de los cierres con la ayuda de ejemplos.