La Función this

En JavaScript, this es una palabra clave especial que se refiere al contexto en el que se está ejecutando una función. El valor de this depende de cómo y dónde se llama la función, lo que puede hacerlo un poco confuso para los desarrolladores, especialmente los principiantes.

1. Qué es this? #

• this es una referencia al objeto que invoca la función.
• El valor de this cambia dependiendo de cómo se llama la función.

Ejemplo básico:

 
1let persona = {
2  nombre: "Juan",
3  saludar: function() {
4    console.log("Hola, soy " + this.nombre);
5  }
6};
7
8persona.saludar(); // Muestra "Hola, soy Juan"
Salida de consola
Hola, soy Juan

En este ejemplo:

• this.nombre se refiere a la propiedad nombre del objeto persona porque la función saludar es un método de ese objeto.

Contextos comunes de this #

1. Dentro de un método de un objeto:

   • Cuando se llama a un método, this se refiere al objeto al que pertenece el método.

    
   1let coche = {
   2  marca: "Toyota",
   3  mostrarMarca: function() {
   4    console.log(this.marca);
   5  }
   6};
   7coche.mostrarMarca(); // Muestra "Toyota"
   Salida de consola
   Toyota

2. En una función global:

   • Cuando this se usa en una función que no pertenece a ningún objeto, en el contexto global, su valor es el objeto global (window en navegadores web).

    
   1function mostrarThis() {
   2  console.log(this);
   3}
   4mostrarThis(); // Muestra el objeto global (en el navegador, es `window`)
   Salida de consola
   window

3. En el constructor de una clase:

   • En el contexto de un constructor, this se refiere a la instancia del objeto creado.

    
   1function Persona(nombre) {
   2  this.nombre = nombre;
   3}
   4let ana = new Persona("Ana");
   5console.log(ana.nombre); // Muestra "Ana"
   Salida de consola
   Ana

4. En una función de evento:

   • Dentro de un manejador de eventos, this se refiere al elemento HTML que recibió el evento.

   1document.getElementById("miBoton").addEventListener("click", function() {
   2  console.log(this.id); // Muestra el id del botón que fue clickeado
   3});

La problemática de this #

El comportamiento dethis puede ser confuso porque su valor depende del contexto en el que se llama la función y no de dónde se define la función.

Problema común: this en funciones anidadas:

 
1let objeto = {
2  nombre: "Juan",
3  saludar: function() {
4    console.log("Hola, soy " + this.nombre);
5    function interno() {
6      console.log(this.nombre); // ¿Qué es `this` aquí?
7    }
8    interno();
9  }
10};
11
12objeto.saludar(); // Muestra "Hola, soy Juan" y luego "undefined"
Salida de consola
Hola, soy Juan
undefined

En este ejemplo:

• Dentro de la función interno, this ya no se refiere a objeto, sino al objeto global (window en un navegador). Esto puede causar errores inesperados.

Soluciones para la problemática de this:

1. Almacenar this en una variable:

    
   1let objeto = {
   2  nombre: "Juan",
   3  saludar: function() {
   4    console.log("Hola, soy " + this.nombre);
   5    let self = this;
   6    function interno() {
   7      console.log(self.nombre); // `self` se refiere al `this` original
   8    }
   9    interno();
   10  }
   11};
   12objeto.saludar(); // Muestra "Hola, soy Juan" y luego "Juan"
   Salida de consola
   Hola, soy Juan
   Juan

2. Usar funciones flecha:

   • Las funciones flecha (=>) no tienen su propio this, sino que toman el this del contexto en el que fueron definidas.

    
   1let objeto = {
   2  nombre: "Juan",
   3  saludar: function() {
   4    console.log("Hola, soy " + this.nombre);
   5    const interno = () => {
   6      console.log(this.nombre); // `this` se refiere al `this` del contexto exterior
   7    };
   8    interno();
   9  }
   10};
   11objeto.saludar(); // Muestra "Hola, soy Juan" y luego "Juan"
   Salida de consola
   Hola, soy Juan
   Juan