Curiosidades de Javascript: Formas de invocar funciones (Parte 2)

¡Hola frikazos de la informática!

Este post es la segunda parte de la serie “Formas de invocar funciones en Javascript“, si no habéis leído el primero, ahí os dejo el link. Os recomiendo que le echéis un vistazo antes de continuar leyendo, ya que sino puede que os veáis un poco perdidos… o no… no se, pero leedlo que yo os esperaré, y nos sentaremos juntos frente al mar, y de la mano podremos camina-a-ar. Sigamos.

Siento que haya tardado tanto en salir la segunda parte del post, pero estas semanas hemos tenido mucho curro…

… y la verdad es que ha sido algo frustrante porque tenía tanto que daros, tantas cosas que contaros, tenía tanto codigóóóó… guardado para vosotros… (sé que código lleva acento en la primera “o”). Por lo visto, hoy me siento algo musical, pero ahora que ya he sacado algo inspiración de la Srta. Daconte, ahora sí, sigamos.

En el otro artículo nos quedamos en la invocación de funciones como funciones normales y “corrientes”. El siguiente tipo de invocación que me toca explicar es la del constructor. Los que conozcáis la programación orientada a objetos ya sabéis lo que es un constructor , pero para los que no lo sepáis, un constructor es una función de una clase, que suele llevar el nombre de la misma clase en la que se encuentra, y sirve para instanciar una copia de la clase mediante la palabra clave new. En Javascript ocurre mas o menos lo mismo, pero como ya vimos en el artículo anterior, Javascript no tiene clases. Esto es un ejemplo de lo que me refiero:

var Pokemon = function(nombre) {
	this.nombre = nombre;
};
 
Pokemon.prototype.dameTuNombre = function() {
	return "Me llamo " + this.nombre;
}
 
var pikachu =  new Pokemon('Francisco el Rechulón Amarillo');
 
console.log(pikachu.dameTuNombre());
// Por consola sale: "Me llamo Francisco el Rechulón Amarillo"

Como ya había mencionado en el otro artículo, Javascript tiene un tipo de herencia que se llama prototipal,

… de ahí la palabra “prototype” que vemos en el código (es us paradigma de programación similar a la programación orientada a objetos).  Pues bien, si recordamos el post anterior, dije que las diferentes formas de invocar funciones en Javascript se diferencian por el valor que el lenguaje le asigna a “this”. En este caso, cuando usamos la palabra clave “new” antes de llamar a la función, lo que hacemos es crear un objeto nuevo con un enlace al valor del prototipo de la función. Si debugáis código javascript, veréis que todos los objetos, incluidas las funciones, tienen un miembro llamado “__proto__”, o algo así, pues bien, ese es el enlace al “padre” del objeto. Sé que es muy lioso, pero se entiende un poco mejor cuando toqueteas el código (yo personalmente hay cosas que sigo sin entender).  En cuanto al valor de “this”, cuando se crea este enlace, el valor de “this” cambia al objeto actual, de esta forma se puede usar como el “this” de toda la vida.

Por suerte, la última forma de invocar funciones en Javascript quizá sea la más sencilla de todas, ya que tú mismo le dices a la función el valor que debe tener “this”.

En Javascript, como ya hemos visto, las funciones también pueden tener métodos, y concretamente, hay un método muy interesante con el que vienen todas las funciones, y es la función “apply”. Esta función recibe dos parámetros, el valor que debe recibir “this “, y un array de parámetros. Siguiendo con el ejemplo anterior: 

var Pokemon = function(nombre) {
	this.nombre = nombre;
};
 
Pokemon.prototype.dameTuNombre = function() {
	return "Me llamo " + this.nombre;
}
 
var pikachu =  new Pokemon('Francisco el Rechulón Amarillo');
 
console.log(pikachu.dameTuNombre());
// Por consola sale: "Me llamo Francisco el Rechulón Amarillo"
 
var nombre = Pokemon.prototype.dameTuNombre.apply(pikachu);
console.log(nombre);
// Por consola sale: "Me llamo Francisco el Rechulón Amarillo"
 
