La Palabra Clave 'this'

Comprender 'this' en JavaScript

La palabra clave this es uno de los aspectos más confusos de JavaScript. A diferencia de otros lenguajes donde this siempre se refiere a la instancia actual, en JavaScript this depende de cómo se llama una función, no de dónde se define.

1. Vinculación Predeterminada

Cuando una función se llama independientemente (no como método), this se refiere al objeto global (o undefined en modo estricto):

function mostrarThis() {
  console.log(this);
}

mostrarThis(); // Window (navegador) o global (Node)

// En modo estricto
"use strict";
function mostrarThisEstricto() {
  console.log(this);
}

mostrarThisEstricto(); // undefined

2. Vinculación Implícita

Cuando una función se llama como método de un objeto, this se refiere a ese objeto:

const usuario = {
  nombre: "Alice",
  saludar() {
    console.log(`Hola, soy ${this.nombre}`);
  }
};

usuario.saludar(); // "Hola, soy Alice" — this = usuario

// ⚠️ Perdiendo vinculación implícita
const fnSaludar = usuario.saludar;
fnSaludar(); // "Hola, soy undefined" — this = global/undefined

// Común en callbacks
setTimeout(usuario.saludar, 1000); // "Hola, soy undefined"

3. Vinculación Explícita: call, apply, bind

Forzar que this sea un valor específico:

function presentar(saludo, puntuacion) {
  console.log(`${saludo}, soy ${this.nombre}${puntuacion}`);
}

const persona = { nombre: "Bob" };

// call — argumentos pasados individualmente
presentar.call(persona, "Hola", "!");  // "Hola, soy Bob!"

// apply — argumentos pasados como array
presentar.apply(persona, ["Hola", "."]);  // "Hola, soy Bob."

// bind — retorna una nueva función con 'this' fijo
const presentacionFija = presentar.bind(persona);
presentacionFija("Hey", "?");  // "Hey, soy Bob?"

// Aplicación parcial con bind
const decirHolaABob = presentar.bind(persona, "Hola");
decirHolaABob("!");  // "Hola, soy Bob!"

4. Vinculación new

Al usar new con un constructor, this se refiere al objeto recién creado:

function Persona(nombre) {
  // 'this' es el nuevo objeto que se está creando
  this.nombre = nombre;
  this.saludar = function() {
    console.log(`Hola, soy ${this.nombre}`);
  };
}

const alice = new Persona("Alice");
alice.saludar(); // "Hola, soy Alice"

// Lo que hace 'new':
// 1. Crea un nuevo objeto vacío
// 2. Lo enlaza a Persona.prototype
// 3. Vincula 'this' al nuevo objeto
// 4. Retorna el objeto (si no hay return explícito)

Funciones Flecha: 'this' Léxico

Las funciones flecha no tienen su propio this. Heredan this de su ámbito externo:

const obj = {
  nombre: "Objeto",
  
  // Función regular — tiene su propio 'this'
  metodoRegular() {
    console.log(this.nombre); // "Objeto"
    
    // Problema: función anidada pierde 'this'
    setTimeout(function() {
      console.log(this.nombre); // undefined
    }, 100);
  },
  
  // Función flecha — hereda 'this'
  metodoFlecha() {
    console.log(this.nombre); // "Objeto"
    
    // Solución: flecha hereda 'this' de metodoFlecha
    setTimeout(() => {
      console.log(this.nombre); // "Objeto" ✓
    }, 100);
  }
};

obj.metodoRegular();
obj.metodoFlecha();

'this' en Clases

class Contador {
  constructor() {
    this.cuenta = 0;
    
    // Método 1: Vincular en constructor
    this.incrementarVinculado = this.incrementar.bind(this);
  }
  
  incrementar() {
    this.cuenta++;
    console.log(this.cuenta);
  }
  
  // Método 2: Propiedad de función flecha
  incrementarFlecha = () => {
    this.cuenta++;
    console.log(this.cuenta);
  };
}

const contador = new Contador();

// Método regular pierde 'this' cuando se extrae
const inc = contador.incrementar;
inc(); // Error: No se puede leer la propiedad 'cuenta' de undefined

// Método vinculado funciona
const boundInc = contador.incrementarVinculado;
boundInc(); // 1

// Propiedad flecha funciona
const arrowInc = contador.incrementarFlecha;
arrowInc(); // 2

Prioridad de Vinculación

Cuando se aplican múltiples reglas, orden de prioridad (de mayor a menor):