Para asegurarse al 100% de que comprende los cierres ahora,
Trabajemos en este desafío de codificación número 2.
Y en realidad este es más un desafío de pensamiento.
que un desafío de codificación.
Entonces, lo que quiero que hagas es tomar este IIFE aquí.
y al final de la función,
simplemente adjunte un detector de eventos
que cambia el color del elemento h1 seleccionado.
Así que este encabezado aquí en azul, está bien.
Y eso debería suceder cada vez
que se hace clic en el elemento del cuerpo.
Así que cada vez que hacemos clic aquí.
Y lo importante aquí es
que no vuelva a seleccionar el elemento h1.
Así que solo usa este encabezado que tienes aquí.
Está bien.
Así que ese es todo el código que tienes que escribir.
que es realmente simple.
Pero el verdadero desafío aquí es que quiero que
explícate a ti mismo,
o incluso a alguien a tu alrededor por qué esto funciona.
Entonces, al hacer clic en el cuerpo, el texto cambiará a azul.
Y entonces va a funcionar
pero tienes que entender
y tienes que explicar por qué funcionó.
Y entonces este es un buen ejercicio,
porque ser capaz de explicar algo
a otra persona significa que usted mismo lo ha entendido.
Así que realmente espero que hagas esto
aunque no implica mucha codificación.
Pero sigue siendo muy importante hacer esto.
Así que tómate todo el tiempo que necesites y piensa en
cuando se ejecuta exactamente la función de devolución de llamada.
Y, por supuesto, lo que eso significa para las variables.
que intervienen en este ejemplo.
Así que de nuevo tómate el tiempo que necesites
y te veo aquí en un minuto
básicamente con mi propia explicación.
Así que el código que tenías que escribir era simplemente este.
Así que seleccionando el elemento del cuerpo
y luego agregue el detector de eventos al hacer clic,
y luego esta función de devolución de llamada.
Y luego simplemente estoy cambiando el estilo aquí.
a azul
Entonces tenga en cuenta que no seleccionamos el h1 aquí nuevamente.
Simplemente usé la variable de encabezado
que ya habíamos seleccionado antes.
Así que vamos a darle una caja fuerte.
Y haré clic ahora en el cuerpo.
Y de hecho, se volvió azul, y funcionó bien.
Entonces, ¿por qué funcionó esto?
O en otras palabras, ¿cómo funciona esta devolución de llamada aquí?
obtener acceso a la variable de encabezado?
Y una vez más, la explicación es el cierre.
Así que esperaba que realmente explicaras básicamente
cómo funciona el cierre para usted o para otra persona.
Y así, en este ejemplo particular, el cierre es necesario.
o es util
porque en el momento en que se ejecuta esta devolución de llamada aquí,
este IIFE,
por lo que esta expresión de función inmediatamente invocada es
ahora se ha ido
Así que ya se ha ejecutado.
Y con ella, esta variable aquí básicamente también desapareció.
¿Bien?
Así que todo eso se ha ido.
Pero aún así, esta función aquí está adjunta
al elemento del cuerpo.
Y entonces está esperando que sucedan algunos eventos allí.
Y cuando el evento sucede, bueno,
entonces esta función aquí es, por supuesto, ejecutada.
Y de nuevo, aunque el entorno
en el que se creó esta función aquí ya se ha ido,
todavía es capaz de acceder a las variables
que se crearon en esa variable
para cuando nació la función, por así decirlo.
Así que este es el lugar de nacimiento de la función de controlador de eventos aquí.
Y por lo tanto la función
recuerda todas las variables presentes en el momento de su nacimiento.
También podemos decir
que el encabezado está en la mochila de esta función.
Así que esa explicación también funciona.
Y puedes ir aún más lejos y profundizar en la teoría.
y básicamente tratar de explicar
cómo funciona todo esto entre bastidores.
Pero eso ya te lo expliqué
en la conferencia más teórica,
así que no voy a entrar en eso de nuevo.
Está bien.
Así que espero que hayas logrado explicarte esto a ti mismo,
tal vez a tu perro, lo que sea.
Pero lo importante es que ahora entiendes
como funciona el cierre
y cómo y cuándo aparece.
Así que este fue otro gran ejemplo.
de un cierre que aparece.
De todas formas con esto hemos terminado
esta sección bastante importante sobre funciones.
Y así en el siguiente,
finalmente construiremos otro proyecto visual
con una interfaz gráfica de usuario
lo cual es realmente emocionante.
Así que esa sección se trata de arreglos,
y vamos a construir juntos una aplicación increíble allí.
Así que espero verte allí lo antes posible.