¿Qué es el contexto en JavaScript?

El contexto (this) en JavaScript es una referencia al objeto en cuyo contexto se ejecuta la función actual. Su valor se determina por cómo se llamó a la función, no por dónde fue definida.

Formas principales de definir el contexto:

• Contexto global: Fuera de funciones, en modo no estricto, this hace referencia al objeto global (window en el navegador, global en Node.js). En modo estricto, this es undefined.

  // Modo no estricto (en navegador)
  console.log(this === window); // true
  
  // Modo estricto
  "use strict";
  console.log(this === undefined); // true
  

• Método de un objeto: Si una función se llama como método de un objeto (obj.method()), this dentro de la función hace referencia a ese objeto (obj).

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Salida: Hello, John (this hace referencia a user)
  

• Llamada a función (call, apply, bind): Los métodos call y apply llaman a la función con un contexto explícito. bind crea una nueva función con un contexto fijo.

  function sayName(greeting) {
      console.log(greeting + ", " + this.name);
  }
  
  const person = { name: "Peter" };
  
  sayName.call(person, "Hi"); // Salida: Hi, Peter (this = person)
  sayName.apply(person, ["Hello"]); // Salida: Hello, Peter (this = person)
  
  const boundSayName = sayName.bind(person, "Hey");
  boundSayName(); // Salida: Hey, Peter (this = person)
  

• Constructor (new): Al llamar a una función con el operador new, se crea un nuevo objeto vacío, y this dentro de la función constructora hace referencia a ese nuevo objeto.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Salida: John (this dentro de Person hace referencia a john)
  

• Funciones flecha: Las funciones flecha no tienen su propio contexto. this dentro de una función flecha se toma del ámbito externo (lexicográfico) donde fue creada.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this se toma de greet (hace referencia a user)
          };
          innerGreet();
      }
  };
  user.greet(); // Salida: Hello, Alice
  

Comprender cómo se determina this es crucial para trabajar correctamente con objetos, métodos y manejadores de eventos en JavaScript.