Context Findings - wongsrila/intern-match GitHub Wiki

Wanneer ons programma start, wordt automatisch een JavaScript-object gemaakt met een lexicale omgeving op het hoogste niveau genaamd Global Scope. Functies en variabelen die in functies zijn genest of tussen accolades zijn ingekapseld, hebben hun eigen bereik.

Wanneer we werken met object oriented programmeren, is het belangrijk dat we weten welke object welke functie aanroept. this verwijst naar het object dat de momenteel de actieve functie aanroept. Dus we weten waar this naar verwijst als we de scope weten waar we in zitten.

Als we dit voorbeeld nemen, verwijst this naar een property in het object (de scope) waar this zich bevind (dog). In dit geval is this.sound === 'woof'

const dog = {
 sound: 'woof',
 talk: function() {
 console.log(this.sound)
 }
}

dog.talk();

Bij het aanroepen van een functie met behulp van puntnotatie zoals in het voorbeeld hierboven, verwijst this naar alles wat aan de linker kant staat van de punt.

Explicit Binding

Er zijn een paar voorgedefinieerde methoden die het gedrag van this veranderen, je kan deze methoden onthouden met de afkorting CAB.

• Call
• Apply
• Bind

Call

Stel dat je een functie wilt aanroepen en deze een specifiek object wilt geven om aan this toe te wijzen. Je kan dit doen door call(...) te gebruiken.

Een voorbeeld:

const person = {
  name: function () {
    return 'My name is ' + this.name + ' and Im ' + this.age + ' years old.';
  },
};

const first = {
  name: 'First',
  age: 20,
};

x = person.name.call(first);

console.log(x);

Dit returned: My name is First and Im 20 years old.

Apply

apply werkt bijna hetzelfde als call. Het verschil tussen de twee is dat met apply je ook een collection of array in de argument kan zetten.

een voorbeeld hiervan:

const person = {
  allHobies: function (hobby1, hobby2) {
    return 'Hobbies van ' + this.firstName + ' ' + this.lastName + ' zijn ' + hobby1 + ' en ' + hobby2;
  },
};

const person1 = {
  firstName: 'First',
  lastName: 'Wongsrila',
};

const hobbiesArray = ['Kickboxen', 'djen'];

x = person.allHobies.apply(person1, hobbiesArray);

console.log(x);

Dit returned: Hobbies van First Wongsrila zijn kickboxen en djen

Bind

Het verschil tussen call, apply en bind is dat bind een nieuwe functie retourneert die we later kunnen aanroepen, in plaats van de oorspronkelijke functie aan te roepen.

const module = {
  x: 42,
  getX: function () {
    return this.x;
  },
};

const unboundGetX = module.getX;

const x = unboundGetX.bind(module);

console.log(x());

Bronnen

Cunningham, L. (2020, 12 november). Understanding Context in JS - The Startup. Medium. https://medium.com/swlh/understanding-context-in-js-eceb5ef1fa75

Hitesh Choudhary. (2020, 23 juli). Understand the context in javascript. YouTube. https://www.youtube.com/watch?v=_JMXlGt3OSo&ab_channel=HiteshChoudhary

freeCodeCamp.org. (2020, 1 juni). How to understand the keyword this and context in JavaScript. https://www.freecodecamp.org/news/how-to-understand-the-keyword-this-and-context-in-javascript-cd624c6b74b8/

Function.prototype.bind() - JavaScript | MDN. (2021, 14 mei). Https://Developer.Mozilla.Org/. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

JavaScript Function call(). (z.d.). Https://Www.W3schools.Com/. https://www.w3schools.com/js/js_function_call.asp

JavaScript Function Apply(). (z.d.). Https://Www.W3schools.Com/. https://www.w3schools.com/js/js_function_apply.asp