Context Javascript

Context Javascript

Om context binnen javascript te begrijpen gaan we eerst kijken naar het woord this.

'My cat has pain in her paw, this is very worrying'
Het woord this in deze zin vult de plek van de context dat mijn kat pijn heeft aan haar pootje. Het hoeft niet meer herhaald te worden.

In JavaScript, gebruiken we this als een shortcut, een verwijzing. Het verwijst naar objecten, variabelen en we gebruiken het in de context.

Global Context

var a = 15;
console.log(this.a);
// => 15
console.log(window.a);
// => 15

Als we code gebruiken waarin we de context niet meegeven, dus bijvoorbeeld this gebruiken zonder een function mee te geven. Dan wordt this een global context/ De browser gaat dus zelf opzoek wat this nou betekent, in dit geval de window van de webbrowser.

Function Context

Wanneer we this binnen een function gebruiken, krijgt this de informatie over de context door zichzelf te linken aan een object. Dezee moet wel binnen de function staan, als dat niet zo is dan gaat this weer zoeken naar een global context. Dit zie je ook in het voorbeeld hieronder, het object/variable is buiten de function gedeclareerd, waardoor var a = 20; is een global context bij de function gx.

Bij function fx wordt de variable a meegegeven en geeft dus de waarde 20 weer uiteindelijk.

var a = 20;

function gx () {
    return this;
}

function fx () {
    return this.a;
}

function fy () {
    return window.a;
}

console.log(gx() === window);
// => True
console.log(fx());
// => 20
console.log(fy());
// => 20

Bronnen The many faces of this in javascript