Artículo original: 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?

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 thispor 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:

image-367
Expanded result of calling this by itself

Cómo llamar a `this` en un método de objeto

Pero si llamamos a thisdentro 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 thisya no se refiere al objeto en sí:

image-368
Result of calling this within an object method

Y con esto, podemos usar thispara 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 thisdentro de una función como en el siguiente ejemplo:

function test() {
    console.log('this in a function', this);
}

test()

thisahora 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())
image-374

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());
image-375

Una nota sobre el modo estricto

Cuando se usa el strict-mode, la llamada a thisdentro de una función devolverá undefined.

"use strict";

function show() {
    console.log(this);
}

show();
image-370

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 thisen un detector de eventos, thisse 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:

image-369

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 clavethisse comporta. Estos métodos son call, apply y bind. Veamos cómo funcionan.

Cómo usar el método de llamada (call)

Con callpodemos 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 thisse 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 namey 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:

image-376

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"));
image-377

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"]));
image-378

Cómo utilizar el método de vinculación (Bind)

Igual que cally 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 bindes que devolverá una nueva función, sin ejecutarla. Mientras que con cally applyla función se ejecuta de inmediato, con binddebemos 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())
image-381

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!

baby-yoda-bye-bye-icegif