Tema 10 · El Contexto this

El Contexto this en JavaScript y el Peligro de la Pérdida de Enlace

Comprende cómo se resuelve la palabra clave this en tiempo de ejecución y por qué los métodos pierden su contexto al pasarse como callbacks o temporizadores.

Composición sobre Herencia y Patrón Mixins con Object.assign() Fijación de Contexto con bind, call, apply y Arrow Functions (Enlace Léxico)

El Misterio de `this` en JavaScript

En lenguajes como Java o PHP, $this es simple y predecible: siempre apunta a la instancia de la clase que contiene el código.

En JavaScript, la palabra clave this no se determina cuando se escribe la función, sino en el momento exacto en que la función es invocada (lo que se conoce en inglés como el Call-Site).

Las Cuatro Reglas de Resolución de `this`

Regla de Enlace Cómo se Invoca la Función ¿A qué apunta `this`?
1. Enlace Implícito usuario.saludar(); Al objeto situado a la izquierda del punto (usuario).
2. Enlace por Defecto const fn = usuario.saludar; fn(); undefined (en modo estricto) o window global.
3. Enlace con `new` const obj = new Usuario(); Al nuevo objeto que se acaba de crear en memoria RAM.
4. Enlace Explícito fn.call(otroObj) o fn.bind(otroObj) Al objeto que tú le pases explícitamente como argumento.

El Peligro Clásico: La Pérdida de Enlace (Lost Binding)

El dolor de cabeza más común ocurre al pasar un método como callback a funciones como setTimeout() o escuchadores de eventos del DOM (btn.addEventListener): 

class Temporizador {
    segundos = 0;

    iniciar() {
        // ❌ ¡ERROR! Al pasar el método como callback, se pierde el enlace con this:
        setTimeout(this.incrementar, 1000); 
    }

    incrementar() {
        this.segundos++; // TypeError: Cannot read properties of undefined (reading 'segundos')
    }
}

⚡ Demostración de la Pérdida de Enlace de this y Diagnóstico

Ejecuta el código en el Sandbox y observa qué sucede cuando un método se extrae de su objeto:

ThisContextDemo.js
Solo lectura 
class UsuarioServicio {
    constructor(nombre, rol) {
        this.nombre = nombre;
        this.rol = rol;
    }

    describir() {
        if (!this || !this.nombre) {
            return "❌ ERROR: 'this' es undefined (se perdió el enlace del objeto).";
        }
        return `✔ [${this.rol.toUpperCase()}] Usuario: ${this.nombre}`;
    }
}

const admin = new UsuarioServicio("Carlos Mendoza", "SuperAdmin");

console.log("=== 1. INVOCACIÓN CON ENLACE IMPLÍCITO (CORRECTO) ===");
// Llamado directo a través del objeto (con el punto '.')
console.log(admin.describir());

console.log("\n=== 2. PÉRDIDA DE ENLACE AL EXTRAER LA FUNCIÓN ===");
// Extraemos la referencia del método a una variable suelta:
const funcionSuelta = admin.describir;

// Al invocarla sola sin el punto 'admin.', el motor no sabe quién es 'this':
console.log(funcionSuelta());

console.log("\n=== 3. SIMULACIÓN DE CALLBACK ASÍNCRONO ===");
// Simulamos lo que ocurre en un setTimeout o un event listener:
function ejecutarCallback(callback) {
    console.log("Ejecutando callback recibido...");
    return callback();
}

console.log(ejecutarCallback(admin.describir)); // ¡Pierde el contexto!
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿En qué momento determina el motor de JavaScript a qué objeto hace referencia la palabra clave "this" en funciones tradicionales?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual de Programación Orientada a Objetos en JavaScript (POO) y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.