QUE RAYOS ES "THIS" EN JAVASCRIPT

Por Xk Web

---

🌧️ Introducción

Y bien, amigos. Voy a hacer mi mejor esfuerzo para tratar de explicarte qué rayos es this. Y como veo que está empezando a llover, es una buena indicación de que todo irá en orden.

Vamos a tomar en cuenta que cuando creamos un archivo .js, este inmediatamente pasa por dos fases:

1. Fase de creación (Creation phase)

2. Fase de ejecución (Execution phase)

En la fase de ejecución es donde se ejecuta nuestro código, los llamados a las funciones, etcétera. Pero empecemos con la fase de creación.

---

📦 La fase de creación

En esta fase se crea el objeto global y también un espacio de memoria para las variables. Dentro de este proceso se crea la palabra clave this, que va a apuntar directamente al objeto global.

No te me asustes, todo esto lo veremos en la práctica.

También se crea lo que es el hoisting, porque ya se van guardando las variables y funciones en la memoria. Cuando tú haces un llamado a esa variable, ya estaba guardada un tiempo antes, y por eso no te da un undefined.

---

🌐 El objeto global en el navegador

En el navegador, el objeto global es window. Si llamamos a this, también vemos que está apuntando a window:

js

console.log(this); // Window {...}

window apunta al objeto global (que es window en sí mismo), y this también apunta al objeto global.

---

🧪 Probando this en diferentes contextos

1. Desde una función normal

js

let llamandoThis = function () {
    console.log(this);
}

llamandoThis(); // Window {...}

Sigue apuntando al objeto global.

2. Desde una función expresión

js

let llamandoThisTambien = function () {
    console.log(this);
}

llamandoThisTambien(); // Window {...}

Todavía apunta al objeto global.

3. Dentro de un objeto (método)

Aquí es donde la cosa cambia:

js

let dondeEstaThis = {
    nombre: 'xkweb',
    slogan: 'xpress knowledge',
    activo: function() {
        console.log(this);
    }
}

dondeEstaThis.activo();

Resultado:

js

{
  nombre: "xkweb",
  slogan: "xpress knowledge",
  activo: f
}

Ahora this ya no apunta al objeto global, sino al objeto desde donde se está realizando el llamado.

---

📖 ¿Qué dice la documentación?

Según Mozilla Developer Network (MDN):

this es el objeto contexto de JavaScript en el cual se está ejecutando nuestro código actual.

En nuestro ejemplo, el código actual se está ejecutando dentro del objeto dondeEstaThis, por lo tanto this pertenece a ese objeto.

---

🔧 Accediendo a propiedades del objeto con this

Si queremos acceder al nombre o al eslogan desde el método activo, debemos usar this:

js

let dondeEstaThis = {
    nombre: 'xkweb',
    slogan: 'xpress knowledge',
    activo: function() {
        console.log(this.nombre);
        console.log(this.slogan);
    }
}

dondeEstaThis.activo();
// xkweb
// xpress knowledge

Incluso podemos modificar propiedades del objeto usando this:

js

let dondeEstaThis = {
    nombre: 'xkweb',
    slogan: 'xpress knowledge',
    activo: function() {
        this.nombre = 'solo xk';
        console.log(this.nombre);
    }
}

dondeEstaThis.activo(); // solo xk

---

📝 Recapitulación

¿Dónde se llama this?	¿A qué apunta?
En el ámbito global	Al objeto global (window)
Dentro de una función normal	Al objeto global (window)
Dentro de un método de un objeto	Al objeto que contiene el método

Regla clave: Lo que importa es desde dónde estamos llamando a this. El this tomará el valor del objeto contexto en el que se ejecuta el código actual.

---

🧠 Reflexión final

Amigos, deben realizar sus propias pruebas. Espero que esto te haya arrojado un poquito de luz sobre this.

Si lo llamamos desde una función, siempre va a apuntar al objeto global (por defecto). Pero si lo llamamos desde un objeto, apuntará a dicho objeto, tal como lo dice su definición:
👉 el objeto contexto de JavaScript en el cual se está ejecutando nuestro código actual.

Si tienes otras ideas de cómo explicar this o algunas dudas, puedes dejar tus comentarios. Con mucho gusto estaré respondiéndolos.