Kako promeniti kontekst funkcije u JavaScript-u…

У Јавасцрипту, контекст извршавања функције (вредност 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 из лексичког окружења (из обичног родитељског scope-а где су дефинисане).

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

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

method(); // вредност класе (контекст задржан)

// Упоредите са обичном функцијом без bind
class AnotherClass {
    constructor() {
        this.value = 'друга вредност';
        this.logValue = function() {
            console.log(this.value); // 'this' ће бити window или undefined у строгом режиму
        };
    }
}

const anotherInstance = new AnotherClass();
const anotherMethod = anotherInstance.logValue;

anotherMethod(); // undefined (контекст изгубљен при позиву као одвојена функција)

Kako promeniti kontekst funkcije u JavaScript-u?