Как да промените контекста на функция в JavaScript…

В JavaScript контекстът на изпълнение на функция (this) може да бъде променен по няколко начина:

call(): Изпълнява функция с определена стойност this и аргументи, предадени поотделно, разделени с запетая.

// function.call(thisArg, arg1, arg2, ...)
function greet(name) {
  console.log(`Здравей, ${name}! Аз съм ${this.type}`);
}

const obj = { type: 'обект' };

greet.call(obj, 'Алиса'); // Здравей, Алиса! Аз съм обект

apply(): Изпълнява функция с определена стойност this и аргументи, предадени като масив или подобен на масив обект.

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

const context = { name: 'Калкулатор' };
const numbers = [5, 10];

sum.apply(context, numbers); // Калкулатор: 15

bind(): Създава нова функция, "свързана" с определена стойност this. Оригиналната функция не се изпълнява веднага.

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

function sayHello() {
  console.log(`Моето име е ${this.name}`);
}

const boundSayHello = sayHello.bind(user);

boundSayHello(); // Моето име е Боб

Стрелкови функции (=>): Стрелковите функции нямат собствен контекст this. Те улавят this от лексикалната среда (от обхвата, в който са дефинирани).

class MyClass {
  constructor() {
    this.value = 'стойност на класа';
    // Стрелкова функция запазва контекста на класа
    this.logValue = () => {
      console.log(this.value);
    };
  }
}

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

method(); // стойност на класа (контекстът е запазен)

// Сравнете с обикновена функция без bind
class ДругКлас {
    constructor() {
        this.value = 'друга стойност';
        this.logValue = function() {
            console.log(this.value); // 'this' ще бъде window или undefined в строг режим
        };
    }
}

const другаInstance = new ДругКлас();
const другаМетод = другаInstance.logValue;

другаМетод(); // undefined (контекстът се губи при извикване като отделна функция)

Как да промените контекста на функция в JavaScript?