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.

CommonJs Modules

CommonJs especifica una forma de definir módulos, esto ayuda a tener más estructurado y ordenado nuestro código para que la interoperabilidad entre módulos sea más flexible.

Antes de ver ejemplos prácticos, hay 3 partes que usa CommonJS:

1. Variable “require” que es la función que recibe el identificador de un módulo, la cual devuelve lo que es exportado por dicho módulo.

2. Variable “exports” a la que el módulo debe agregar las API que quiera exportar.

3. Variable “module” que contiene un objeto con una propiedad id.

Al usar CommonJS Modules se pueden exportar funciones u objetos, ahora veremos ejemplos para cada uno de estos usos:

Módulo: operaciones.js

exports.suma(x, y){

return x +y;

};

exports.resta(x, y){

return x - y;

};

Uso: calculadora.js

var operacion = require('operaciones');

var suma = operacion.suma(20 , 5);

alert(suma); // Muestra 25

var resta = operacion.resta(18,3);

alert(resta); // Muestra 15

Como vemos en el ejemplo anterior, solo estamos exportando funciones, como podemos ver, en este caso no es necesario usar la variable modules, a continuación veremos un ejemplo en el cual usaremos un objeto trabajar en nuestro módulo:

Módulo: persona.js

function Persona(nombre, apellidoPaterno, apellidoMaterno){

this.nombre = nombre;

this.apellidoPaterno = apellidoPaterno;

this.apellidoMaterno = apellidoMaterno;

};

Persona.prototype.getNombreCompleto = function(){

return 'Nombre: ' + this.nombre + ' ' + this.apellidoPaterno + ' ' + this.apellidoMaterno;

}; // Prototype nos ayudaa definir una función para el objeto, eso //quiere decir que al exportar el objeto, tambien exportaremos la función

module.exports = Person; // Exportamos el objeto con su función

Uso:

var Persona= require(‘Persona’’);

var andres = new Persona('Andres','Tello','Campos');

var nombre = andres.getNombreCompleto();

alert(nombre); // Muestra: 'Nombre: Andres Tello Campos'

Como podemos ver, hay varias formas de usar el commonJS Modules, solo se necesita un poco de creatividad y buenas prácticas para darle el mejor uso posible y así tener un código más óptimo posible.

Herencia por prototipos en Javascript

La herencia por prototipos a diferencia de la clasica en el cual se tiene un clase y cada objeto es miembro de una clase, se trata de hacer un objeto basado en otro objeto y luego que se le aplican cambios.

Esta forma de hacer herencia también es gracias a Crockford:

function objeto(o){
function F(){};
F.prototype = o;
return new F();
};

Esa es la función mágica, veamos los objetos:

var Jugador = {
nombre: "sergio",
};

var Basquetbolista = objeto(Jugador);
Basquetbolista.nombre = "Ulises";
Basquetbolista.posicion = "alero";
Jugador.club = "Equipo A"

Como se puede ver, se puede agregar una propiedad a Jugador luego de que el objeto Basquetbolista fue creado, y esta pasará también a Basquetbolista.

Herencia parasitaria en Javascript

La herencia parasitaria presentada por Douglas Crockford, es una técnica muy utilizada cuando se trabaja con Javascript, veamos el siguiente código:

var Persona = function(nombre, edad){
return {
nombre: nombre,
ingresarEdad: function(e) { edad: e; },
obtenerEdad: function() {return edad;}
};
};

var Programador = function(nombre, edad, especialidad){
var e = Persona(nombre, edad);
e.especialidad = especialidad;
return e;
};

Como es facil darse cuenta Programador empieza a usar a Persona y le agrega una propiedad, así serían los objetos:

var aurora = new Persona("Aurora", 27);
var sergio = new Programador("Sergio", 29, "Javascript");

Y si deseo obtener la edad de sergio, sólo tendría que poner esto:

sergio.obtenerEdad();

Operadores corto circuito en Javascript

Los operadores corto circuíto sirven para hacer evaluaciones booleanas, es usado con diversos lenguajes de programación, veamos ahora un ejemplo simple de como funciona en Javascript.

Los operadores son: && y || y lo que hacen es asignar el valor del segundo operando basandose en la evaluación del primero, el operador && es muy útil cuando se desea encontrar objetos nulos antes de acceder a sus atributos.

