Wat is de context in JavaScript?

De context (this) in JavaScript is een verwijzing naar het object waarin de huidige functie wordt uitgevoerd. De waarde wordt bepaald door hoe de functie is aangeroepen, niet door waar deze is gedefinieerd.

Belangrijkste manieren om de context te bepalen:

• Globale context: Buiten functies, in niet-strikte modus, verwijst this naar het globale object (window in de browser, global in Node.js). In strikte modus is this undefined.

  // Niet-strikte modus (in de browser)
  console.log(this === window); // true
  
  // Strikte modus
  "use strict";
  console.log(this === undefined); // true
  

• Methode van een object: Als een functie wordt aangeroepen als methode van een object (obj.method()), verwijst this binnen de functie naar dat object (obj).

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Output: Hello, John (this verwijst naar user)
  

• Aanroep van een functie (call, apply, bind): De methoden call en apply roepen de functie aan met een expliciet gespecificeerd context. bind maakt een nieuwe functie met een vaste context.

  function sayName(greeting) {
      console.log(greeting + ", " + this.name);
  }
  
  const person = { name: "Peter" };
  
  sayName.call(person, "Hi"); // Output: Hi, Peter (this = person)
  sayName.apply(person, ["Hello"]); // Output: Hello, Peter (this = person)
  
  const boundSayName = sayName.bind(person, "Hey");
  boundSayName(); // Output: Hey, Peter (this = person)
  

• Constructor (new): Wanneer een functie wordt aangeroepen met de operator new, wordt een nieuw leeg object gemaakt, en this binnen de constructorfunctie verwijst naar dat nieuwe object.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Output: John (this binnen Person verwijst naar john)
  

• Pijl functies: Pijl functies hebben geen eigen context. this binnen een pijl functie wordt overgenomen uit de externe (lexicale) scope waar de functie is gemaakt.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this wordt overgenomen van greet (verwijst naar user)
          };
          innerGreet();
      }
  };
  user.greet(); // Output: Hello, Alice
  

Het begrijpen van hoe this wordt bepaald, is cruciaal voor correct werken met objecten, methoden en event handlers in JavaScript.