lunes, 26 de mayo de 2014

Javascript, closure, uso this y ámbito variables.

En el post de hoy veremos algunos conceptos bastante básicos pero que es imprescindible desde mi punto de vista dominar si te planteas algún desarrollo serio en javascript. Veremos técnicas “modernas” para encapsular nuestras librerías a la vez que intentaré explicar la diferencia entre ámbito y contexto.

This en javascript representa al contexto donde se invoca al método en el que nos encontramos, por ejemplo si estamos en un ámbito global this contiene información sobre el objeto window pero si hacemos lo mismo dentro de un objeto, this representa el objeto contenedor que llama a la función.

Podrías hacer la prueba y verías que si en ámbito global pones un breakpoint y analizas this, verás que es un objeto Window (navegador) con una serie de atributos. Si haces lo mismo dentro de un objeto, por ejemplo imagina que tienes un objeto persona con una función caminar, si evaluas this dentro de la función caminar verás que se corresponde a la instancia del objeto persona en el que te hallas y los atributos son las variables y métodos que se hayan definido dentro del propio objeto persona. Para llamar a una función situándola en contexto determinado podemos usar el método call o apply que tienen todos los objetos en javascript. Es importante diferenciar contexto y ámbito. Puedes tener 2 tipos de ámbito, global o local mientras que podrías tener infinidad de tipos contextos diferentes (tantos como instancias de objetos tengas).

Respecto al ámbito de las variables podemos definir variables de ámbito global o local. En javascript el ámbito lo marca la función que contiene la declaración de la variable a diferencia de un lenguaje como c# donde el ámbito lo marca el bloque de código. Por ejemplo en c# un If(){} ya tiene su propio ámbito y no podrías usar fuera del bloque del If la variable que has declarado dentro mientras que en javascript si puedes (mejor no lo hagas…). Veamos algún ejemplo en Javascript:
var variableGlobal = "global";
var variableLocal = "local";
algo = true;
function MostrarMensaje() {
   if (algo){
      var variableLocal = "local1";
   }
   alert(variableGlobal + ' ' + variableLocal);
}
function MostrarDeNuevoMensaje(){
   var variableLocal = "local2";
   alert(variableGlobal + ' ' + variableLocal);
}
MostrarMensaje();
MostrarDeNuevoMensaje();
alert(variableGlobal + ' ' + variableLocal);
La función MostrarMensaje sacará un mensaje “global local1, la función MostrarDeNuevoMensaje “global local2” y el alert que está en el contexto global mostrará “global local”. No hay mucho que profundizar simplemente dejar claro que en caso de definir una variable de ámbito local que se llame igual que una global que ya existe dentro de la función donde se ha definido la local, prevalece el valor de la local. No es obligatorio usar var para definir la variable pero sí recomendable sobretodo en ámbito global (…)

Hoy en día está de moda el bundle que es una técnica a través de la cual se fusionan todas las hojas de estilo de un site en un solo documento… hay que ir con cuidado a la hora de desarrollar librerías con las variables globales para evitar que otra librería que a priori no tiene nada que ver modifique el valor de tu variable global. Para evitar esto se suele desarrollar una librería encapsulando el código como si fuese un objeto. Esta técnica es conocida como Closure, y consiste en definir la librería como un objeto singleton. Veamos lo con un ejemplos:
var miLibreria = (function(){
  
})();
Dentro del bloque de código yo definiría los objetos de la librería y luego al final haría un return de este tipo donde devolveré un singleton de mi librería con tantos atributos y funciones como quiera mostrar hacía fuera del objeto.
return { Atributo: _atributo, Atributo2: _atributo2};
Al usar la librería lo haría así:
miLibreria.Atributo 
Veréis que sólo permite acceder a los atributos y métodos que se han definido en el return. De este modo la librería queda protegida y sabemos que nunca se machacarán variables desde fuera de la librería por error. El programador final verá y podrá usar sólo aquellos atributos y funciones que le expongamos en el singleton.

Hasta aquí el post de hoy, recordar que podéis seguir areaTIC en las principales redes sociales. Anímate a participar!

No hay comentarios:

Publicar un comentario