Week 5 Front End - mbergevoet/blok-tech GitHub Wiki
Prototypes
Een prototype in JavaScript is een manier om dingen te veranderen of te gebruiken voor meerdere objecten te gelijk. Normaal wanneer je een constructor object gebruikt en meerdere objecten declareerd zullen er altijd functies en waardes uit de functie dubbel gebruikt worden. Dat kan wel maar kan veel korter en efficiënter wanneer je een prototype gebruikt. Door een prototype te maken kun je daar in een functie of variabelen aanmaken die gebruikt kan worden door alle objecten met de zelfde constructor. Zo hoeft Javascript niet steeds de overeenkomende functies of variabelen dubbel te creëren maar kunnen ze worden gehaald uit het prototype.
Voorbeeld van mdn
var Person = function() {
this.canTalk = true;
};
Person.prototype.greet = function() {
if (this.canTalk) {
console.log('Hi, I am ' + this.name);
}
};
var Employee = function(name, title) {
Person.call(this);
this.name = name;
this.title = title;
};
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.greet = function() {
if (this.canTalk) {
console.log('Hi, I am ' + this.name + ', the ' + this.title);
}
};
Hoisting
Functies en variabelen kunnen gehoist (omhoog gehezen) worden door de manier waarop Javascript code interpreteert. Als hoisting plaatst vind word een declaratie naar het begin van de scope verplaatst. Dit gebeurt meestal als een variabelen of een functie eerder wordt aangeroepen voordat de declaratie plaats heeft gevonden. Of anders geformuleerd, een functie of variabelen kan gedeclareerd worden nadat deze al is gebruikt/aangeroepen.
function groet() {
console.log('Hallo ' + mijnNaam);
};
var mijnNaam;
groet();
mijnNaam = 'Piet';
In het bovenstaande voorbeeld wordt mijnNaam
gehoist naar de functie groet
en vervolgens in de console.log
terwijl hij pas een waarde krijgt nadat de function groet();
is aangeroepen.
Bron: https://medium.com/javascript-in-plain-english/https-medium-com-javascript-in-plain-english-what-is-hoisting-in-javascript-a63c1b2267a1
Bron: https://developer.mozilla.org/nl/docs/Glossary/Hoisting
Closures
Een closure is een function binnen een grotere function die gebruik maakt van variabelen/objecten/functions die grotere function. De binneste function heeft dus toegang tot te function scope van de buitenste funtion.
function buiten() {
const b = 10;
function binnen() {
const a = 20;
console.log(a+b);
}
return binnen;
}
In het bovenstaande voorbeeld kun je zien dat de funtion binnen()
de const b
gebruikt uit de function buiten()
om const a
mee op te tellen.
Bron: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Bron: https://medium.com/@prashantramnyc/javascript-closures-simplified-d0d23fa06ba4