Hoe verander je de context van een functie in…

In JavaScript kan de uitvoeringcontext van een functie (this) op verschillende manieren worden gewijzigd:

call(): Voert een functie uit met een gespecificeerde this-waarde en argumenten die afzonderlijk worden doorgegeven, gescheiden door komma's.

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

const obj = { type: 'object' };

greet.call(obj, 'Alice'); // Hallo, Alice! Ik ben object

apply(): Voert een functie uit met een gespecificeerde this-waarde en argumenten die worden doorgegeven als een array of array-achtig object.

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

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

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

bind(): Maakt een nieuwe functie die "gebonden" is aan een gespecificeerde this-waarde. De originele functie wordt niet onmiddellijk uitgevoerd.

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

function sayHello() {
  console.log(`Mijn naam is ${this.name}`);
}

const boundSayHello = sayHello.bind(user);

boundSayHello(); // Mijn naam is Bob

Pijlfuncties (=>): Pijlfuncties hebben geen eigen this-context. Ze vangen this uit de lexicale omgeving (de bovenliggende scope waar ze zijn gedefinieerd).

class MyClass {
  constructor() {
    this.value = 'klaswaarde';
    // Pijlfunctie behoudt de context van de klas
    this.logValue = () => {
      console.log(this.value);
    };
  }
}

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

method(); // klaswaarde (de context wordt behouden)

// Vergelijk met een normale functie zonder bind
class AndereKlasse {
    constructor() {
        this.value = 'andere waarde';
        this.logValue = function() {
            console.log(this.value); // 'this' wordt window of undefined in strict mode
        };
    }
}

const andereInstance = new AndereKlasse();
const andereMethode = andereInstance.logValue;

andereMethode(); // undefined (de context gaat verloren bij het aanroepen als een losse functie)

Hoe verander je de context van een functie in JavaScript?