Cum se schimbă contextul unei funcții în JavaScript…

În JavaScript, contextul de execuție al unei funcții (this) poate fi schimbat în mai multe moduri:

call(): Execută o funcție cu o valoare this specificată și argumente transmise individual, separate prin virgule.

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

const obj = { type: 'obiect' };

greet.call(obj, 'Alice'); // Salut, Alice! Sunt obiect

apply(): Execută o funcție cu o valoare this specificată și argumente transmise sub formă de array sau obiect asemănător array-ului.

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

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

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

bind(): Creează o nouă funcție "legată" de o valoare this specificată. Funcția originală nu se execută imediat.

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

function sayHello() {
  console.log(`Numele meu este ${this.name}`);
}

const boundSayHello = sayHello.bind(user);

boundSayHello(); // Numele meu este Bob

Funcții săgeată (=>): Funcțiile săgeată nu au propriul lor this. Captură this din mediul lexical (din scope-ul părinte în care au fost definite).

class MyClass {
  constructor() {
    this.value = 'valoare de clasă';
    // Funcție săgeată păstrează contextul clasei
    this.logValue = () => {
      console.log(this.value);
    };
  }
}

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

method(); // valoare de clasă (contextul este păstrat)

// Compară cu o funcție normală fără bind
class AltăClasă {
    constructor() {
        this.value = 'altă valoare';
        this.logValue = function() {
            console.log(this.value); // 'this' va fi window sau undefined în modul strict
        };
    }
}

const altăInstanță = new AltăClasă();
const altăMetodă = altăInstanță.logValue;

altăMetodă(); // undefined (contextul se pierde la apel ca funcție separată)

Cum se schimbă contextul unei funcții în JavaScript?