¿Cómo cambiar el contexto de una función en…

En JavaScript, el contexto de ejecución de una función (el valor de this) se puede cambiar de varias maneras:

call(): Ejecuta una función con un valor this especificado y argumentos pasados individualmente separados por comas.

// function.call(thisArg, arg1, arg2, ...)
function greet(name) {
  console.log(`Hola, ${name}! Soy ${this.type}`);
}

const obj = { type: 'objeto' };

greet.call(obj, 'Alicia'); // Hola, Alicia! Soy objeto

apply(): Ejecuta una función con un valor this especificado y argumentos pasados en forma de array o array-like.

// function.apply(thisArg, [argsArray])
function sum(a, b) {
  console.log(`${this.name}: ${a + b}`);
}

const context = { name: 'Calculadora' };
const numbers = [5, 10];

sum.apply(context, numbers); // Calculadora: 15

bind(): Crea una nueva función "ligada" a un valor this especificado. La función original no se ejecuta inmediatamente.

// function.bind(thisArg, arg1, arg2, ...)
const user = { name: 'Bob' };

function sayHello() {
  console.log(`Mi nombre es ${this.name}`);
}

const boundSayHello = sayHello.bind(user);

boundSayHello(); // Mi nombre es Bob

Funciones flecha (=>): Las funciones flecha no tienen su propio contexto this. Capturan this del entorno léxico (del scope padre donde fueron definidas).

class MyClass {
  constructor() {
    this.value = 'valor de la clase';
    // La función flecha mantiene el contexto de la clase
    this.logValue = () => {
      console.log(this.value);
    };
  }
}

const instance = new MyClass();
const method = instance.logValue;

method(); // valor de la clase (el contexto se mantiene)

// Comparar con una función normal sin bind
class OtraClase {
    constructor() {
        this.value = 'otro valor';
        this.logValue = function() {
            console.log(this.value); // 'this' será window o undefined en modo estricto
        };
    }
}

const otraInstancia = new OtraClase();
const otroMetodo = otraInstancia.logValue;

otroMetodo(); // undefined (el contexto se pierde al llamar como función independiente)

¿Cómo cambiar el contexto de una función en JavaScript?