Por ejemplo si tuvieramos el siguiente código:

if (persona) {
    var nombre = persona.obtenerNombre();
}

Con estos operadores se puede tener esto:

var nombre = persona && persona.obtenerNombre();

Y en el caso de tener un if / else:

if (nombre) {
    var encargado = nombre;
} else {
    var encargado = "Algún nombre";
}

Con el operador sería así:

var encargado = nombre || "Algun nombre";

Metodos y variables privadas en Javascript

En Javascript no existen palabras reservadas como public o private, no hay class, solo objetos que heredan de otros y todos los campos de cualquier objeto son públicos.

Pero, entonces ¿Cómo es posible usar Javascript en diversos aspectos y con una orientación a objetos?

Pues para ello existe algo llamado closure (clausura).

Si una función externa devuelve una función interna, la función interna tiene acceso a las variables de la función externa, incluso si la función externa es devuelta posteriormente. Para que esto quede claro podemos ver lo siguiente:

function funcionExterna(variable) {
    var  variableDeLaFuncionExterna = variable;
    return function funcionInterna() {
        return variableDeLaFuncionExterna;
    }
}

var foo = functionExterna(20);
foo(); // Esto devolvera 20

Si nos percatamos la funcion interna esta siendo llamada antes de que la funcion externa sea retornada y funciona. Esto es un closure.

Con un ejemplo voy a tratar de explicarlo mejor, si tuvieramos el siguiente código:

var futbolista = {
    "goles": 0,
    "anotaGol": function(gol){
        if (gol > 0) this.goles += gol;
    }
};

futbolista.anotaGol(5);
console.log(futbolista.goles); //Devuelve 5
futbolista.anotaGol(3);
console.log(futbolista.goles); //Devuelve 8

Se podría modificar a futbolista, incluso sin hacer uso de su anotaGol, eso podría ser peligroso, sobre todo en proyectos grandes donde hay muchos archivos y variables, que facilmente podrían confundir a todos.

En ese caso sería mejor algo como esto:

var jugador = function(){
    var acumuladorPrivado = 0;
    return {
        "obtenerGoles":function(){
        return acumuladorPrivado;
        },
        "anotaGol":function(gol){
            if (gol > 0) acumuladorPrivado += gol;
        }
    };
};

var sergio = new jugador();
console.log(sergio.acumuladorPrivado); //Devuelve undefined
console.log(sergio.obtenerGoles()); // Devuelve 0
sergio.anotaGol(4); // Agrega 4 al acumuladorPrivado
console.log(sergio.obtenerGoles()); // Devuelve 4

Y tenemos un singleton. :)

Funciones anonimas autoinvocadas o autoejecutables con Javascript

Javascript es un lenguaje que despierta pasiones, a veces furia por lo caotico que puede convertirse si no se tiene cuidado, sin embargo nadie puede negar que a pesar de no ser el lenguaje de programación perfecto, Javascript tiene mucho potencial y su aplicación esta casí en todo lado. (web, móvil, escritorio, servidor, y más)

Este artículo pequeño trata sobre las funciones que se llaman a si mismas, y porque son tan poderosas en aplicaciones reales.

La forma básica de una función de este tipo con javascript es de la siguiente manera:

(function(){
   //Alguna porcion de codigo
})();

Y ahí viene la pregunta, porqué usar esos parentesis () al final, la respuesta puntual es porque estos parentesis permiten la ejecución inmediata de lo que le anteceda, por ejemplo, si tuvieramos una funcion del tipo:

function saludo(){
     alert('Hola mundo');
}

Y quisieramos ejecutarla sólo tendríamos que llamarla así:

saludo();

Esos dos parentesis hacen que se llame a saludo, ese es el mismo principio. Es por ello que al poner los parentesis automaticamente se ejecutará.

Es así como que tenemos una forma de ejecutar funciones automaticamente y dependiendo del contexto, si se revisa el código de Jquery veremos que hay muchas de estas en su código, un ejemplo muy simple de entender es cuando queremos que una porción de código se ejecute automaticamente cada cierto tiempo, para lo cual podriamos tener lo siguiente:

(function hacerAlgo(){
     //Aqui va todo el codigo de la función que se va a repetir
     //
     //Esta ultima linea hace que se repita automaticamente
     setTimeout(hacerAlgo(), 10000);
})();