La palabra «this», es una palabra reservada en muchos lenguajes de programación, y Javascript no es la excepción. Esta palabra hace referencia al «contexto» en donde uno está parado. Usando la palabra this, se puede acceder a las variables y funciones de un «contexto» en particular. Además, dependiendo de la parte de tu código en la que estés parado, el valor de this varía, y si no sabés cuáles son las reglas de Javascript que hacen que cambie el valor de la palabra this, podés llegar a pensar que Javascript tiene un comportamiento algo «raro».
Recordemos primero qué es el Execution Context. El Execution Context son un par de «cosas» que el motor de Javascript me arma y me deja listas para usar, para facilitarme la vida. Entre esas cosas, están la variable global (si ejecutás tu código Javascript en un browser, ésta variable global es «Window»), y la palabra reservada «this«. Recordemos también que se crea un Execution Context diferente cada vez que se ejecuta una función. Es por eso que cuando ejecutemos lo siguiente en nuestro browser:
function a() {
console.log(this); // <-- esto apunta a la variable global "Window"
}
a();
se creará un nuevo Execution Context, y la palabra reservada «this» tendrá el valor de la variable global.
Ahora bien, recordemos también que las funciones son first class y, por consiguiente, pueden ser tratadas como un tipo más de dato, es por eso que podemos definir un objeto con el atributo «log» y asignarle una variable a ese atributo:
var o = {
name: 'objeto o',
log: function() {
console.log(this)
}
}
o.log()
Y ahora… ¡un poco de magia!
Si tuviera el siguiente código:
var c = {
name:'objeto c',
log:function() {
this.name = 'new name';
console.log(this)
var setname=function(newName) {
this.name=newName;
}
setname('another name')
console.log(this);
}
}
c.log()
console.log('outside c', name);
this.name = 'new name';
this.name = newName;
this.name = 'new name';
this.name = newName
{name: «new name», log: ƒ}
outside c another name
var c = {
name:'objeto c',
log:function() {
var self=this; //Guardamos el valor de "this" para no perderlo más adelante
self.name ='new name';
console.log(this)
var setname=function(newName) {
self.name=newName;
}
setname('another name')
console.log(self);
}
}
c.log()
Y… ¡voilá!
Conclusiones
Como ves nuevamente, Javascript se sigue comportando de forma «rara», bueno, no tanto, sólo un poquito. Así que anotá en tu lista de cosas raras la palabra reservada «this». ¡Y mucho cuidado cuando la usás!