b ? a : b;
return {
min: minWaarde,
max: maxWaarde
};
}
let test = minMax(3,4);
console.log(test.min); // 3
console.log(test.max); // 4
Let op: bij het return statement moet direct achter return de eerste accolade openen worden gegeven. Anders wordt automatisch een punt-komma toegevoegd achter return en wordt er dus niets geretourneerd.
console.group("Anonieme functies");
window.onload=function(){
document.body.style.backgroundColor="green";
}
console.groupEnd();
Er volgt nu een nog voorbeeld die gebruik maakt van een closure:
var BankRekening = function(nr, sal) {
var nummer = nr;
var saldo = sal;
return {
getSaldo: function() {
return saldo; // geen this, want we zitten in een object.
},
getNummer: function(){
return nummer; // geen this, want we zitten in een object.
}
}
}
// de functie achter 'var BankRekening =' levert dus een object op met twee eigenschappen.
var mijnRekening = new BankRekening(1234,100);
console.log(mijnRekening.getSaldo());
Met een closure kun je juist specifieke code onzichtbaar maken voor de 'buiten wereld'. Wél is het vervolgens mogelijk met get en set methoden de toegankelijkheid naar de lokale variabelen te regelen.
In het volgende voorbeeld maken we een IIFE aan die een object terug geeft. Hiervoor gelden dezelfde regels; lokalen variabelen in de IIFY functie zijn alleen bekend in de geneste functie of het geneste object.
mijnApp = function(){
var naam;
var leeftijd;
return {
setNaam: function(n){
naam = n; // this.naam?
},
getNaam: function(){
return naam;
},
setLeeftijd: function(l){
leeftijd = l;
},
getLeeftijd: function(){
return leeftijd;
}
}
}();
window.onload=function(){
console.log(mijnApp.getNaam());
mijnApp.setNaam("Gamer");
mijnApp.setLeeftijd("34");
console.log(mijnApp.getNaam());
console.log(mijnApp.getLeeftijd());
}
document.getElementById("blokje").style.left = "300px";
Met callback functies kunnen we tegen een probleem qua scope aan lopen.
HTML:
CSS:
div {
position: absolute;
}
Javascript:
window.onload = function(){
document.body.addEventListener("keydown", function(e){
document.getElementById("blokje").style.left = "100px";
/* Het per keer verplaatsen van een element kost meer moeite,
we zouden dan de huidige positie moeten ophalen en daar de tekst 'px'
vanaf moeten knippen. De vervolgens wijzigen en weer 'px' toevoegen,
maar ook dan zullen er de nodige haken en ogen aan de constructie zitten.
*/
}, true);
}
Een callback functie wordt gebruikt om aan te geven dat een functie aanroep op een bepaald moment, niet direct dient te gebeuren, maar op een later moment.
Soms willen we aangeven dat een functie moet worden uitgevoerd als (bijvoorbeeld) een reactie op het klikken met de muisknop of als reactie op het ontvangen van een bericht middels een AJAX call.
Denk aan het maken van een event listener. Daarbij mogen wij inline een stuk code plaatsen die uitgevoerd moet worden wanneer het event afgaat, máár we mogen er ook de naam van een functie in plaatsen.. ZONDER haken: (). Dat is essentieel.
Arrow functions, ofwel 'fat arrows', verkorten dus drastisch de schrijfwijze van de aanroep en declaratie van een functie.
Bekijk de volgende twee voorbeelden op volgorde. We kijken eerst naar een gewone anonieme functie die als parameter wordt meegegeven aan setTimeOut():
HTML:
Voortgang:
Javascript:
function Wijnfles() {
this.aantalSlokken = 50;
var zelf = this;
// Voorbeeld met een bestaande functie die twee parameters aan kan:
setInterval(function(){
zelf.aantalSlokken--;
document.getElementsByTagName("progress")[0].value = zelf.aantalSlokken;
}, 400);
}
var grandCru2005 = new Wijnfles();
var p1 = {
naam: "Amy",
leeftijd: 18,
hobby: "Paard rijden",
zegIets: function() { return "ik vertel graag iets over mijn hobby: " + this.hobby }
};
var p2 = {
naam: "Jacob",
leeftijd: 20,
hobby: "Rondjes rennen",
zegIets: function() { return "ik vertel graag iets over mijn hobby: " + this.hobby }
};
function Persoon(naam, leeftijd, hobby)
{
this.naam = naam;
this.leeftijd = leeftijd;
this.hobby = hobby;
}
Persoon.prototype.zegIets = function() {
return "ik vertel graag iets over mijn hobby: " + this.hobby;
}
var p1 = new Persoon("Amy", 18, "Paard rijden");
var p2 = new Persoon("Jacob", 20, "Rondjes rennen");
We hebben kunnen zien dat we in het tweede voorbeeld compacter, maar vooral meer 'object georienteerd' aan het programmeren waren. Bij het eerste voorbeeld kan gerust een andere programmeur een persoon maken met andere eigenschappen. In voorbeeld twee zijn de eigenschappen middels een functie (wat) meer afgedwongen.
Een object aanmaken hebben we gedaan door een functie aan te roepen. Deze maakte voor ons het object aan. Ook konden wij parameters (argumenten) meegeven, die dan direct aan de eigenschappen van het object werden toegekend. Daardoor was het niet nodig nog los iedere eigenschap van de instantie een waarde te geven. Tot slot is de functie 'zegIets()' bij het tweede voorbeeld effecienter qua geheugengebruik. Bij de eerste manier wordt deze functie voor ieder object apart in het geheugen gezet. Bij het tweede voorbeeld wordt de functie maar één keer opgeslagen en door meedere objecten gebruikt.
Er volgt nu een voorbeeld over het gebruik van een prototype functie:
var Speler = function(leven, mana, wapensoort) {
this.levenspunten = leven;
this.manapunten = mana;
this.wapen = wapensoort;
this.aanvalskracht = (this.levenspunten + this.manapunten) / 2;
}
/* Door onderstaande functie niet in bovenstaande constructor te verwerken, wordt er één functie gemaakt die wordt toegepast op alle Speler objecten, in plaats van één functie PER Speler object */
Speler.prototype.valAan = function(vijand) {
vijand.levenspunten -= this.aanvalskracht;
console.log("Aangevallen. Tegenstander heeft nog: " + vijand.levenspunten + " levenspunten");
}
var mage = new Speler(20,100,"wand");
var warrior = new Speler(100,30,"zwaard");
warrior.valAan(mage);
De prototype notatie zorgt er -juist- voor dat deze functie gedeeld wordt in het geheugen met andere objecten.
Met prototype kan men bij aan een (eventueel zelf aangemaakt) object, zelf aangemaakte eigenschappen koppelen. Dit vereenvoudigt het object-georiënteerd werken.
Met PROTOTYPE kan men het toevoegen van zelf gemaakte eigenschappen aan objecten vereenvoudigen.
Met de call en apply functies kunnen wij een reeds bestaande functie toepassen op een ander (dan origineel) object.
De call methode accepteert (indien gewenst en náást het object dat gebruikt wordt als waarde voor 'this') ook -losse- parameters, die als input parameters voor de toe te passen functie gebruikt zullen worden.
class Tafel {
static aantal = 0;
constructor(lengte, breedte, kleur, prijs){
this.lengte = lengte;
this.breedte = breedte;
this.kleur = kleur;
this.prijs = prijs;
Tafel.aantal++;
console.log(`Tafel gemaakt, er zijn nu ${Tafel.aantal} tafel(s)`);
}
verkoop(){
console.log('Verkoop start...');
Tafel.aantal--;
console.log(`Verkocht! Huidige voorraad van tafels is: ${Tafel.aantal}`);
}
verf(kleur) {
this.kleur = kleur;
console.log(`Tafel is nu ${this.kleur} geverfd`);
}
}
let t1 = new Tafel(200, 90, "oud eiken bruin", 500);
t1.verf("geel");
t1.verkoop();
let t2 = new Tafel(100,100, "meranti donker bruin", 1200);
let t3 = new Tafel(150,70, "esdoorn met knoesten", 1500);
t2.verkoop();
Een mooie feature die JavaScript nog nét iets meer object georiënteerd maakt, is de mogelijkheid subklassen te maken. Ofwel: klassen te laten overerven van andere klassen. Bekijk het volgende voorbeeld:
class Tafel {
static aantal = 0;
constructor(lengte, breedte, kleur, prijs){
this.lengte = lengte;
this.breedte = breedte;
this.kleur = kleur;
this.prijs = prijs;
Tafel.aantal++;
console.log(`Tafel gemaakt, er zijn nu ${Tafel.aantal} tafel(s)`);
}
verkoop(){
console.log('Verkoop start...');
Tafel.aantal--;
console.log(`Verkocht! Huidige voorraad van tafels is: ${Tafel.aantal}`);
}
verf(kleur) {
this.kleur = kleur;
console.log(`Tafel is nu ${this.kleur} geverfd`);
}
}
let t1 = new Tafel(200, 90, "oud eiken bruin", 500);
t1.verf("geel");
t1.verkoop();
let t2 = new Tafel(100,100, "meranti donker bruin", 1200);
let t3 = new Tafel(150,70, "esdoorn met knoesten", 1500);
t2.verkoop();
// HIER BEGINT DE 'BUREAU' KLASSE
class Bureau extends Tafel {
constructor(kleur, prijs, computerSteun){
super(kleur,prijs);
this.computerSteun = computerSteun;
console.log("Dit is een subklasse van Tafel, namelijk een bureau");
}
}
let b1 = new Bureau("grijs",200,true);
if (b1.computerSteun){
console.log("Dit bureau heeft een computersteun!");
}
console.log(`Aantal tafels is nu: ${Tafel.aantal} tafels`);
b1.verkoop();
console.log(`Aantal tafels is nu: ${Tafel.aantal} tafels`);
console.log(Bureau.aantal);
Bureau.aantal = 8;
console.log("Tafels: " + Tafel.aantal);
console.log("Bureau's: " + Bureau.aantal);
De bijbehorende Javascript code bij arrow functions / lambda expressies is de volgende:
function Wijnfles() {
this.aantalSlokken = 50;
// Voorbeeld met een bestaande functie die twee parameters aan kan:
setInterval(() => {
this.aantalSlokken--;
document.getElementsByTagName("progress")[0].value = this.aantalSlokken;
}, 400);
}
var grandCru2005 = new Wijnfles();
En in de HTML staat dit:
Voortgang:
En bij object.create() staat deze Javascript code:
var Tafel = function() {
var kleur = "bruin";
var hoogte = 100;
}
Tafel.prototype.verstelHoogte = function(){
this.hoogte++;
}
var Bureau = function(){
var computerVakje = true;
}
Bureau.prototype = Object.create(Tafel.prototype); // constructor van Tafel gebruiken
var mijnBureau = new Bureau();
mijnBureau.hoogte = 90;
console.log('Huidige hoogte is:' + mijnBureau.hoogte);
mijnBureau.verstelHoogte();
console.log('Nieuwe hoogte is:' + mijnBureau.hoogte);
HTML:
Dit is de brontekst in een element
Dit is de het doel waar de bovenstaande tekst in gedropt mag worden