var bulbasur = new Pokemon('Jose María el Cachondo Verde');
var nombre2 = pikachu.dameTuNombre.apply(bulbasur);
console.log(nombre2);
// Por consola sale: "Me llamo Jose María el Cachondo Verde"

Como podemos ver, no importa el objeto que uses para invocar la función, con apply puedes cambiar el valor de “this” a cualquier cosa. En este ejemplo, podría haber creado un objeto nuevo que tuviese como miembro una función llamada “nombre”, que devolviese una función, que devolviese otra función, que devolviese otra función, que devolviese un nombre aleatorio, con Javascript puedes complicar las cosas todo lo que quieras.

Pues eso es todo amigos, ya he demostrado que Javascript es un lenguaje mutante parasital. Para los frikis de Starcraft, Javascript es el Zerg de los lenguajes de programación, contiene bichos dentro de otros bichos y se esparce como la espuma. Y con esta imagen mental que os he dejado, me despido.

Hasta la próxima frikazos de la informática.

Curiosidades de Javascript: Formas de invocar funciones (Parte 1)

¡Hola frikazos de la informática!

Me llamo David González Shannon, soy medio español medio americano alocado, ingeniero informático (en realidad soy ingeniero multimedia), friki y amante de la programación.

En septiembre de 2013, empecé a trabajar en Devinet como el Wildcard de la empresa, en castellano, la navaja suiza. Al no estar especializado en ninguna tecnología en concreto, pero sí estar al día de todas las novedades tecnológicas, me ha tocado trabajar de: el que se dedica a lo que no se dedican los demás (hay que hacerse útil). Eso significa que me tengo que adaptar, con la mayor rapidez posible, a cualquier proyecto que requiera una tecnología que desconozcamos. Y precisamente, una de estas tecnologías es Javascript.

Personalmente, como vengo del mundo de los lenguajes compilados como C, C++, Objective-C, C#…, los lenguajes dinámicos como Javascript me fascinan, y este concretamente me fascina tanto que he decidido escribir sobre lo que voy aprendiendo del lenguaje. Más que nada, para no olvidarme de ello y, a la vez, poder ayudar a algún internauta perdido como yo.

Este artículo trata sobre las diferentes formas que hay de invocar funciones en Javascript, un tema que me pareció muy curioso cuando lo aprendí; y esta orientado a gente que tenga nociones básicas de programación y de programación orientada a objetos. Si no es vuestro caso, aprended a programar! En serio, os estáis perdiendo horas y horas de diversión. Aquí tenéis un enlace a Codeacademy http://www.codecademy.com , una web que os enseñará a programar en varios lenguajes dinámicos (Javascript, Python, Ruby), y una imagen de un gato tocando el piano:

Gato tocando piano.

Como he dicho antes, horas de diversión!

Antes de que siga, he de mencionar que lo que estoy explicando se aplica a Javascript en el navegador, para los que programáis en node.js, ya sabéis que las cosas son un poco diferentes. Bueno, empecemos.

Hay cuatro formas de llamar a funciones en javascript, pero antes de explicarlas he de hacer una pequeña introducción a cómo son las funciones en Javascript. Todas las funciones en Javascript son Objetos y como tales se pueden asignar a variables, pasar como parámetros a otras funciones, incluso crear dentro de funciones. Cuando programas en Javascript, lo más normal es pasar como parámetro a una función otra función, que a su vez tiene una función dentro, que tiene un callback que devuelve una función, que es guardada por la función anterior y es asignada como callback a otra…

Need to go deeper, INCEPTION

Vuelve a mirar la foto del gato… ya? Sigamos pues.

Además de ser objetos, todas las funciones en Javascript reciben dos parámetros ocultos, this, que contiene el contexto de la función, y arguments, que es una especie de array (digo especie porque no es una instancia de la clase Array, es una cosa rara). Pues bien, las cuatro formas de llamar a funciones en Javascript se distinguen según el valor que recibe this, y son: como método, como función normal y “corriente” (nada es corriente en Javascript), como constructor y con la función apply.

Como método

