Lección 31: El valor de `this`

🧠 Concepto

La palabra clave this en JavaScript es uno de los conceptos más confusos. Su valor se determina en tiempo de ejecución según cómo se llama la función, no dónde se define.

Reglas para determinar this

1. Función normal (no strict mode)

function mostrarThis() {
  console.log(this); // window (global) en navegador, global en Node
}
mostrarThis();

2. Función normal (strict mode)

'use strict';
function mostrarThis() {
  console.log(this); // undefined
}
mostrarThis();

3. Método de objeto

const persona = {
  nombre: 'Ana',
  saludar() {
    console.log(`Hola, soy ${this.nombre}`);
  }
};
persona.saludar(); // "Hola, soy Ana"

4. Constructor (con new)

function Persona(nombre) {
  this.nombre = nombre;
}
const p = new Persona('Luis');
console.log(p.nombre); // "Luis"

5. Arrow function

const objeto = {
  nombre: 'Objeto',
  metodo: () => {
    console.log(this.nombre); // undefined — hereda del contexto exterior
  }
};
objeto.metodo();

💻 Ejemplo

// El gran error del this en callbacks
const usuario = {
  nombre: 'María',
  saludar() {
    console.log(`Hola, soy ${this.nombre}`);
  },
  saludarTarde() {
    setTimeout(function() {
      console.log(`Hola, soy ${this.nombre}`); // undefined (o window)
    }, 100);
  },
  saludarBien() {
    setTimeout(() => {
      console.log(`Hola, soy ${this.nombre}`); // "María" — arrow hereda this
    }, 100);
  }
};

usuario.saludar();        // "Hola, soy María"
usuario.saludarTarde();   // "Hola, soy undefined"
usuario.saludarBien();    // "Hola, soy María"

⚠️ Nota

La regla de oro: this es quien llama a la función, no dónde se define.

Excepciones:

• Arrow functions: heredan this del ámbito circundante (lexical this)
• bind/call/apply: permiten fijar this explícitamente
• Event handlers: this es el elemento que disparó el evento
• Métodos de clase: en una clase, this se refiere a la instancia

// Event handler
boton.addEventListener('click', function() {
  console.log(this); // el botón
});

🎯 Tip

Para saber qué es this, pregúntate: ¿Cómo se está llamando esta función?

• func() → this = global/undefined (strict)
• obj.func() → this = obj
• new Func() → this = nueva instancia
• arrowFunc() → this = el this del ámbito donde se definió
• func.call(obj) → this = obj

Si tienes dudas, haz un console.log(this) en la primera línea.

📝 Ejercicio

¿Qué imprime cada llamada? Responde sin ejecutar, luego verifica.

const producto = {
  nombre: 'Laptop',
  precio: 1000,
  mostrarInfo() {
    console.log(`${this.nombre} cuesta $${this.precio}`);
  }
};

const info = producto.mostrarInfo;
producto.mostrarInfo(); // ?
info();                 // ?

const producto2 = {
  nombre: 'Mouse',
  precio: 25,
  mostrarInfo: producto.mostrarInfo
};
producto2.mostrarInfo(); // ?