¿Qué son los cierres en JavaScript y cómo funcionan?



Los cierres en JavaScript se crean cada vez que se crea una función, en el momento de la creación de la función. Proporciona un mejor control sobre el código al usarlos.

es un lenguaje orientado a funciones que le da mucha libertad al usuario. Puede crear una función dinámicamente, copiarla a otra variable o pasarla como argumento a otra función y llamarla desde un lugar diferente más tarde. Los cierres en JavaScript se crean cada vez que se crea una función, en el momento de la creación de la función. En este artículo, entenderemos los cierres en la siguiente secuencia:

Introducción a los cierres en JavaScript

Un cierre es una combinación de función junto con referencias a su estado circundante, es decir, el entorno léxico. En otras palabras, un cierre le proporciona acceso desde una función interna al alcance de una función externa.





codificador - cierres en javascript - edureka

La mayoría de los desarrolladores utilizan cierres en JavaScript de forma consciente o inconsciente. Proporciona un mejor control sobre el código al usarlos. Además, es la pregunta más frecuente durante cualquier .



Ejemplo:

function foo () {var x = 10 function inner () {return x} return inner} var get_func_inner = foo () console.log (get_func_inner ()) console.log (get_func_inner ()) console.log (get_func_inner ())

Salida:

10
10
10



cómo elevar un número a una potencia en java

Aquí, puede acceder al variable x que se define en la función foo () a través de la función interior (), ya que la última conserva la cadena de alcance de la función envolvente en el momento de la ejecución de la función envolvente. Por lo tanto, la función interna conoce el valor de x a través de su cadena de alcance. Así es como puede usar cierres en JavaScript.

Prácticos cierres

Los cierres le permiten asociar el entorno léxico con una función que opera sobre esos datos. Esto tiene paralelismos obvios con programación orientada a objetos , donde los objetos nos permiten asociar las propiedades del objeto con uno o más métodos.

En consecuencia, puede usar un cierre en cualquier lugar donde normalmente podría usar un objeto con un solo método.

Ejemplo:

function makeSizer (tamaño) {return function () {document.body.style.fontSize = size + 'px'}} var size12 = makeSizer (12) var size14 = makeSizer (14) var size16 = makeSizer (16)

El ejemplo anterior generalmente se adjunta como una devolución de llamada: una función única que se ejecuta en respuesta al evento.

Cadena de alcance

Los cierres en JavaScript tienen tres ámbitos como:

  • Alcance local
  • Alcance de las funciones externas
  • Alcance global

Un error común es no darse cuenta de que, en el caso de que la función externa sea en sí misma una función anidada, el acceso al alcance de la función externa incluye el alcance adjunto de la función externa, creando efectivamente una cadena de alcances de función.

// alcance global var x = 10 función sum (a) {función de retorno (b) {función de retorno (c) {// funciones externas alcance función de retorno (d) {// alcance local return a + b + c + d + x}}}} console.log (sum (1) (2) (3) (4)) // log 20

También se puede escribir sin funciones anónimas:

// alcance global var x = 10 función sum (a) {función de retorno sum2 (b) {función de retorno sum3 (c) {// funciones externas alcance función de retorno sum4 (d) {// alcance local return a + b + c + d + x}}}} var s = sum (1) var s1 = s (2) var s2 = s1 (3) var s3 = s2 (4) console.log (s3) // log 20

En el ejemplo anterior, hay una serie de funciones anidadas, todas las cuales tienen acceso al alcance externo de una función. Por lo tanto, puede decir que los cierres tienen acceso a todos los alcances de funciones externos dentro de los cuales fueron declarados.

Cierre dentro de un bucle

Puede utilizar cierres en JavaScript para almacenar una función anónima en cada índice de un formación . Tomemos un ejemplo y veamos cómo se usan los cierres dentro de un bucle.

convertir de doble a int java

Ejemplo:

función exterior () {var arr = [] var i para (i = 0 i<3 i++) { // storing anonymus function arr[i] = function () { return i } } // returning the array. return arr } var get_arr = outer() console.log(get_arr[0]()) console.log(get_arr[1]()) console.log(get_arr[2]())

Salida:

3
3
3
3

Con esto, hemos llegado al final de nuestro artículo. Espero que haya entendido cómo funcionan los cierres en JavaScript y cómo se utilizan para obtener un mejor control del código.

Ahora que conoce los cierres en JavaScript, consulte el por Edureka. La capacitación para la certificación de desarrollo web lo ayudará a aprender a crear sitios web impresionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google y a implementarlo en Amazon Simple Storage Service (S3).

Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios de 'Cierres en JavaScript' y nos comunicaremos con usted.