Saltar al contenido principal
Codigo Heroe
Tarea anterior
Introducción a los eventos19/21
A la lista de tareas
  1. 1. Eventos del usuario
  2. 2. Añadir un manejador de eventos
  3. 3. Sintaxis de los manejadores
  4. 4. Acciones predeterminadas
  5. 5. Funciones como argumentos
  6. 6. Eliminar clases con classList.remove()
  7. 7. Eventos de teclado
  8. 8. Identificar una tecla
  9. 9. Cerrar una ventana con ESC
  10. 10. Seleccionar los elementos de una galería
  11. 11. Añadir manejadores en un ciclo
  12. 12. Cambiar el src de una imagen
  13. 13. Depurar un manejador
  14. 14. Ámbito local
  15. 15. Ámbito global
  16. 16. Cambiar variables externas
  17. 17. Funciones dentro de funciones
  18. 18. Cierres
  19. 19. Un cierre en cada llamada
  20. 20. Usar cierres en los manejadores
  21. 21. Completar la galería
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Un cierre en cada llamada

Funciona. Los cambios de la variable global no afectan a la variable local que usa nuestra función.

El ejemplo funciona, pero siempre prepara el mismo valor dentro de collectContainer. ¿Y si no queremos comer pasta todos los días? Hay que poder elegir. Además, lo habitual es pasar valores a una función en lugar de escribirlos directamente en su ámbito local. Añadiremos un parámetro a collectContainer.

var collectContainer = function (food) {
  return function () {
    console.log('Comí ' + food);
  };
};

var schoolkid = collectContainer('pasta');
schoolkid();
// Muestra: Comí pasta

Ahora food será el parámetro de collectContainer, en lugar de una variable declarada en su cuerpo. Todo funcionará igual: la función devuelta conservará el acceso a ese parámetro y lo utilizará cuando la llamemos.

Ahora devolvemos la función interior directamente, sin guardarla en la variable eatDinner. Eso no cambia su funcionamiento.

Imaginemos que ahora hay dos estudiantes. Cada uno llevará su recipiente con comida de casa.

Comprobaremos que reasignar la variable global no cambia la comida de sus recipientes.

Cada llamada a collectContainer crea un nuevo ámbito con su propio parámetro food. La función que devuelve forma un cierre con acceso a ese parámetro. Por eso las dos funciones pueden utilizar comidas diferentes.

  • script.js
JavaScript
var food = 'ensalada'; var collectContainer = function (food) { return function () { console.log('Comí ' + food); }; }; var schoolkidFirst = collectContainer('pasta');
Consola

El código ha cambiado, haga clic en "Ejecutar" o active la ejecución automática.

Resultado de la ejecución

ObjetivosRealizado
0
    1. Después de schoolkidFirst, crea de la misma forma la variable schoolkidSecond. Pasa como argumento la cadena 'empanaditas'.
    2. Debajo, reasigna la variable global food con el valor 'apio'.
    3. Después, llama a la función guardada en schoolkidFirst.
    4. Debajo, llama a la función guardada en schoolkidSecond.
    5. Ahora rompe nuestro ejemplo: elimina el parámetro food de collectContainer. ¡Dales apio a los dos estudiantes! ¡Muajajá!
    Codigo Heroe

    © 2023-2026, codigoheroe.com