JavaScript -sluitingen
JavaScript-variabelen kunnen tot het lokale of globale bereik behoren.
Globale variabelen kunnen lokaal (privé) worden gemaakt met sluitingen .
Globale variabelen
A functionheeft als volgt toegang tot alle variabelen die in de functie zijn gedefinieerd:
Voorbeeld
function myFunction() {
let a = 4;
return a * a;
}
Maar a functionheeft ook toegang tot variabelen die buiten de functie zijn gedefinieerd, zoals deze:
Voorbeeld
let a = 4;
function myFunction() {
return a * a;
}
In het laatste voorbeeld is a een globale variabele.
In een webpagina horen globale variabelen bij het window-object.
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 deze is gedefinieerd. Het is verborgen voor andere functies en andere scriptcode.
Globale en lokale variabelen met dezelfde naam zijn verschillende variabelen. Als u de ene wijzigt, wijzigt u de andere niet.
Variabelen die zijn gemaakt zonder een declaratiesleutelwoord ( var,
let, of const) zijn altijd globaal, zelfs als ze binnen een functie zijn gemaakt.
Voorbeeld
function myFunction() {
a = 4;
}
Variabele levensduur
Globale variabelen blijven bestaan totdat de pagina wordt verwijderd, bijvoorbeeld wanneer u naar een andere pagina navigeert of het venster sluit.
Lokale variabelen hebben een korte levensduur. Ze worden gemaakt wanneer de functie wordt aangeroepen en verwijderd wanneer de functie is voltooid.
Een tegendilemma
Stel dat u een variabele wilt gebruiken om iets te tellen, en u wilt dat deze teller voor alle functies beschikbaar is.
Je zou een globale variabele kunnen gebruiken, en a functionom de teller te verhogen:
Voorbeeld
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3
Er is een probleem met de bovenstaande oplossing: Elke code op de pagina kan de teller wijzigen, zonder add() aan te roepen.
De teller moet lokaal zijn voor de add()functie, om te voorkomen dat andere code deze wijzigt:
Voorbeeld
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 0
Het werkte niet omdat we de globale teller weergeven in plaats van de lokale teller.
We kunnen de globale teller verwijderen en toegang krijgen tot de lokale teller door de functie deze te laten retourneren:
Voorbeeld
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 1.
Het werkte niet omdat we de lokale teller elke keer dat we de functie aanroepen, opnieuw hebben ingesteld.
Een innerlijke JavaScript-functie kan dit oplossen.
JavaScript geneste functies
Alle functies hebben toegang tot het globale bereik.
In feite hebben alle functies in JavaScript toegang tot het bereik "boven" hen.
JavaScript ondersteunt geneste functies. Geneste functies hebben toegang tot het bereik "boven" hen.
In dit voorbeeld heeft de innerlijke functie plus()toegang tot de countervariabele in de bovenliggende functie:
Voorbeeld
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
Dit had het tegendilemma kunnen oplossen, als we de plus()
functie van buitenaf hadden kunnen bereiken.
We moeten ook een manier vinden om counter = 0slechts één keer uit te voeren.
We hebben een afsluiting nodig.
JavaScript-sluitingen
Onthoud zelfoproepende functies? Wat doet deze functie?
Voorbeeld
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// the counter is now 3
Voorbeeld uitgelegd
De variabele addwordt toegewezen aan de retourwaarde van een zichzelf aanroepende functie.
De zelfoproepfunctie wordt maar één keer uitgevoerd. Het stelt de teller in op nul (0) en retourneert een functie-uitdrukking.
Op deze manier wordt toevoegen een functie. Het "geweldige" deel is dat het toegang heeft tot de teller in de bovenliggende scope.
Dit wordt een JavaScript -sluiting genoemd. Het maakt het mogelijk dat een functie " private " variabelen heeft.
De teller wordt beschermd door het bereik van de anonieme functie en kan alleen worden gewijzigd met de functie toevoegen.
Een sluiting is een functie die toegang heeft tot het bovenliggende bereik, zelfs nadat de bovenliggende functie is gesloten.