Guía para principiantes para los cierres de JavaScript

"Cierre"Están entre los bloques de construcción más fundamentales de JavaScript. Como principiante de JavaScript, es posible que haya utilizado cierres a sabiendas o sin saberlo; Sin embargo, reunir conocimiento sobre el funcionamiento de los cierres es crucial, ya que le permite comprender la interacción entre variables y funciones y el proceso de ejecución de su programa JavaScript.

Este artículo es completo Guía para principiantes a Cierres de JavaScript en el que discutiremos el acceso variable dentro de diferentes ámbitos.

Antes de sumergirnos en el concepto de cierres de JavaScript, primero explicaremos qué Alcance léxico es como ambos términos están asociados entre sí.

Alcance léxico en JavaScript

El alcance variable está determinado por su declaración en el código fuente, conocido como "Alcance léxico". Por ejemplo, en el ejemplo dado a continuación, el creado "nombre"La variable es una"global"Variable que significa que se puede acceder desde cualquier lugar del programa, como dentro del"DisplayMessage ()" función.

Sin embargo, "información" es un "local"Variable a la que solo se puede acceder dentro del"DisplayMessage ()" función:

Let Name = 'Alex';
función displayMessage ()
Dejar info = 'Hola! Mi nombre es';
consola.registro (info + " + nombre);

DisplayMessage ();

La ejecución del código anterior mostrará el siguiente resultado:

Alcance léxico anidado en JavaScript

Los ámbitos de las variables se pueden anidar utilizando el "Alcance léxico"De tal manera que la función interna puede tener acceso a las variables declaradas en el alcance externo.

Considere el siguiente ejemplo:

función displayMessage ()
Dejar info = 'Hola! Me llamo Alex.';
función show ()
consola.registro (información);

espectáculo();

DisplayMessage ();

En este ejemplo, el "DisplayMessage ()"La función tiene una variable local llamada"información"Y un anidado"espectáculo()"Función, donde"espectáculo()"Es un interno función que tiene la capacidad de acceder al valor del "información"Variable del alcance externo.

Entonces, cuando el "DisplayMessage ()"La función se ejecuta, llamará al"espectáculo()"Función, que luego accederá al"información"Variable y mostrar su valor en la consola:

Ahora, modificaremos el "DisplayMessage ()"Método y en lugar de invocar lo interior"espectáculo()"Función, agregaremos una declaración para devolver el"espectáculo()"Function Object:

función displayMessage ()
Dejar info = 'Hola! Me llamo Alex.';
función show ()
consola.registro (información);

show de regreso;

Además, hemos asignado el valor devuelto por el "DisplayMessage ()"Función a"X" variable:

Sea x = DisplayMessage ();

Por último, invocaremos "X()"Función que se refiere al"espectáculo()" función:

consola.log (x ());

Puede ver desde la salida dada, el valor de la variable local "información"Todavía existe, lo que generalmente permanece en la memoria hasta la ejecución de la función donde se declara:

Parece confundido? Esta es la magia de Cierre que has visto en el último ejemplo como "espectáculo()"Es una función de cierre que mantiene el alcance externo en su propio alcance.

¿Qué son los cierres de JavaScript?

Las funciones de JavaScript también sirven como "Cierre"Porque el cuerpo de una función tiene acceso a las variables que se definen fuera de ella. O podemos definir "Cierre"Como una función que sea una función infantil y puede acceder a las variables creadas dentro del"padre"Al alcance de la función.

Ahora, veremos algunos ejemplos para comprender la asociación entre los alcances variables y el cierre en JavaScript.

Ejemplo 1
Este ejemplo demuestra cómo un "local" variable "información"Se puede acceder dentro del"espectáculo()"Función donde se crea. Recuerde, el script restante no puede acceder a esto "información" variable:

función show ()
Dejar info = 'Hola! Me llamo Alex.';
Información de retorno;

espectáculo();

Cuando el "espectáculo()"La función se ejecuta, mostrará el valor almacenado en el"información" variable:

Ejemplo 2
Ahora, declararemos "información" como un "global"Variable que se refiere en el"espectáculo()Función "(con un alcance diferente):

Dejar info = 'Hola! Me llamo Alex.';
función show ()
Información de retorno;

espectáculo();

Como la función de JavaScript "espectáculo()"La función es una"Cierre", Mantendrá el alcance y el estado de la"información" variable:

Ejemplo 3
En otra situación, cuando las variables se definen en el alcance del "padre"Función, la"niño"La función aún puede acceder a su valor:

var displayMessage = function ()
Dejar info = 'Hola! Me llamo Alex.';
var show = function ()
consola.registro (información);

espectáculo();

La salida del programa dado significa que "espectáculo()"Que es una función infantil, puede acceder al"información"Variable declarada en el"DisplayMessage ()"Función principal:

Esa fue toda la información esencial relacionada con los cierres de JavaScript. Puede investigar más de acuerdo con sus requisitos.

Conclusión

Funciones de JavaScript también sirve como Cierre Porque el cuerpo de una función tiene acceso a las variables que se definen fuera de ella. Podemos definir Cierre Como una función infantil que puede acceder a las variables creadas dentro del alcance de la función principal. Este artículo es completo Guía para principiantes a Cierres de JavaScript en el que hemos discutido el acceso variable dentro de diferentes ámbitos.