Domina el this en JavaScript: cuándo usar funciones tradicionales y cuándo arrow functions

El this es uno de los conceptos que más confunden a los desarrolladores, tanto a los que empiezan como a los con experiencia. En este artículo vamos a desmontar los mitos más habituales y a ofrecerte una guía práctica para que sepas, sin dudas, qué valor tendrá this en cada situación.

Qué es `this` en JavaScript

En esencia, this es una referencia al objeto de ejecución del código actual. A diferencia de otros lenguajes, su valor no se determina en tiempo de compilación, sino en tiempo de ejecución y depende de cómo se llama la función.

Reglas de enlace implícito

Cuando invocas una función como método de un objeto, el motor asigna automáticamente this al objeto que precede al punto (.).

const usuario = {
  nombre: "Álvaro",
  saludar() {
    console.log(Hola, soy ${this.nombre});
  }
};

usuario.saludar(); // → Hola, soy Álvaro

Si la llamas sin el contexto del objeto, this pasa a ser undefined en modo estricto o el objeto global (window) en modo no estricto.

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

mostrar(); // undefined en "use strict", window sin "use strict"

Arrow functions y su lexical this

Las arrow functions (=>) no crean su propio this. En su lugar, capturan el valor de this del entorno donde se definieron, lo que se conoce como lexical this. Esto evita muchos errores al trabajar con callbacks.

const contador = {
  total: 0,
  incrementar: function() {
    setTimeout(() => {
      this.total++;
      console.log(this.total);
    }, 100);
  }
};

contador.incrementar(); // → 1

Si hubiéramos usado una función tradicional dentro de setTimeout, this sería window y el contador no habría funcionado.

Métodos de clase y `bind`

En las clases ES6, los métodos se definen como funciones normales, por lo que el valor de this depende de cómo se invoquen. Cuando pasas un método como callback, es frecuente perder el contexto. La solución clásica es bind o, de nuevo, usar arrow functions.

class API {
  constructor(base) {
    this.base = base;
    this.get = this.get.bind(this); // preservamos el contexto
  }
  get(endpoint) {
    return fetch(${this.base}/${endpoint});
  }
}

const api = new API('https://api.example.com');
const fetchData = api.get; // sin bind, this sería undefined
fetchData('users'); // funciona gracias al bind

Casos típicos en el DOM y eventos

Al registrar manejadores de eventos con addEventListener, el valor de this dentro del callback es el elemento que disparó el evento. Si necesitas acceder a la instancia de una clase, vuelve a usar bind o una arrow function.

class Boton {
  constructor(id) {
    this.el = document.getElementById(id);
    this.el.addEventListener('click', this.handleClick.bind(this));
  }
  handleClick(event) {
    console.log('Clicked', this.el.id);
  }
}

new Boton('mi-boton');

Consejos rápidos para no volver a perderte

Usa arrow functions para callbacks que necesiten el this del contenedor.
Cuando declares métodos de clase que vayas a pasar como referencia, bind en el constructor.
En funciones sueltas, verifica siempre el modo estricto ('use strict') para que this sea undefined y detectar errores antes.
Recuerda que call y apply pueden forzar el valor de this cuando lo necesites.

Dominar this lleva práctica, pero con estas reglas claras podrás leer y escribir código con confianza, evitando los clásicos TypeError: cannot read property … of undefined que tanto fastidian a la comunidad.

Qué es this en JavaScript