Week 3 Front end: Context - norakramer1/blokTech GitHub Wiki
Context
Context wordt gebruikt om te verwijzen naar de waarde van this
in een bepaald deel van de code. Scope verwijst naar de zichtbaarheid van variabelen en Context verwijst naar de waarde van this
in hetzelfde Scope. Je kunt de Context veranderen door Function Methods te gebruiken.
"This'
This refereert naar het object wat de huidige functie uitoefent. Het werkt met de punt notatie waarin alles links van de . verwijst naar this.
var objectA = {
name : 'objectA',
sayName : function(){
alert(this.name);
}
}
objectA.sayName();
Als je de naam objectA wil laten zien kun je dit doen door objectA.sayName();
je hoeft niet alert(object.name);
neer te zetten omdat this
refereert naar objectA. sayName
runt in de context van objectA en daarom refereert het naar het object. De context verteld de method wat this
betekent
Explicit binding
Er zijn voorgedefineerde methods die het gedrag van this veranderen, het zijn call, apply en bind. Deze zetten de waarde van this expliciet zonder te gokken.
Bind method
Bind roept de functie niet aan maar retourneert een kopie van de functie. Je kunt deze later weer gebruiken omdat deze 'gebonden' is aan het object.
Apply
Bij apply worden de argumenten gepassed in een Array terwijl ze bij call een voor een gepassed worden.
var sayName = function(apple, pear) {
console.log(‘i like ’ + apple + ‘ and ’+ pear ‘.’);
};
var fruits = [‘apple’, ‘pear’]
sayName.apply(fruits)
Call method
Je gebruikt call om een functie aan te roepen die je een specifiek object mee wilt geven, om toe te voegen aan this.
var printName = () ={
console.log(‘Mijn naam is ’ + this.name);
});
var Nora = {
name: ‘Nora’
};
printName.call(Nora)
Hiermee komt er dus "Mijn naam is Nora" uit.
Als een functie onderdeel is van een Object is het een Method. De Method refereert naar het Object zelf. Als het een losse functie is refereert het naar het global object in browsers is dit Window, in Node is dit Global.
Bronnen
-
What is the difference between scope and context in javascript. (2014, 22 oktober). [Video]. YouTube. https://www.youtube.com/watch?v=hDT3IbvH-9I
-
Ahmed, H. (2019b, juli 8). Understanding Scope in JavaScript. Scotch. https://scotch.io/tutorials/understanding-scope-in-javascript#toc-context
-
Function Context - Learn JavaScript - Free Interactive JavaScript Tutorial. (z.d.). Learn-Js. Geraadpleegd op 8 april 2021, van https://www.learn-js.org/en/Function_Context