Original article: How to Use the "this" Keyword in JavaScript
¡Hola a todos! En este artículo vamos a hablar sobre la palabra clave THIS
en JavaScript.
Este solía ser un concepto que me confundía un poco, así que intentaré desglosarlo para que puedas entender sus usos y en qué situaciones puede ser útil. ¡Vamos!
Tabla de contenido
- ¿Qué es la palabra clave THIS?
- Llamando a THIS por sí mismo
- THIS en un método de objeto
- THIS en una función
- Una nota sobre las funciones flecha
- Una nota sobre el strict-mode
- THIS en un evento
- Métodos THIS (Call, apply y bind)
- Call
- Apply
- Bind
- Notas finales
¿Qué es la palabra clave THIS?
Bien, comencemos definiendo que es la palabra clavethis
. En JavaScript, la palabra clave this
siempre se refiere a un objeto. Lo que pasa es que el objeto al que se refiere variará dependiendo de cómo y dónde se llame this
.
Hay algunas formas diferentes de usar la palabra clave this
, así que veamos los casos más comunes y cómo se comporta en cada uno de ellos.
Un comentario importante es que this
no es una variable, es una palabra clave, por lo que su valor no se puede cambiar ni reasignar.
Cómo llamar a this por sí mismo
Si llamamos a this
por sí mismo, es decir, no dentro de una función, objeto o lo que sea, se referirá al objeto de ventana global.
Si lo imprimes como console.log('this alone', this);
obtendrás esto en tu consola: [object Window]
.
O esto si lo expandes:
Cómo llamar a `this` en un método de objeto
Pero si llamamos a this
dentro de un método de objeto, como en el siguiente ejemplo:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
getThis : function() {
return this;
}
};
console.log('this in object method', person.getThis());
Veremos que this
ya no se refiere al objeto en sí:
Y con esto, podemos usar this
para acceder a otras propiedades y métodos desde el mismo objeto:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
getFullName : function() {
return this.name + ' ' + this.lastName;
}
};
console.log('this in object method', person.getFullName());
Cómo llamar a this en una función
Sí llamamos a this
dentro de una función como en el siguiente ejemplo:
function test() {
console.log('this in a function', this);
}
test()
this
ahora se referirá nuevamente al objeto de la ventana general, y obtendremos esto en nuestra consola: [object Window]
.
Una nota sobre las funciones fecha
En las funciones flecha, JavaScript establece el this
léxicamente. Esto significa que la función flecha no crea su propio contexto de ejecución, sino que hereda el this
de la función externa donde se define la función flecha.
En la mayoría de los casos, esto significa que this
también se referirá al objeto ventana:
const show = () => this
console.log('arrow function this', show())
Es importante recalcar esto porque, por ejemplo, si tratamos de implementar una función flecha como un método de objeto, no podremos acceder al objeto a través de la palabra clave this
:
const person = {
name: 'Pedro',
surname: 'Sanchez',
sayName: () => this.name + ' ' + this.surname
}
console.log(person.sayName());
Una nota sobre el modo estricto
Cuando se usa el strict-mode, la llamada a this
dentro de una función devolverá undefined
.
"use strict";
function show() {
console.log(this);
}
show();
Como comentario adicional, si no estás familiarizado con el strict-mode, sigue los documentos de MDN :
El modo estricto de JavaScript es una forma de optar por una variante restringida de JavaScript, por lo que se excluye implícitamente del " modo descuidado ". El modo estricto no es solo un subconjunto: intencionalmente tiene una semántica diferente del código normal.
El modo estricto realiza varios cambios en la semántica normal de JavaScript:
- Elimina algunos errores silenciosos de JavaScript cambiándolos por errores generados.
- Soluciona errores que dificultan que los motores de JavaScript realicen optimizaciones: el código de modo estricto a veces puede ejecutarse más rápido que el código idéntico que no es de modo estricto.
- Prohíbe alguna sintaxis que probablemente se defina en futuras versiones de ECMAScript.
Cómo usar this en un detector de eventos
Cuando se usa this
en un detector de eventos, this
se referirá al elemento DOM que activó el evento.
document.getElementById('testBtn').addEventListener('click', function() {
console.log('this in a event', this);
})
En nuestro caso, agregamos el detector de eventos a un elemento de botón:<button id="testBtn">TEST</button>
Y después de hacer clic en él, obtenemos lo siguiente en nuestra consola:
Métodos this (call, apply y bind)
Para complicar un poco más el tema, JavaScript proporciona tres métodos nativos que se pueden usar para manipular la forma en que la palabra clavethis
se comporta. Estos métodos son call
, apply
y bind
. Veamos cómo funcionan.
Cómo usar el método de llamada (call)
Con call
podemos invocar un método pasando un objeto propietario como argumento. Dicho de forma más sencilla, podemos llamar a un método indicando a qué objeto this
se referirá la palabra clave.
Veamos un ejemplo:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function() {
return this.name + " " + this.surname;
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
console.log(person1.sayName.call(person2));
Aquí tenemos como objetos dos personas. Cada uno con sus propiedades name
y surname
, y el objeto person1
tiene un métodosayName
.
Luego llamamos al método person1sayName
de la siguiente manera: person1.sayName.call(person2)
.
Al hacer esto, estamos indicando que cuando se ejecuta el método sayName
, la palabra clave this
no se referirá al objeto que "posee" el método (person1
) sino al objeto que pasamos como parámetro (person2
). Como consecuencia, obtenemos esto en nuestra consola:
Ten en cuenta que si el método dado acepta argumentos, también podemos pasarlos cuando lo invocamos con call
:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function(city, country) {
return this.name + " " + this.surname + ", " + city + ", " + country;
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
console.log(person1.sayName.call(person2, "DF", "Mexico"));
Cómo utilizar el método de aplicación (Apply)
El método apply
funciona de manera muy similar a call
. La única diferencia entre ellos es que call
acepta los parámetros como una lista separada por comas (como el último ejemplo que vimos), y apply
los acepta como una matriz.
Entonces, si queremos replicar el mismo ejemplo usando, apply
tendríamos que hacerlo así:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function(city, country) {
return this.name + " " + this.surname + ", " + city + ", " + country;
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
console.log(person1.sayName.apply(person2, ["DF", "Mexico"]));
Cómo utilizar el método de vinculación (Bind)
Igual que call
y apply
, el método bind
indica el objeto al que se referirá la palabra clave this
cuando se ejecute un método determinado.
Pero la diferencia con bind
es que devolverá una nueva función, sin ejecutarla. Mientras que con call
y apply
la función se ejecuta de inmediato, con bind
debemos ejecutarla por separado.
Veamos esto en un ejemplo:
const person1 = {
name: 'Pedro',
surname: 'Sanchez',
sayName: function() {
return this.name + " " + this.surname
}
}
const person2 = {
name: 'Jimena',
surname: 'Juarez'
}
const sayPerson2Name = person1.sayName.bind(person2)
console.log(sayPerson2Name())
Notas finales
Cómo siempre, espero que hayas disfrutado el artículo y hayas aprendido algo nuevo.
Si quieres, también puedes seguirme en LinkedIn o Twitter. ¡Nos vemos en la próxima!