JavaScript variabelen kunnen tot de lokale orglobale scope behoren.
Globale variabelen kunnen lokaal (privaat) gemaakt worden met afsluitingen.
Globale Variabelen
Een function kan toegang krijgen tot alle variabelen die binnen de functie zijn gedefinieerd, zoals dit:
Voorbeeld
var a = 4;
return a * a;
}
Probeer het zelf ”
Maar een function kan ook variabelen benaderen die buiten de functie zijn gedefinieerd, zoals dit:
Voorbeeld
functie mijnFunctie() {
return a * a;
}
Probeer het zelf ”
In het laatste voorbeeld is a een globale variabele.
In een webpagina behoren globale variabelen tot het vensterobject.
Globale variabelen kunnen worden gebruikt (en gewijzigd) door alle scripts in de pagina (en in het venster).
In het eerste voorbeeld is a een lokale variabele.
Een lokale variabele kan alleen worden gebruikt binnen de functie waarin hij is gedefinieerd. Ze is verborgen voor andere functies en andere scripting code.
Globale en lokale variabelen met dezelfde naam zijn verschillende variabelen. Als de ene wordt gewijzigd, wordt de andere niet gewijzigd.
Variabelen die zijn aangemaakt zonder declaratiesleutelwoord (varlet, of const) zijn altijd globaal, zelfs als ze zijn aangemaakt binnen een functie.
Looptijd van variabelen/h2>
Globale variabelen blijven bestaan totdat de pagina wordt weggegooid, bijvoorbeeld wanneer u naar een andere pagina navigeert of het venster sluit.
Lokale variabelen hebben een kort leven. Ze worden aangemaakt als de functie wordt aangeroepen, en verwijderd als de functie is afgelopen.
Een tellerdilemma
Stel dat je een variabele wilt gebruiken om iets te tellen, en je wilt dat deze teller beschikbaar is voor alle functies.
Je zou een globale variabele kunnen gebruiken, en een function om de teller te verhogen:
Exemplaar
var counter = 0;
/ Functie om teller op te hogen
functie add() {
counter += 1;
}
// Roep add() 3 keer op
add();
add();
add();
// De teller zou nu 3 moeten zijn
Probeer het zelf ”
Er is een probleem met de bovenstaande oplossing: Elke code op de pagina kan de teller veranderen, zonder add() aan te roepen.
De teller moet lokaal zijn in de add() functie, om te voorkomen dat andere code hem wijzigt:
Example
var counter = 0;
/ Functie om teller te verhogen
functie add() {
var counter = 0;
teller += 1;
}
// Roep add() 3 keer op
add();
add();
add();
//De teller zou nu 3 moeten zijn. Maar het is 0
Probeer het zelf ”
Het werkte niet omdat we de globale teller laten zien in plaats van de lokale teller.
We kunnen de globale teller verwijderen en de lokale teller benaderen door de functie te laten retourneren:
Example
functie add() {
var counter = 0;
counter += 1;
return counter;
}
// Roep add() 3 keer op
add();
add();
add();
//De teller zou nu 3 moeten zijn. Maar het is 1.
Probeer het zelf ”
Het werkte niet omdat we de lokale teller resetten elke keer dat we de functie aanroepen.
Een JavaScript inner functie kan dit oplossen.
JavaScript geneste functies
Alle functies hebben toegang tot het globale bereik.
In feite hebben in JavaScript alle functies toegang tot het bereik “boven” hen.
JavaScript ondersteunt geneste functies. Geneste functies hebben toegang tot het bereik “erboven”.
In dit voorbeeld heeft de binnenste functie plus() toegang tot de counter variabele in de bovenliggende functie:
Exemplaar
var teller = 0;
functie plus() {counter += 1;}
plus();
return teller;
}
Probeer het zelf ”
Dit zou het teller-dilemma hebben kunnen oplossen, als we de plus() functie van buitenaf hadden kunnen bereiken.
We moeten ook een manier vinden om counter = 0 maar één keer uit te voeren.
We hebben een closure nodig.
JavaScript Closures
Herken je zelfoproepende functies? Wat doet deze functie?
Exemplaar
var counter = 0;
return functie () {counter += 1; return counter}
})();
add();
add();
add();
// de teller staat nu op 3
Probeer het zelf ”
Uitleg van het voorbeeld
De variabele add wordt toegewezen aan de retourwaarde van een zelfoproepende functie.
De zelfoproepende functie wordt slechts eenmaal uitgevoerd. Hij zet de teller op nul (0), en retourneert een functie-expressie.
Op deze manier wordt add een functie. Het “mooie” is dat het de teller in het bovenliggende bereik kan benaderen.
Dit wordt een JavaScript closure genoemd. Het maakt het mogelijk voor een functie om “privé” variabelen te hebben.
De teller wordt beschermd door het bereik van de anonieme functie, en kan alleen worden gewijzigd met behulp van de add functie.
Een closure is een functie die toegang heeft tot het bovenliggende bereik, zelfs nadat de bovenliggende functie is gesloten.