Wat is het sleutelwoord 'this'?

this is een sleutelwoord in JavaScript dat verwijst naar het object in de context waarin de huidige code wordt uitgevoerd. De waarde wordt bepaald door de manier waarop de functie wordt aangeroepen.

De belangrijkste manieren om this te definiëren:

• Globale context: Buiten een functie verwijst this naar het globale object (window in de browser, global in Node.js).
• Normale functiebroep: In niet-strikte modus (strict mode) verwijst this ook naar het globale object (of undefined als de functie wordt aangeroepen als methode van een object, maar dat object is null of undefined). In strikte modus is this gelijk aan undefined.
• Objectmethode: Als de functie wordt aangeroepen als methode van een object (dus via de puntoperator .), verwijst this naar het object dat de methode bezit.
• Constructor: Bij gebruik van de new-operator verwijst this naar de nieuw gemaakte instantie van het object.
• call(), apply(), bind()-methoden: Deze methoden stellen expliciet de waarde van this in bij het aanroepen van de functie. bind() retourneert een nieuwe functie met this gebonden, terwijl call() en apply() de functie aanroepen met de gespecificeerde this.
• Pijl functies: Pijl functies hebben geen eigen this. this in een pijl functie wordt lexicaal geërfd uit de omgeving waarin deze is gedefinieerd.

Voorbeelden:

// Globale context
console.log(this === window); // true (in de browser)

// Normale functiebepaling
function myFunction() {
  console.log(this);
}
myFunction(); // window (in niet-strikte modus)

// Objectmethode
const myObject = {
  myMethod: function() {
    console.log(this);
  }
};
myObject.myMethod(); // myObject

// Constructor
function MyConstructor() {
  this.value = 10;
  console.log(this);
}
const instance = new MyConstructor(); // instantie object

// call(), apply(), bind()
function greet(name) {
  console.log("Hello, " + name + "! My name is " + this.name);
}
const person = { name: "Alice" };
greet.call(person, "Bob"); // Hello, Bob! My name is Alice
greet.apply(person, ["Bob"]); // Hello, Bob! My name is Alice
const boundGreet = greet.bind(person);
boundGreet("Bob"); // Hello, Bob! My name is Alice

// Pijl functie
const arrowFunction = () => {
  console.log(this);
};
arrowFunction(); // window (als gedefinieerd in de globale context)

Het begrijpen van hoe this wordt bepaald in verschillende contexten is cruciaal voor het schrijven van correcte JavaScript-code.