¿Qué es this en JavaScript?

 

¿Qué es this en JavaScript? (Explicación fácil)

this es una palabra especial que siempre se refiere al "dueño" de la función que se está ejecutando.

🔑 Idea clave:
this no es fijo, cambia según quién llama a la función.

---

Regla de oro

this es el objeto que está ejecutando la función en ese momento.

Si entiendes quién es el dueño de la llamada, entiendes this.

---

Ejemplo 1: Llamada global

javascript

function getName() {
    console.log(this.nick)
}

getName() // ¿quién llama? → el objeto global

• En navegadores, el objeto global es window.

• En Node.js, es global.

• También puedes usar globalThis (funciona en ambos).

Si no hay nick en el objeto global, sale undefined.

---

Ejemplo 2: Añadiendo una propiedad global

javascript

global.nick = 'global-nick'

function getName() {
    console.log(`Mi nombre es ${this.nick}`)
}

getName() // "Mi nombre es global-nick"

✅ Ahora this.nick encuentra el valor porque el dueño (global) tiene la propiedad nick.

📌 window, global y globalThis son el mismo objeto según el entorno.

---

Ejemplo 3: Cambiando el dueño con un objeto

javascript

const getName = function() {
    console.log(`Mi nombre es ${this.nick}`)
}

var midudev = {
    nick: 'midudev',
    getName: getName
}

midudev.getName() // "Mi nombre es midudev"

¿Qué pasó?

• La función getName es la misma.

• Pero ahora el dueño es midudev, no el objeto global.

• Por eso this.nick vale 'midudev'.

---

Ejemplo 4: Comparativa clara

javascript

function getName() {
    console.log(`Mi nombre es ${this.nick}`)
}

window.nick = 'global-nick'

getName()              // "Mi nombre es global-nick" (dueño: window)

var midudev = {
    nick: 'midudev',
    getName: getName
}

midudev.getName()      // "Mi nombre es midudev" (dueño: midudev)

✅ Misma función, distinto this según quién la ejecuta.

---

Ejemplo 5: Arrow functions NO tienen su propio this

javascript

const getName = () => {
    console.log(`Mi nombre es ${this.nick}`)
}

var midudev = {
    nick: 'midudev',
    getName: getName
}

midudev.getName() // "Mi nombre es global-nick" (¡hereda el this exterior!)

⚠️ Las arrow functions no pueden ser dueñas de nada.
Toman el this del lugar donde fueron creadas.

---

Ejemplo 6: Arrow function dentro de un método normal

javascript

function context() {
    const getName = () => {
        console.log(`Mi nombre es ${this.nick}`)
    }
    getName()
}

var midudev = {
    nick: 'midudev',
    context: context
}

midudev.context() // "Mi nombre es midudev"

¿Por qué?

• context se ejecuta con this = midudev.

• La arrow getName toma ese this prestado.

• Por eso funciona.

---

Resumen rápido

Tipo de función	¿Tiene su propio this?
Función normal (function)	✅ Sí, depende del dueño
Arrow function (() => {})	❌ No, hereda el this exterior

---

Tabla de quién es this

Código	¿Quién es this?
getName()	objeto global (window / global)
midudev.getName()	midudev
Arrow function suelta	objeto global (hereda)
Arrow dentro de método normal	el this del método

---

Ejercicios prácticos (con tus imágenes)

Ejercicio 1 (this1.png)

javascript

function getName() {
    console.log(this.nick)
}
getName() // ¿qué imprime si no hay nick global?

<details> <summary>Respuesta</summary> `undefined` (el objeto global no tiene `nick`) </details>

Ejercicio 2 (this5.png)

javascript

function getName() {
    console.log('Mi nombre es ${this.nick}')
}
window.nick = 'global-nick'
getName()

<details> <summary>Respuesta</summary> `Mi nombre es global-nick` </details>

Ejercicio 3 (this7.png - arrow function)

javascript

const getName = () => {
    console.log('Mi nombre es ${this.nick}')
}
var midudev = {
    nick: 'midudev',
    getName: getName
}
midudev.getName()

<details> <summary>Respuesta</summary> `Mi nombre es global-nick` (porque arrow function no tiene su propio `this`) </details>

---

Conclusión final (en fácil)

this = el objeto que está ejecutando la función.
Las arrow functions son la excepción: no tienen this propio.

Si recuerdas quién llama a la función, entenderás this para siempre.