Tutorial: ¿Qué es this en JavaScript?

 

Introducción

Hola, ¿qué tal? ¿Cómo estás? En el tutorial de hoy vamos a hablar de una particularidad que tiene JavaScript: el objeto this.

this es un objeto especial de JavaScript que hace referencia al contexto en el que se está ejecutando la función. Dicho así, es un poco extraño y te puede llevar a confusión. A veces no logramos saber bien a qué está haciendo referencia this en un determinado momento.

Antes de ECMAScript 6 (ES6), era muy sencillo llevarse a error. Por suerte, con la llegada de ES6 y ciertas funcionalidades como las arrow functions, se hizo más fácil entenderlo y no equivocarse.

Vamos al código, porque es donde realmente vamos a ver cómo funciona y cómo lidiar con ello.

---

1. El problema clásico de this

Vamos a crear un objeto utilizando var (como se hacía antiguamente, en ES3).

javascript

var obj = {
    foo: function () { 
        return 'foo' 
    },
    bar: function () {
        document.addEventListener('click', function (event) {
            this.foo();  // ❌ Error: this no es obj, es document
        });
    }
}

¿Qué pasa aquí?
Cuando hacemos clic en el documento, el this dentro del addEventListener hace referencia al contexto de la función callback, que en este caso es document, no obj. Por lo tanto, this.foo no existe y obtenemos un error.

🔍 Recuerda: this depende de cómo se llama la función, no de dónde se define.

---

2. Primer hack: la variable that

Antes de ES6, un truco muy común era guardar la referencia de this en una variable (normalmente llamada that o self).

javascript

var obj = {
    foo: function () { 
        return 'foo' 
    },
    bar: function () {
        var that = this;  // Guardamos el this correcto (obj)
        document.addEventListener('click', function (event) {
            that.foo();  // ✅ Ahora sí funciona
        });
    }
}

Explicación:

• that captura el valor de this en el momento en que se ejecuta bar() (que es obj).

• Dentro del callback, usamos that en lugar de this.

🧠 Este es un "hack" muy común en el pasado y todavía se ve en código legacy.

---

3. Solución con .bind(this)

Más adelante, JavaScript introdujo el método .bind(), que permite enlazar permanentemente el valor de this dentro de una función.

javascript

var obj = {
    foo: function () { 
        return 'foo' 
    },
    bar: function () {
        document.addEventListener('click', function (event) {
            this.foo();
        }.bind(this));  // Enlazamos this (obj) al callback
    }
}

¿Qué hace .bind(this)?
Crea una nueva función que, cuando se ejecute, tendrá su this fijo al valor que le pasamos (obj).

Aunque mejora el código, todavía es algo engorroso tener que acordarse de hacer el binding manualmente.

---

4. Solución moderna: Arrow Functions (ES6)

Con ECMAScript 6 (ES6) llegaron las arrow functions, que resuelven este problema de forma elegante.

Las arrow functions no tienen su propio this. En su lugar, toman el this del contexto donde fueron definidas.

javascript

var obj = {
    foo: function () { 
        return 'foo' 
    },
    bar: function () {
        document.addEventListener('click', event => this.foo());  // ✅ this es obj
    }
}

¿Por qué funciona?
La arrow function no crea un nuevo this, sino que usa el this de bar(), que es obj. Así que this.foo() funciona perfectamente.

🎯 Esta es la forma más limpia, legible y recomendada actualmente.

---

Ejercicios prácticos (basados en tus imágenes)

A continuación, te muestro cada uno de los ejercicios de las imágenes y te explico qué hace y por qué funciona o no.

Ejercicio 1: this1.png (código erróneo)

javascript

var obj = {
    foo: function () { return 'foo' },
    bar: function () {
        document.addEventListener('click', function (event) {
            this.foo  // ❌ Error: this.foo es undefined, además falta ()
        });
    }
}

❌ Problemas:

• this dentro del callback es document, no obj.

• Además, falta ejecutar la función (this.foo() en lugar de this.foo).

---

Ejercicio 2: this2.png (solución clásica con that)

javascript

var obj = {
    foo: function () { return 'foo' },
    bar: function () {
        var that = this;
        document.addEventListener('click', function (event) {
            that.foo();  // ✅ Funciona correctamente
        });
    }
}

✅ Funciona: porque that guarda la referencia correcta a obj.

---

Ejercicio 3: this-bind.png (solución con .bind)

javascript

var obj = {
    foo: function () { return 'foo' },
    bar: function () {
        document.addEventListener('click', function (event) {
            this.foo();
        }.bind(this));  // ✅ Enlazamos this correctamente
    }
}

✅ Funciona: .bind(this) asegura que dentro del callback, this sea obj.

---

Ejercicio 4: this-4.png (solución moderna con arrow function)

javascript

var obj = {
    foo: function () { return 'foo' },
    bar: function () {
        document.addEventListener('click', event => this.foo());  // ✅ Perfecto
    }
}

✅ La mejor solución: arrow function mantiene el this de bar().

---

Resumen final

Método	¿Funciona?	Dificultad	Recomendado
Callback normal	❌ No	Baja	No
Variable that	✅ Sí	Media	Solo para código legacy
.bind(this)	✅ Sí	Media	Aceptable, pero verboso
Arrow function	✅ Sí	Baja	Sí, totalmente

🧠 Regla de oro:
Si necesitas acceder al this del contexto exterior dentro de una función interna, usa arrow functions.

---

¿Te ha servido?

Si te ha gustado este tutorial y ha servido para algo, no olvides darle like, suscríbete al canal si todavía no lo has hecho, y nos vemos en el siguiente.

¡Sigue practicando y verás que this no es tan complicado como parece!