¿Qué es el contexto en una función?

El contexto (this) en una función de JavaScript se determina por cómo se llamó a la función, no por dónde fue declarada. Indica el objeto al que pertenece la función o que llama.

Formas de determinar el contexto:

1. Contexto global: Fuera de funciones, o si la función se llama sin un objeto explícito (this será igual al objeto global window en el navegador, global en Node.js, o undefined en modo estricto).

   // En el navegador
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Contexto del objeto (método): Si la función se llama como método de un objeto (obj.method()), this dentro de la función se referirá a ese objeto.

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Hola, mi nombre es ${this.name}`);
     }
   };
   
   user.greet(); // Hola, mi nombre es Alice
   

3. Contexto del constructor: Al llamar a una función con la palabra clave new (new MyClass()), se crea un nuevo objeto, y this dentro del constructor hace referencia a ese nuevo objeto.

   function Person(name) {
     this.name = name;
   }
   
   const person1 = new Person('Bob');
   console.log(person1.name); // Bob
   

4. Indicación explícita del contexto: Los métodos call, apply y bind permiten establecer explícitamente el valor de this para la llamada a la función.

   • call(thisArg, arg1, arg2, ...): Llama a la función con this establecido en thisArg y los argumentos pasados individualmente.
   • apply(thisArg, [argsArray]): Llama a la función con this en thisArg y los argumentos en forma de array.
   • bind(thisArg, arg1, arg2, ...): Devuelve una nueva función con this fijado en thisArg.

   function displayInfo(age) {
     console.log(`${this.name} tiene ${age} años.`);
   }
   
   const person = { name: 'Charlie' };
   
   displayInfo.call(person, 30); // Charlie tiene 30 años.
   displayInfo.apply(person, [35]); // Charlie tiene 35 años.
   
   const bondedDisplayInfo = displayInfo.bind(person, 40);
   bondedDisplayInfo(); // Charlie tiene 40 años.
   

5. Funciones flecha: Las funciones flecha no tienen su propio this. Heredan this del entorno léxico donde fueron definidas.

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Hola desde flecha, ${this.name}`);
       };
       innerArrow(); // `this` aquí es anotherUser, heredado de sayHello
     },
     sayHelloBad: () => { // mala práctica para métodos de objetos
         console.log(`Hola desde flecha, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Hola desde flecha, David
   
   // En el navegador, fuera del modo estricto
   anotherUser.sayHelloBad(); // Hola desde flecha, undefined (`this` - window)
   

Comprender el contexto es fundamental para trabajar correctamente con objetos, métodos y manejadores de eventos en JavaScript.