context

Contex

Wat is context?

Met de context wordt er gerefereerd naar de huidige waarde van het keyword this. Deze waarde is gebaseerd op de plek in je code waar this wordt uitgevoerd. In de global scope geeft het keyword this bijvoorbeeld altijd het window object terug. this refereert dus naar het object dat wordt beïnvloed op het moment dat this wordt uitgevoerd. Hieronder staan een aantal voorbeelden.

let context = {
  test: "test",
  context: function () {
    console.log(this);
  },
};

context.context(); //In de console: Het context object

console.log(this); //In de console: Het window object

Een ander voorbeeld is het gebruik van het this keyword in combinatie met een event listener. Hier beneden staat een simpel voorbeeld van een html pagina met een element die rood wordt zodra er op wordt geklikt.

<p id="p">Context</p>
<script scr="./context.js"></script>

let p = document.querySelector("#p");

p.addEventListener("click", function () {
  this.style.color = "red"; //Het p element kleurt nu rood
});

In context waarin het this keywords wordt aangeroepen wordt het p object momenteel beïnvloed. Het is immers zijn eigen event listener. Het this keyword zal hier dus ook refereren naar het p object. Hij zal in dit voorbeeld dus rood kleuren wanneer er op wordt geklikt.

Call en Apply

Call

Met behulp van de methode call kan je expliciet de context veranderen. Zie het onderstaande voorbeeld.

function context() {
  console.log(this.a); //In de console: 'a'
}

let a = {
  a: "a",
};

context.call(a);

Apply

Apply werkt hetzelfde als call. Apply accepteert echter maar twee argumenten, de context en een array met waardes.

Execution context

De execution context is de context waarin JavaScript code wordt geëvalueerd en uitgevoerd. Wanneer er JavaScript code wordt uitgevoerd gebeurt dit dus altijd in een execution context. De execution context komt in drie vormen.

• Global Execution Context
• Functional Execution Context
• Eval Function Execution Context

Globar Execution Context

Dit is de normale execution context. Alle code die in de global scope staat wordt in deze context uitgevoerd. Het object dat hier wordt beïnvloed is de window, hiervoor moet de code wel in de browser draaien. Dit wordt dus ook het object waar het this keyword naar refereert. In een bestand is er maar één global scope, er is dus ook maar één global execution context.

Functional Execution Context

Zodra er een functie wordt aangeroepen wordt er voor de functie een nieuwe context aangemaakt. Deze context heet de functional execution context. Wanneer deze context wordt aangemaakt wordt hij bovenaan de zogenoemde execution stack gezet. Hier staat dus altijd onderdaan de global execution context. Zodra de functie uitgevoerd is verdwijnt de execution context van deze functie.

Even Function Execution Context

Code in een eval functie krijgt ook zijn eigen execution context.

Bronnen

• Gupta, D. (2019, 26 december). Understanding Javascript ‘this’ keyword (Context). Medium. https://towardsdatascience.com/javascript-context-this-keyword-9a78a19d5786
• Arora, S. (2019, 29 maart). Understanding Execution Context and Execution Stack in Javascript. Medium. https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0