Context - YunusEmreCMD/blokTech GitHub Wiki

Context is gerelateerd aan objecten. Het verwijst naar het object waartoe een functie behoort. Wanneer een JavaScript-sleutelwoord “this” wordt gebruikt, verwijst het naar het object waartoe de functie behoort.

Stel je zou binnen een functie het volgende zeggen: this.userName, wordt er verwezen naar de eigenschap userName, die hoort bij het object waartoe die functie behoort.

Een klein voorbeeld

Als je bijvoorbeeld het volgende in de console van de browser plaatst, refereert this naar het geen wat links na de punt staat.

let dog = {
 sound: ‘woof’
 talk: function() {
 console.log(this.sound)
 }
}
dog.talk()

We kunnen de context van this begrijpen, door te kijken in welke scope deze zich bevind.

Explicit binding

Het is belangrijk om in gedachten te houden dat door gebruik te maken van de JavaScript-methode call () of apply () de context kunt wijzigen waarin een functie wordt uitgevoerd. Dit verandert op zijn beurt de betekenis van this binnen die functie wanneer deze wordt uitgevoerd.

Call

Stel dat je een functie wilt aanroepen en deze een specifieke object wilt meegeven om “this” toe te wijzen. Dit kunnen we doen door call te gebruiken.

var sayName = () = { 
   console.log ('Mijn name is' + this.name); 
});

var stacey = { 
name: 'Stacey', 
age: 34 
};

Wanneer we willen dat bijvoorbeeld het object stacey de functie sayName moet aanroepen moeten we dat op de volgende manier definiëren.

sayName.call(stacey)

de variabele name wordt gevuld met de waarde “stacey”, wanneer je dit zou loggen zou je de volgende resultaat krijgen “My name is stacey”

Apply

De apply-methode werkt op een vergelijkbare manier als 'call', het verschil is dat je met apply ook een verzameling van reeks argumenten kunt doorgeven. Door apply te gebruiken kan je argumenten in een array stoppen. In de volgende voorbeeld zal lang1, lang2 en lang3 worden vervangen met de content uit de array.

var sayName = function(lang1, lang2, lang3) {
 console.log(‘I know ’ + lang1 + ‘ , ’+  lang2 + ‘ and  ’+ lang3‘.’);
};

var languages = [‘JavaScript’, ‘Ruby’, ‘Python’]

sayName.apply(languages)

wanneer je dit logt, zul je “I know Javascript, Ruby and Phython” terug krijgen.

Bronnen

Cunningham, L. (2020, 12 november). Understanding Context in JS - The Startup. Geraadpleegd op 9 maart 2021, van https://medium.com/swlh/understanding-context-in-js-eceb5ef1fa75

This - JavaScript | MDN. (2021, 19 februari). Geraadpleegd op 9 maart 2021, van https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

What is the difference between scope and context in JavaScript. (2021, 10 februari). Geraadpleegd op 9 maart 2021, van https://blog.kevinchisholm.com/javascript/difference-between-scope-and-context/#:%7E:text=Context%20is%20related%20to%20objects,to%20which%20a%20function%20belongs.