Context

Context wordt gebruikt om te verwijzen naar een waarde in een bepaald deel van een code, dit wordt gedaan met het trefwoord this. Met behulp van de functiemethoden is het mogelijk om de context te kunnen wijzigen (Hammad Agmed, 2017).

In Javascript wordt context over het algemeen op dezelfde manier gebruikt als in natuurlijke taal. Bijvoorbeeld we schrijven: “mijn moeder werd blauw, dit is heel zorgwekkend” i.p.v. “Mijn moeder werd blauw, is erg zorgwekkend”. Als we de context hiervan kennen, kunnen we begrijpen wat ons zo veel zorgen maakt. this, het verwijst naar objecten, variabelen en we gebruiken het in context (Michal Witkowski, 2017).

Global context

Het gebeurt vaak dat ontwikkelaars het trefwoord this zonder context gebruiken, waardoor de browser zijn best doet om te begrijpen waar this in global verwijst. Hier een voorbeeld, window:

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

Buiten elke functie in een globale executie context verwijst this naar de globale context (window-object).

Function context

Een functie context kan gezien worden als een zin context, voorbeeld “mijn moeder werd blauw, dit is erg zorgwekkend.” Dit kunnen we ook in verschillende zinnen gaan gebruiken. Voorbeeld: “Er komt een orkaan aan, dit is erg zorgwekkend.” Dit komt op hetzelfde neer, maar dan in een andere context en de betekenis is totaal anders.

Context in JavaScript is gerelateerd aan objecten. Het verwijst naar het object binnen de functie die wordt uitgevoerd. this verwijst naar het object waarin de functie wordt uitgevoerd (Michal Witkowski, 2017).

// voorbeeld # 1
var a = 20;

function gx () {
    return this;
}

function fx () {
    return this.a;
}

function fy () {
    return window.a;
}

// `this` wordt bepaald door hoe een functie wordt aangeroepen.
// functies worden aangeroepen in een globale context.
console.log(gx() === window);
// => True
console.log(fx());
// => 20
console.log(fy());
// => 20

Wanneer een functie wordt aangeroepen als een methode van een object, wordt this ingesteld op het object waarop de methode wordt aangeroepen.

// voorbeeld # 2
var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f());
// => 37

// voorbeeld # 3
function fx () {
    return this;
}

var obj = {
    method: function () {
        return this;
    }
};

var x_obj = {
    y_obj: {
        method: function () {
            return this;
        }
    }
};

console.log(fx() === window);
// => True - global context
console.log(obj.method() === window);
// => False - Functie wordt aangeroepen als een methode van een object.
console.log(obj.method() === obj);
// => True - Functie wordt aangeroepen als een methode van een object.
console.log(x_obj.y_obj.method() === x_obj)
// => False - Functie wordt aangeroepen als een methode van het object y_obj, dus dit is de context.

Bij een strict mode zijn regels anders. De context blijft zoals het was gedefinieerd. In het voorbeeld zie je dat het niet gedefinieerd is, het is “undefined.”

// voorbeeld # 4
function f2 () {
  'use strict'; 
  return this;
}

console.log(f2() === undefined);
// => True

Net als in het vorige voorbeeld wordt de functie aangeroepen als een methode van een object, ongeacht hoe deze is gedefinieerd.

// voorbeeld # 5
function fx () {
    return this;
}

var obj = {
    method: fx
};

console.log(obj.method() === window);
// => False
console.log(obj.method() === obj);
// => True

this is dynamisch, Hierdoor kan het object van het ene naar het anderen veranderen.

// voorbeeld # 6

var obj = {
    method: function () {
        return this;
    }
};

var sec_obj = {
    method: obj.method
};

console.log(sec_obj.method() === obj);
// => False
console.log(sec_obj.method() === sec_obj);
// => True

We kunnen this fruit en objectnaam noemen.

// voorbeeld # 7

var shop = {
  fruit: "Apple",
  sellMe: function() {
    console.log("this ", this.fruit);
// => this Apple
    console.log("shop ", shop.fruit);
// => shop Apple
  }
}

shop.sellMe()

“new” zorgt voor verandering in de regels, de operator “new” creëert instantie van een object. De context van de functie wordt ingesteld op de gemaakte instantie van een object.

// voorbeeld # 8

var Foo = function () {
    this.bar = "baz"; 
};

var foo = new Foo();

console.log(foo.bar); 
// => baz
console.log(window.bar);
// => undefined

Bronnen

Hammad Agmed (2017, 15 februari). Unerstanding Scope in Javascript. Geraadpleegd van, https://scotch.io/tutorials/understanding-scope-in-javascript

Michal Witkowski (2017, 6 oktober). Geraadpleegd van, https://blog.pragmatists.com/the-many-faces-of-this-in-javascript-5f8be40df52e