JavaScript Closure

JavaScript variabelen behoren totLokaalOfGlobaalScope.

Globale variabelen kunnen toegankelijk zijn viaClosureImplementeren lokaal (privé).

Globale variabelen

Functies kunnen toegang krijgen tot functiesInterneGedefinieerde variabelen, zoals:

Voorbeeld

function myFunction() {
    var a = 4;
    return a * a;
}

Probeer het zelf

Maar een functie kan ook functiesExterneGedefinieerde variabelen, zoals:

Voorbeeld

var a = 4;
function myFunction() {
    return a * a;
}

Probeer het zelf

In de laatste voorbeeld:a isGlobaalVariabelen.

In een webpagina behoren globale variabelen tot het window-object.

Globale variabelen kunnen worden gebruikt en gewijzigd door alle scripts op de pagina (en het venster).

In de eerste voorbeeld:a isLokaalVariabelen.

Lokale variabelen kunnen alleen worden gebruikt binnen de functie waarin ze zijn gedefinieerd. Ze zijn onzichtbaar voor andere functies en scriptcode.

Hebben dezelfde naam als globale en lokale variabelen zijn verschillende variabelen. Het wijzigen van één, verandert de andere niet.

niet viasleutelwoord var Gecreëerde variabelen zijn altijd globaal, zelfs als ze in een functie worden gecreëerd.

Levensduur van variabelen

Globale variabelen leven net zo lang als uw applicatie (venster, webpagina).

Lokale variabelen leven niet lang. Ze worden gecreëerd bij een functie-aanroep en worden verwijderd wanneer de functie wordt voltooid.

Een probleem met tellers

Stel dat u een variabele wilt gebruiken om te tellen en u wilt dat deze teller toegankelijk is voor alle functies.

U kunt globale variabelen en functies gebruiken om de teller te verhogen:

Voorbeeld

// Initialiseren van de teller
var counter = 0;
// Functie om de teller te verhogen
function add() {
  counter += 1;
}
// Roep add() driemaal aan
add();
add();
add();
// Op dit moment zou de teller 3 moeten zijn

Probeer het zelf

Het bovenstaande oplossingsvoorstel heeft een probleem: elk code op de pagina kan de teller wijzigen zonder add() aan te roepen.

Voor de add() functie zou de teller lokaal moeten zijn om te voorkomen dat andere code het wijzigt:

Voorbeeld

// Initialiseren van de teller
var counter = 0;
// Functie om de teller te verhogen
function add() {
  var counter = 0; 
  counter += 1;
}
// Roep add() driemaal aan
add();
add();
add();
// Op dit moment zou de teller 3 moeten zijn. Maar het is 0.

Probeer het zelf

Het is nutteloos, omdat we de globale teller weergeven in plaats van de lokale teller.

Door de functie terug te geven, kunnen we de globale teller verwijderen en toegang krijgen tot de lokale teller:

Voorbeeld

// Functie om de teller te verhogen
function add() {
  var counter = 0; 
  counter += 1;
  return counter;
}
// Roep add() driemaal aan
add();
add();
add();
// Op dit moment zou de teller 3 moeten zijn. Maar het is 1.

Probeer het zelf

Het is nutteloos, omdat we de lokale teller elke keer opnieuw instellen wanneer we de functie aanroepen.

JavaScript interne functies kunnen dit probleem oplossen.

Geneste functies in JavaScript

Alle functies hebben het recht om toegang te krijgen tot de globale scope.

In feite hebben alle functies in JavaScript het recht om toegang te krijgen tot hun 'bovenliggende' scope.

JavaScript ondersteunt geneste functies. Geneste functies kunnen toegang krijgen tot de hogere scope.

In dit voorbeeld, de interne functie plus() kan toegang krijgen tot de ouderfunctie van counter Counter variabele:

Voorbeeld

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();     
    return counter; 
}

Probeer het zelf

Op deze manier kunnen we het probleem van de teller oplossen, als we toegang kunnen krijgen van buitenaf plus() Functie.

We moeten ook een functie vinden die slechts een keer wordt uitgevoerd counter = 0 Methode.

We hebben een closure (closure) nodig.

JavaScript Closure

Herinner je je de zelfoproepende functie? Wat doet deze functie dan?

Voorbeeld

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// De teller is momenteel 3

Probeer het zelf

Voorbeeld Uitleg

Variabele add De toewijzing is de retourwaarde van de zelfoproepende functie.

Deze zelfoproepende functie wordt alleen een keer uitgevoerd. Het zet de teller op nul (0) en retourneert de functie-expressie.

Dit maakt add tot een functie. Het ‘meest indrukwekkende’ deel is dat het toegang heeft tot de teller in de ouder scope.

wordt genoemd JavaScript Closure. Het maakt het mogelijk dat een functie een “Privé“Variabelen” worden mogelijk.

De teller wordt beschermd door de scope van deze anonieme functie en kan alleen worden gewijzigd met behulp van de add-functie.

Een closure is een functie die toegang heeft tot de ouder scope, zelfs nadat de vaderfunctie is gesloten.