¿Qué es esto en JavaScript?

this en JavaScript es una palabra clave que indica el contexto de ejecución de una función. Su valor se determina según la forma en que se llama a la función.

Normalmente, this apunta al objeto global (en el navegador, window) en una llamada de función normal, si no está en modo estricto.

En modo estricto ('use strict'), en el mismo escenario, this será undefined.

Al llamar a un método de un objeto, this hace referencia al propio objeto.

const obj = {
  method: function() {
    console.log(this); // obj
  }
};
obj.method();

Al llamar a un constructor (new con una función), this apunta a la nueva instancia creada.

function Constructor() {
  console.log(this); // instancia de Constructor
}
const instance = new Constructor();

Al usar métodos como call, apply, bind, this se establece explícitamente como el primer argumento.

function greet() {
  console.log(`¡Hola, ${this.name}!`);
}

const person = { name: 'Alicia' };

greet.call(person); // ¡Hola, Alicia!
greet.apply(person); // ¡Hola, Alicia!

const boundGreet = greet.bind(person);
boundGreet(); // ¡Hola, Alicia!

En funciones flecha, this no tiene su propio contexto. Se hereda lexicográficamente del ámbito donde fue definida.

const obj2 = {
  name: 'Bob',
  greet: function() {
    const arrowGreet = () => {
      console.log(`¡Hola desde ${this.name}!`); // this hace referencia a obj2
    };
    arrowGreet();
  }
};
obj2.greet(); // ¡Hola desde Bob!

const obj3 = {
  name: 'Charlie',
  greet: () => {
    console.log(`¡Hola desde ${this.name}!`); // this hace referencia a window (o undefined en modo estricto), no a obj3
  }
};
obj3.greet(); // ¡Hola desde undefined! (o error)

El contexto this puede no ser evidente, especialmente al pasar callbacks o en operaciones asíncronas. Entender las reglas de this es crucial para el correcto funcionamiento de JavaScript.