El temido "this" en JavaScript, de una vez por todas

Si alguna vez te has cruzado con el famoso this y has sentido que se comporta como un camaleón, no estás solo. En JavaScript el valor de this depende del contexto en el que se evalúa, y eso puede generar sorpresas si no lo tienes claro. En este artículo vamos a desmontar los mitos más habituales y a ofrecerte ejemplos concretos para que, la próxima vez que lo veas, sepas exactamente a qué objeto hace referencia.

¿Qué es “this” y por qué genera dudas?

En términos simples, this es una referencia al objeto que está ejecutando la función actual. A diferencia de otros lenguajes, JavaScript no lo determina en tiempo de compilación sino en tiempo de ejecución, y el mecanismo que lo asigna varía según cómo se invoque la función.

El contexto global

Fuera de cualquier función, this apunta al objeto global. En el navegador ese objeto es window; en Node.js es global. En modo estricto ('use strict') el valor sigue siendo el objeto global, pero dentro de funciones que no están vinculadas a un objeto puede ser undefined.

console.log(this); // <window> en el navegador o <global> en Node

Funciones normales

Cuando llamas a una función declarada de forma tradicional, el valor de this depende de cómo la invoques. Si la ejecutas sin un objeto explícito, vuelve a referirse al contexto global (o undefined en strict mode).

function saluda() {
  console.log(this);
}
saluda(); // <window> o <undefined> en strict mode

Funciones como método de objeto

Si la función forma parte de un objeto y la llamas como método, this será ese objeto. Es el caso más intuitivo y el que suele funcionar sin sorpresas.

const usuario = {
  nombre: 'Ana',
  presentarse() {
    console.log(Soy ${this.nombre});
  }
};
usuario.presentarse(); // this → usuario

Arrow functions y su “lexical this”

Las arrow functions no crean su propio this. En su lugar, capturan el valor del contexto léxico donde fueron definidas. Esto resulta muy útil en callbacks donde quieres mantener la referencia al objeto externo.

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

Manipular el contexto con bind, call y apply

JavaScript ofrece tres métodos para forzar un contexto concreto: call, apply y bind. Los dos primeros ejecutan la función inmediatamente con el objeto que les pases; bind devuelve una nueva función con el contexto fijado.

function muestraEdad() {
  console.log(this.edad);
}
const persona = { edad: 30 };
muestraEdad.call(persona);   // 30
muestraEdad.apply(persona); // 30
const muestraEdadPersona = muestraEdad.bind(persona);
muestraEdadPersona();        // 30

Clases y “this” en el constructor

Dentro de una clase, this siempre apunta a la instancia que se está creando o al objeto que llama al método. El constructor es el punto de partida donde asignas propiedades.

class Rectangulo {
  constructor(ancho, alto) {
    this.ancho = ancho;
    this.alto = alto;
  }
  area() {
    return this.ancho * this.alto;
  }
}
const r = new Rectangulo(5, 3);
console.log(r.area()); // 15

Eventos del DOM y la trampa del “this”

En los manejadores de eventos tradicionales, this se refiere al elemento que ha disparado el evento. Si utilizas una arrow function, perderás esa referencia y this seguirá apuntando al contexto léxico exterior (normalmente window).

const btn = document.querySelector('#miBoton');
btn.addEventListener('click', function(event) {
  console.log(this); // this → el elemento 
});
btn.addEventListener('click', (event) => {
  console.log(this); // this → el contexto léxico, probablemente window
});

Consejos para domar “this”

• Activa 'use strict' en tus módulos; así evitarás que this se convierta silenciosamente en el objeto global.
• Prefiere arrow functions en callbacks donde no necesites cambiar el contexto; simplifican la lectura.
• Si trabajas con métodos que usan funciones tradicionales dentro, guarda la referencia en una variable (const self = this) antes de entrar en el callback.
• Utiliza bind con moderación: crea una nueva función en memoria y puede afectar al rendimiento si lo haces en bucles.
• En React, los componentes funcionales ya no usan this; los hooks gestionan el estado y los efectos sin él.

Con estos conceptos claros, el temido this deja de ser un misterio y pasa a ser una herramienta predecible en tu día a día como desarrollador.