La Variable 'this' en Javascript

La variable 'this' en javascript hace referencia al propietario de la función que la está invocando o al objeto en donde dicha función es un objeto, cuando, por ejemplo, estamos desarrollando una aplicación web nuestro contexto global es 'window'.

Entonces si hacemos esto:

Console.log( this === window); //true

Nos da como resultado que la variable this es igual a window.

Entonces para notar la diferencia, como podríamos acceder a los valores de un objeto desde el propio objeto:

var persona = {

 nombre : 'Andres',

 apellidos: 'Tello Campos',

 skypeid: 'andrestc87'

};

Para poder acceder a sus valores lo hacemos así:

console.log(persona.nombre); //Muestra: Andres

console.log(persona.apellidos); //Muestra: Tello Campos

console.log(persona.skypeid); //Muestra: andrestc87

Pero qué pasaría si necesitamos una propiedad más dinámica, en la cual se usen los valores de las variables para por ejemplo concatenar el nombre con los apellidos:

var persona = {

 nombre : 'Andres',

 apellidos: 'Tello Campos',

 info: this.nombre + ' '+ this.apellidos

};

Si ejecutamos esto:

console.log(persona.info); //Muestra: undefinied

Muestra 'undefined', y porque?, cual es el problema?, el problema es que this no esta apuntando al objeto persona, sino que busca la referencia fuera, en el contexto global o en este caso a window.

para solucionarlo hacemos lo siguiente:

var persona = {

 nombre : 'Andres',

 apellidos: 'Tello Campos',

 info: function(){

this.nombre + ' '+ this.apellidos;

 }

};

console.log(persona.info()); //Muestra: Andres Tello Campos

Esto ocurre porque this apunta al propio objeto y busca las propiedades nombre y apellidos dentro del objeto el cual es su contexto y no en el contexto global.

Ahora veamos cual es el comportamiento cuando trabajamos con funciones, tenemos este bloque de código:

var appInicio = function(){

 var nombre = "Mundo"

 var decirHola = function(){

   console.log( 'Hola, ' + this.nombre );

 };

 decirHola(); // Invoca a la función

};

appInicio(); //Muestra: 'Hola, '

Pero por qué muestra sólo 'Hola, ', como la función decirHola no es ahora la propiedad de un objeto, this apunta de nuevo al global, osea a window, entonces como fuera de appInicio no encuentra la variable 'nombre', entonces solo muestra 'Hola, ', como solucionamos esto?, de la siguiente manera:

var appInicio = function(){

 var that = this; // that almacena en cache las variables que se definen dentro de la función

 var nombre = "Mundo"

 var decirHola = function(){

   console.log( 'Hola, ' + that.nombre );

 };

 decirHola(); // Invoca a la función

};

appInicio(); //Muestra: 'Hola, Mundo'

Lo que hicimos fue definir dentro de la función contenedora una nueva variable para que almacene en caché el valor de this y así esté disponible desde cualquier función usada en ese contexto.

Espero les haya gustado el post.