Waarvan afhankelijk is de waarde van de uitvoeringscontext van `this` in JavaScript?

De waarde van this in JavaScript hangt af van hoe de functie wordt aangeroepen. De belangrijkste scenario's:

1. Globale context: Buiten functies in strict mode ('use strict') is this undefined. Zonder strict mode is het het globale object (window in de browser, global in Node.js).

2. Aanroep van een objectmethode: this wijst naar het object waartoe de aangeroepen methode behoort.

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

3. Normale functieaanroep: In strict mode is this undefined. Zonder strict mode is het het globale object.

   function myFunction() {
     // in strict mode this === undefined
     // zonder strict mode this === window (in de browser)
     console.log(this);
   }
   myFunction();
   

4. Constructor (new): Bij gebruik van de new operator met een constructorfunctie, verwijst this binnen de functie naar het nieuw gemaakte object.

   function MyClass(name) {
     this.name = name; // this === nieuw object
   }
   const instance = new MyClass('test');
   // instance.name === 'test'
   

5. Expliciete binding (call, apply, bind): De methoden call, apply en bind stellen je in staat om expliciet de waarde van this voor een functie in te stellen.

   • call(thisArg, arg1, arg2, ...): Roept de functie aan, stelt this in op thisArg en geeft de argumenten apart door.
   • apply(thisArg, [argsArray]): Roept de functie aan, stelt this in op thisArg en geeft de argumenten als array door.
   • bind(thisArg): Geeft een nieuwe functie terug met this permanent gebonden.

   const anotherObj = { value: 42 };
   function showValue() {
     console.log(this.value);
   }
   showValue.call(anotherObj); // Toont 42
   

6. Pijlfuncties (=>): Pijlfuncties hebben geen eigen this. De waarde van this binnen een pijlfunctie erft van de lexicale context waarin deze is gedefinieerd.

   const outerObj = {
     name: 'Outer',
     method: function() {
       const arrowFunc = () => {
         // this erft van method, die wordt aangeroepen als methode van outerObj
         console.log(this.name);
       };
       arrowFunc();
     }
   };
   outerObj.method(); // Toont 'Outer'
   
   const anotherArrowFunc = () => {
       // this erft van de globale context (of undefined in strict mode)
       console.log(this);
   };
   anotherArrowFunc();
   

7. DOM event handlers: In de meeste gevallen verwijst this in een event handler naar het DOM-element waarop het event plaatsvindt.

   // Voorbeeld in de browser
   const button = document.querySelector('button');
   button.addEventListener('click', function() {
     // this === button
     console.log(this.tagName);
   });
   

Het begrijpen van deze mechanismen is cruciaal voor het correct gebruik van this in JavaScript.