El término método debería sonarle a todo el mundo que ha programado orientado a objetos, es simplemente el nombre que recibe la función de una clase. La diferencia con Javascript es que, aunque sea orientado a objetos, no existen clases…

Tu. WTF!?

No existen clases porque tiene prototipos, otro paradigma de programación conocido por poca gente. Aún así, en Javascript, toda función que exista como propiedad de un objeto, se considera como método por convención. Por ejemplo:

1
2
3
4
5
6
7
8
9
10
11
// Creo un Objeto llamado superSayan con dos propiedades:
// grito que es un string y grita que es una función
 
var superSayan = {
    grito: "Kamehamehaaaa!!!!",
    grita: function () {
        console.log(this.grito);
    }
}
 
superSayan.grita(); // En consola sale "Kamehamehaaaa!!!!"

Como podemos ver, si llamamos a las funciones de esta forma, this te da acceso a las propiedades del Objeto al que pertenece la función, por lo tanto, this es el Objeto en sí, en este caso superSayan.

 

Como función normal y “corriente”

Cuando creas una función normal y corriente sin asignarla a un Objeto ni nada, piensas “yuhuuuu! mi función es libre al fin!”, y yo te digo “Mentira, sigue formando parte de The Matrix”, y tu respondes con un “Nooo! Quien soy… qué es real… es aire lo que respiro…?”, y acabas en un estado de shock por haber estado viviendo una mentira toda tu vida.

This is too much

En realidad, cuando creas una función suelta por el código, lo que estás haciendo es añadirla como propiedad del Objeto global, la windowEsto incluso ocurre cuando creas una función dentro de un método.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var gritoSuperSayan = "Kamehamehaaaa de la window!!!!";
function kameHameHaSuelto () {
    return "Soy libre!";
}
 
var superSayan = {
    grito: "Kamehamehaaaa de superSayan!!!!",
    grita: function () {
        var helper = function () {
            console.log(this.gritoSuperSayan);
            console.log(this.kameHameHaSuelto());
            console.log(this.superSayan.grito);
        }
        helper();
    }
}
 
console.log('Tiene la window la propiedad superSayan? ', window.hasOwnProperty('superSayan'));
// true
console.log('Tiene la window la propiedad gritoSuperSayan? ', window.hasOwnProperty('gritoSuperSayan'));
// true
console.log('Tiene la window la propiedad kameHameHaSuelto? ', window.hasOwnProperty('kameHameHaSuelto'));
// true
 
superSayan.grita();
// Output:
// Kamehamehaaaa de la window!!!!
// Soy libre!
// Kamehamehaaaa de superSayan!!!!

Esto es un problema de diseño de javascript en sí como lenguage,  pero si se tiene en cuenta, no resulta un problema grave. Para los que estamos acostumbrados a que this siempre haga referencia al contexto en el que estás, hay una trampilla muy simple que usan los programadores de Javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var superSayan = {
    grito: "Kamehamehaaaa de superSayan!!!!",
    grita: function () {
        var that = this;
        var helper = function () {
            console.log(that.grito);
        }
        helper();
    }
}
 
superSayan.grita();
// Output:
// Kamehamehaaaa de superSayan!!!!

Como podemos ver, usan una variable, que por convención llaman that, en la que almacenan el this deseado. Menos mal que este artículo está escrito en castellano! Sino esto sería un poco lioso.

Bueno, de momento eso es todo amigos. En la parte 2 del artículo acabaré de explicar las otras dos formas de invocar funciones en javascript. Mientras tanto, si estáis interesados en aprender Javascript y ya sois programadores, hay un libro que me ha estado ayudando mucho y que lo recomiendan todos los programadores expertos de Javascript, se llama “Javascript: The Good Parts” y esta escrito por Douglas Crockford, un gurú de la programación. Si vais a su web, veréis una foto de él con Chuck Norris de fondo que inmediatamente te dice “este tío sabe de lo que habla”.

En fin, si tenéis preguntas o comentarios que hacer, por favor hacedlo en la sección de abajo o podéis mandarme un email a david.shannon@devinet.es.

¡Hasta la próxima frikazos de la informática!