¿Qué son los Closures? Más videos
Comentarios: 18
Likes: 0 Persona
Duración: 12.32 minutos
Dificultad: Intermedio
Descripción del tema
Mediante los closures podemos resolver varios problemas cuando desarrollamos componentes o alguna aplicación, es importante conocer este concepto aplicado a JavaScript.
Un closure es la manera en como una función dentro de otra función contenedora puede hacer referencia a las variables después de que la función contenedora ha terminado de ejecutarse. Este concepto puede ser un poco difícil de comprender y de explicar así que veamos un ejemplo.
function sayHi(seconds){
var hi = 'Hi folks!';
setTimeout(function(){
console.info(hi); //Referenciando a la variable ‘hi’
},seconds*1000);
}
sayHi(2);
En el ejemplo anterior se puede ver claramente como la función “sayHi” termina su ejecución y después de 1 segundo se ejecuta la función interna mostrando el mensaje contenido en la variable “hi”, la cual pertenece a la función contenedora, a esto se le llama closure.
Ocultar variables globales
Muchas veces declaramos variables en el “global scope”, es una mala práctica hacer esto por que estas variables pueden interferir con algunas librerías o con el código de algún otro miembro de nuestro equipo. Si utilizamos una función anónima auto ejecutable y hacemos uso de closures podemos resolver de una manera sencilla este problema. A continuación se muestra como hacer esto:(function(args){
var thisWasGlobal = 'closure!';
window.onload = function(){
console.info(thisWasGlobal);
}
})();
El código anterior encapsula las variables declaradas dentro de la función anónima, de esta manera las variables estarán en un scope donde no hay peligro que sobre escriban a otras variables.
Closures y Scope
Se ha mostrado que un closure permite referenciar variables que existen y pertenecen a la función contenedora. Es importante mencionar que al hacer un closure, éste toma el último valor de la variable de la función contenedora. Un caso muy común es cuando utilizamos un ciclo o loop.window.onload = function(){
var el = document.getElementById('element');
var events = ['click','mouseover','mouseout'];
for(var i=0;i<events.length;i++){
var item = events[i];
el['on'+item] = function(){
console.info('event: '+item);
}
}
}
Al ejecutar el código anterior se agregan los eventos contenidos en el arreglo “events” al elemento seleccionado, el problema se ocasiona cuando se imprime en la consola el evento que se ejecuta pues siempre imprime lo mismo, en este caso “mouseout”, esto sucede porque la variable “item” contiene a “mouseout” como último valor asignado.
Para solucionar este problema es necesario crear un scope diferente para cada iteración del ciclo, de esta manera se crearán variables diferentes; esto se realiza mediante una función anónima que se auto ejecute. Si tienes alguna duda en cuanto al concepto scope te recomiendo ver el tema anterior. El código quedaría de la siguiente manera.
window.onload = function(){
var el = document.getElementById('element');
var events = ['click','mouseover','mouseout'];
for(var i=0;i<events.length;i++){
(function(){ //función anónima crea un nuevo scope
var item = events[i]; //item pertenece a la function anónima
el['on'+item] = function(){
console.info('event: '+item); //un closure de la función anónima
}
})();
}
}
Si ejecutamos el código anterior veremos que ahora el evento correcto se imprime en la consola.
Conclusiones
En este tema vimos que es un closure y cuán útil es cuando introducimos el concepto de scope, esto es algo que debemos aprender y tener en cuenta a la hora de desarrollar nuestros proyectos. El tema de closures es complicado, te recomiendo darle una leída a “JavaScript Closures” escrito por Jim Jey, es un excelente material que debes leer. Como siempre puedes dejar tus dudas o sugerencias en los comentarios, y no olvides de votar en tu red social preferida.Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
18Comentarios
Muchas Gracias por todo este curso.. te felicito, de primerísima calidad
Hola, quiero felicitar al curso. Es muy útil y bien explicado, espero el próximo.
hola una pregunta en que momento en una aplicacion real me serviria usar un clousure?
Tiene muchos usos, estoy seguro que has utilizado esta técnica mas de una vez solo que no sabías que tenía nombre :o un ejemplo es para crear botones dinámicamente, para crear propiedades privadas dentro de un objeto, para crear timeouts, etc... saludos
Excelente videotutorial... en serio felicitaciones...
Saludos, felicitaciones por este excelente curso, descubri Ext JS de casualidad buscando Grids + Ajax y ahora estoy aprendiendo como usar esta herramienta tan util y amigable. Bueno amigo, un saludo, por tu acento creo que eres de Mexico, por aqui te escribo desde Venezuela, Espero sigas con los videoTutoriales, son mas practicos y comprensibles.
mmmmmm.... muy bueno siguiree aprendiendo espero q despues hagamos una mini aplicacion extjs+php
jejeje me costo un poco entenderlo.. pero lo logreeeee de verdad que es util!! gracias Crys
Si, la verdad es un tema complicado pero creo que vale la pena entenderlo.
hola una pregunta tu le das escucha al elemento cuando escribis el['on'+item] =........ pues es que no entiendo bien como el elemento se da cuenta de cada interaccion gracias.
El navegador es el responsable de avisarnos cuando sucede algo con el elemento, tu unicamente necesitas registrar un listener a determinado evento. Saludos
Excelente, voy entendiendo paso a paso, me gustaria profundiar mas en este estilo de desarrollo
Hola Crysfel excelentes estos vídeotutoríales pero tengo algo que no entiendo en la parte de el['on'+item]; o sea por lo que entiendo al ponerle un evento a un elemento primero uno coloca el evento igual la funcion que va a tener la accion, y dentro de la funcion el elemento igual a lo que haría, que en este caso deberia ser; llamar la funcion interna que es la que imprime el evento que se esta ejcutando.si estoy mal en todo caso podrias explicarme como llama esta parte , que se ejecute sobre ese elemento los eventos no se si me hice netender
Hola, Primeramente Felicitarte. Explicas muy bien. Por otra parte hay temas que no tienen el material de apoyo. Como es el caso. Un saludo.
Está excelente el tutorial, de verdad muy bueno! Gracias!
La explicacion de closures más práctica que encontre, lo haces simple, felicitaciones.
Buen artículo, La explicación es clara y sencilla para empezar a dominar este tema. Muchas gracias por tú aporte.
Amigo muchas gracias, me has salvado la vida, mil y mil gracias