post thumbnail

JavaScript Desmitificado: Clausuras (closures)

Publicado Por: Oscar González, El 17/03/2014


Detalles del Curso:

Dificultad: Heroe

Duración: 10 min


Más artículos en JavaScript Desmitificado

Este es el artículo Clausuras (closures) de la serie JavaScript Desmitificado - Mostrar todos

  1. Objetos
  2. Funciones
  3. Clausuras (closures)
  4. Coerción parte 1
  5. Coercion Parte 2
  6. Concurrencia
  7. Calidad

En este capítulo de la serie explicaré lo que son las clausuras en Javascript y como su uso puede mejorar la calidad del código que escribimos.


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

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

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;
    }

  };

})();

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.


¿Te ha gustado esta publicación?

Compártela:

Por Oscar González

Conoce más sobre este autor aquí


comments powered by Disqus