En JavaScript, comprender el funcionamiento de this en las llamadas a funciones no suele ser sencillo al principio. Sin embargo, si se entiende lo que internamente hace JavaScript en las llamadas a funciones, todo queda más claro:
Cuando se llama a una función:
foo('hola')
internamente es como si se hiciera lo siguiente:
foo.call(undefined/window, 'hola');
Por otro lado, si se llama a una función perteneciente a un objeto:
objeto.foo('hola')
internamente es como si se hiciera lo siguiente:
foo.call(objeto, 'hola');
El primer parámetro de call es el valor de this dentro de la función. En modo estricto (strict mode), el valor pasado como this será undefined, mientras que en modo no estricto, será el objeto global (objeto window en cualquier navegador).
Teniendo esto en cuenta, veamos lo que pasaría con un objeto como el siguiente:
var person = {
firstName: 'Isidro',
sayHello: function() {
console.log("Hello, I'm "+this.firstName);
}
}
Si hacemos:
person.sayHello();
Por consola se mostrará "Hello, I'm Isidro". En este caso, internamente se ejecuta algo como:
person.sayHello.call(person);
Por lo que this.firstName "sería" person.firstName
¿Qué pasaría si obtengo una referencia a la función del objeto y la llamo desde fuera en modo no estricto?
var f = person.sayHello;
f();
En este caso, por consola se pintará "Hello, I'm undefined"
Esto es porque internamente se ejecuta algo como:
person.sayHello.call(window);
y por tanto, como en el objeto window no hay ningún objeto llamado firstName, muestra undefined.
En este caso, si quisiéramos ligar la función con un objeto en particular, usaríamos bind:
f = person.sayHello.bind(person);
Ahora al ejecutar la función devolvería:
f(); // Hello, I'm Isidro
¿Qué pasa con las funciones anónimas?
Supongamos que la clase person es ahora:
var person = {
firstName: 'Isidro',
sayHello: function() {
function getCapitalizeName() {
return this.firstName.toUpperCase();
}
console.log("Hello, I'm "+getCapitalizeName());
}
}
y ejecutamos:
person.sayHello();
En este caso, se muestro por consola de nuevo: "Hello, I'm undefined"
El motivo se entiende claramente si traducimos la llamada a la función getCapitalizeName() por lo que realmente se está ejecutando:
getCapitalizeName.call(window)
De nuevo, dentro de getCapitalizeName, this apuntará a window y como en el objeto window no existe el objeto firstName, devuelve undefined. No podemos pensar que como la función getCapitalizeName está definida dentro del objeto person, automáticamente this apunta a person.
Para que funcione tal como esperamos, podríamos llamar a la función getCapitalizedName de forma explícita:
console.log("Hello, I'm "+getCapitalizeName.call(this));
En este caso, mostraría: Hello, I'm ISIDRO
