Solucionar el error ‘this is undefined’ en métodos de clase

Introducción Uno de los errores más frustrantes en JS es recibir un ‘Cannot read property of undefined’ al intentar usar this dentro de una clase. Esto ocurre porque el contexto de this se pierde cuando pasas un método como callback (por ejemplo, en un addEventListener). La solución moderna es usar Arrow Functions en las propiedades de la clase para heredar el contexto automáticamente.

Solución Rápida (Código)

class MiBoton {
    constructor() {
        this.nombre = "Botón Ninja";
        // Opción 1: Bind manual en constructor
        // this.click = this.click.bind(this);
    }

    // Opción 2: Arrow Function (Recomendado)
    click = () => {
        console.log("Clickeado:", this.nombre);
    }
}

const btn = new MiBoton();
document.querySelector('button').addEventListener('click', btn.click);

Explicación técnica En JavaScript, el valor de this se determina en el momento en que se llama a la función, no donde se define. Al pasar btn.click a un evento, el navegador ejecuta la función en el contexto global o del elemento HTML, donde this ya no apunta a tu instancia.

Las Arrow Functions no tienen su propio this; en su lugar, capturan el valor de this del ámbito léxico circundante. Al definir un método de clase como una función de flecha, aseguras que siempre apunte a la instancia de la clase, sin importar cómo o dónde sea invocada. Esta técnica es más limpia que el tradicional .bind(this) en el constructor y evita errores comunes en el desarrollo de componentes complejos o cuando trabajas con estados dinámicos en Vanilla JS.

Conclusión Entender el contexto es fundamental para dominar la Programación Orientada a Objetos. Te invitamos a leer nuestra guía sobre Prototipos vs Clases en JavaScript moderno.