Wat is this in JavaScript?

this in JavaScript is een sleutelwoord dat de uitvoeringscontext van een functie aangeeft. De waarde wordt bepaald door de manier waarop de functie wordt aangeroepen.

Normaal gesproken verwijst this naar het globale object (in de browser window) bij een gewone functiewerking, tenzij in strict mode.

In strict mode ('use strict') is this in hetzelfde scenario undefined.

Bij het aanroepen van een methode van een object, verwijst this naar dat object zelf.

const obj = {
  method: function() {
    console.log(this); // obj
  }
};
obj.method();

Bij het gebruik van een constructor (new met een functie), wijst this naar de nieuw gemaakte instantie.

function Constructor() {
  console.log(this); // instantie van Constructor
}
const instance = new Constructor();

Bij het gebruik van methoden zoals call, apply, bind, wordt this expliciet ingesteld als het eerste argument.

function greet() {
  console.log(`Hallo, ${this.name}!`);
}

const person = { name: 'Alicia' };

greet.call(person); // Hallo, Alicia!
greet.apply(person); // Hallo, Alicia!

const boundGreet = greet.bind(person);
boundGreet(); // Hallo, Alicia!

In arrow functies (Arrow Functions) heeft this geen eigen context. Het wordt lexicaal geërfd uit de scope waarin de arrow functie is gedefinieerd.

const obj2 = {
  name: 'Bob',
  greet: function() {
    const arrowGreet = () => {
      console.log(`Hallo van ${this.name}!`); // this verwijst naar obj2
    };
    arrowGreet();
  }
};
obj2.greet(); // Hallo van Bob!

const obj3 = {
  name: 'Charlie',
  greet: () => {
    console.log(`Hallo van ${this.name}!`); // this verwijst naar window (of undefined in strict mode), niet naar obj3
  }
};
obj3.greet(); // Hallo van undefined! (of error)

De context this kan onduidelijk zijn, vooral bij het doorgeven van callbacks of bij asynchrone operaties. Het begrijpen van de regels van this is cruciaal voor de correcte werking van JavaScript.