JavaScript Desmitificado: Clausuras (closures)

Repaso de alcance o ambito

En el capítulo anterior (funciones) se toco el tema del alcance. Veamos una vez más en que consistía esto.

El alcance de una variable en Javacript llega tan lejos como se extienda el contexto de una función, es decir, si declaro un variable dentro de una función solo será visible dentro de la misma, incluyendo todos los bloques que estén dentro de ella, esto quiere decir que serán visibles dentro de los condicionales (if), ciclos (for, while, do, etc) y otras funciones encerradas en el mismo ámbito.

var free = "soy libre"; function myFunction() { var notFree = 'estoy encerrado'; console.log(free); // => soy libre } console.log(notFree); // => ReferenceError: notFree is not defined

12345678910 varfree="soy libre"; functionmyFunction(){   varnotFree='estoy encerrado';   consolelog(free);// => soy libre} consolelog(notFree);// => ReferenceError: notFree is not defined

En este código, la variable free es accesible en la función myFunction porqué su alcance es todo lo largo del archivo. El alcance de la variable notFree es solo dentro de la función myFunction, por eso obtenemos un error al imprimirla fuera de dicha función. Este es el ejemplo más simple de una clausura.

---

El famoso caso “this”

Ocurre mucho, incluso a programadores experimentados, usar this en ámbitos equivocados. Una ocurrencia común que se me viene a la mente es cuando se usa en jQuery.

JS Bin

Dentro de cada ámbito this tiene un valor diferente. En la función “oneFunction” se refiere a un objeto de la función misma. Dentro de la función otherFunction el valor sigue siendo el mismo ya que que se refiere a una función del mismo objeto. Ahora cuando entra en la función de jQuery, se refiere al objeto seleccionado del DOM, es por esto que cuando invocamos console.log(this.variable); imprime undefined.

---

¿Cuándo usar clausuras?

Normalmente hacemos uso de clausuras cuando queremos retornar un ámbito encerrado en un objeto.

Vemos unos ejemplos de usos comunes de clausuras.

Fábricas

Las fabricas son objetos cuya única función es crear otros objetos, esto con el fin de simplificar la tarea de generar nuevas instancias. Esta idea en conocida por ser unos de los patrones de diseño presentados por un grupo de programadores conocidos como “The Gang of Four” en su libro “Design Patterns: Elements of Reusable Object-Oriented Software”

var user; function userFactory(name) { var introduce = function() { console.log('Mi nombre es ' + name); }; // Closure created here. return (function() { return { name: name, introduce: introduce }; }()); } user = userFactory('Oscar'); console.log(user.introduce()); // => Hola mi nombre es Oscar

1234567891011121314151617181920 varuser;   functionuserFactory(name){   varintroduce=function(){  consolelog('Mi nombre es '+name);  };   // Closure created here.  return(function(){  return{  name:name,  introduce:introduce  };  }());  }    user=userFactory('Oscar');    consolelog(userintroduce());// => Hola mi nombre es Oscar

Singleton

Singleton es un patrón de diseño que consiste en que solo exista una instancia del objeto en memoria, por lo tanto cada vez que se trate de acceder a dicho objeto, siempre se estará manejando la misma instancia.

Veamos el ejemplo propuesto por Addy Osmani es su libro “Learning JavaScript Design Patterns”, esta disponible en su sitio web, es totalmente gratuito.

El siguiente código puede encontrarse aquí

var mySingleton = (function () { // Instance stores a reference to the Singleton var instance; function init() { // Singleton // Private methods and variables function privateMethod(){ console.log( "I am private" ); } var privateVariable = "Im also private"; var privateRandomNumber = Math.random(); return { // Public methods and variables publicMethod: function () { console.log( "The public can see me!" ); }, publicProperty: "I am also public", getRandomNumber: function() { return privateRandomNumber; } }; }; return { // Get the Singleton instance if one exists // or create one if it doesn't getInstance: function () { if ( !instance ) { instance = init(); } return instance; } }; })();

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 varmySingleton=(function(){  // Instance stores a reference to the Singleton  varinstance;  functioninit(){  // Singleton  // Private methods and variables  functionprivateMethod(){  consolelog("I am private");  }  varprivateVariable="Im also private";  varprivateRandomNumber=Mathrandom();  return{  // Public methods and variables  publicMethod:function(){  consolelog("The public can see me!");  },  publicProperty:"I am also public",  getRandomNumber:function(){  returnprivateRandomNumber;  }  };  };  return{  // Get the Singleton instance if one exists  // or create one if it doesn't  getInstance:function(){  if(!instance){  instance=init();  }  returninstance;  }  };})();

---

Fin

En este capítulo aprendiste como utilizar uno de los temas menos entendidos de Javascript. Puede parecer complejo o rebuscado al principio, pero con el tiempo, a medida que tu conocimiento del lenguaje avance, empezaras a utilizarlas sin darte cuenta.

Espero que este recurso haya sido de ayuda.

Por favor, contribuye al esparcimiento del conocimiento compartiendo este artículo en las redes sociales. Velo como una manera de retribuir a la comunidad lo que te ha dado.

Como siempre estoy a la orden a través de la sección de comentarios de más abajo para aclarar todas tus inquietudes.

Hasta la próxima.