Context - Txai-HvA/BlokTech GitHub Wiki

Context vs. Scope

Context en scope zijn niet hetzelfde.

Elke functie aanroep heeft een scope een een context die eraan is gekoppeld. Scope is function-based en context is object-based. Scope heeft betrekking op de variable toegang van een functie wanneer deze wordt aangeroepen en is uniek voor elke aanroep. Context is altijd de waarde van het trefwoord this, wat een verwijzing is naar het object dat de momenteel uitgevoerde code "bezit" (Ryan Morr., 2013).

this

Context wordt meestal bepaald door hoe een functie wordt aangeroepen. Wanneer een functie wordt aangeroepen als een methode van een object, wordt dit ingesteld op het object waarop de methode wordt aangeroepen (Ryan Morr., 2013).

var obj = {
    foo: function() {
        return this;   
    }
};
obj.foo() === obj; // true

Hetzelfde principe is van toepassing bij het aanroepen van een functie met de nieuwe operator om een instance van een object te maken (Ryan Morr., 2013).

function foo() {
    alert(this);
}

foo() // window
new foo() // foo

Global context

In de global execution context (buiten een function), verwijst dit naar het global object (MDN, 2021).

// In web browsers is het window object ook het global object:
console.log(this === window); // true

birthYear = 1995;
console.log(window.birthYear); // 1995

this.name = "Txai";
console.log(window.name)  // "Txai"
console.log(name)         // "Txai"

Function context

Binnen een functie hangt de waarde hiervan af van hoe de functie wordt aangeroepen. Doordat de onderstaande code zich niet in de strict mode bevindt en doordat de waarde hiervan niet wordt ingesteld door de aanroep, wordt dit standaard ingesteld op het global object, dat een venster in de browser is (MDN, 2021).

function f1() {
  return this;
}

// In de browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

Als in de strict mode de waarde hiervan niet is ingesteld bij het invoeren van een execution context, blijft deze echter ongedefinieerd, zoals in het volgende voorbeeld (MDN, 2021):

function f2() {
  'use strict'; // Zie strict mode
  return this;
}

f2() === undefined; // true

Bronnen