Hogyan változtatható meg egy függvény kontextusa…

JavaScript-ben a függvény végrehajtási kontextusát (this) többféleképpen lehet megváltoztatni:

call(): Egy függvényt egy megadott this értékkel és külön argumentumokkal futtat, amelyeket vesszővel választanak el.

// function.call(thisArg, arg1, arg2, ...)
function greet(name) {
  console.log(`Szia, ${name}! Én vagyok ${this.type}`);
}

const obj = { type: 'objektum' };

greet.call(obj, 'Alicia'); // Szia, Alicia! Én vagyok objektum

apply(): Egy függvényt egy megadott this értékkel és argumentumokkal futtat, amelyeket tömb vagy tömb-szerű objektum formájában adnak át.

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

const context = { name: 'Számológép' };
const numbers = [5, 10];

sum.apply(context, numbers); // Számológép: 15

bind(): Létrehoz egy új függvényt, amely "hozzárendelt" egy megadott this értékhez. Az eredeti függvény nem fut le azonnal.

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

function sayHello() {
  console.log(`Az én nevem ${this.name}`);
}

const boundSayHello = sayHello.bind(user);

boundSayHello(); // Az én nevem Bob

Nyíl függvények (=>): A nyíl függvények saját this-el nem rendelkeznek. A lexikális környezetből (ahol definiálták) veszik át a this-t.

class MyClass {
  constructor() {
    this.value = 'osztályérték';
    // A nyíl függvény megőrzi az osztály kontextusát
    this.logValue = () => {
      console.log(this.value);
    };
  }
}

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

method(); // osztályérték (a kontextus megmarad)

// Hasonlítsd össze egy normál függvénnyel, bind nélkül
class MásikOsztály {
    constructor() {
        this.value = 'más érték';
        this.logValue = function() {
            console.log(this.value); // 'this' lesz window vagy undefined strict módban
        };
    }
}

const masikInstance = new MásikOsztály();
const masikMetod = masikInstance.logValue;

masikMetod(); // undefined (a kontextus elveszik a híváskor, mint külön függvény)

Hogyan változtatható meg egy függvény kontextusa JavaScriptben?