JavaScript-funktionslukninger

Indholdsfortegnelse

JavaScript-variabler kan tilhøre den lokale eller globalt omfang.

Globale variabler kan gøres lokale (private) med lukninger.

Globale variabler

En funktion kan få adgang til alle variabler defineret inde i funktionen, sådan her:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>A function can access variables defined inside the function:</p>

<p id="demo"></p>

<script>
myFunction();

function myFunction() {
  let a = 4;
  document.getElementById("demo").innerHTML = a * a;
}
</script>

</body>
</html>

Men en funktion kan også få adgang til variabler defineret uden for funktionen, som denne:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>A function can access variables defined outside the function:</p>

<p id="demo"></p>

<script>
let a = 4;
myFunction();

function myFunction() {
  document.getElementById("demo").innerHTML = a * a;
} 
</script>

</body>
</html>

I det sidste eksempel er a en global variabel.

På en webside hører globale variabler til siden.

Globale variabler kan bruges (og ændres) af alle andre scripts på siden.

I det første eksempel er a en lokal variabel.

En lokal variabel kan kun bruges i den funktion, hvor den er defineret. Det er skjult for andre funktioner og anden scripting-kode.

Global og lokale variabler med samme navn er forskellige variabler. Ændring af den ene ændrer ikke den anden.

Bemærk

Variabler oprettet uden et deklarationsnøgleord (var, let eller const) er altid globale, selvom de er oprettet inde i en funktion.

Eksempel

function myFunction() {
  a = 4;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>Variables created without a declaration keyword (var, let, or const) are always global,
even if they are created inside a function.:</p>

<p id="demo"></p>

<script>
myFunction();
document.getElementById("demo").innerHTML = a * a;

function myFunction() {
  a = 4;
} 
</script>

</body>
</html>

Variabel levetid

Globale variabler lever, indtil siden kasseres, som når du navigerer til en anden side eller luk vinduet.

Lokal variabler har kort levetid. De oprettes, når funktionen er aktiveret og slettet, når funktionen er færdig.

Et moddilemma

Antag, at du vil bruge en variabel til at tælle noget, og du vil have dette tæller skal være tilgængelig for alle funktioner.

Du kan bruge en global variabel og en funktion til at øge tælleren:

Eksempel

 // 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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function Closures</h2>
<p>Counting with a global variable.</p>

<p id="demo"></p>

<script>
// 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
document.getElementById("demo").innerHTML = "The counter is: " + counter;
</script>

</body>
</html>

Der er et problem med løsningen ovenfor: Enhver kode på siden kan ændre tælleren uden kalder add().

Tælleren skal være lokal for funktionen add() for at forhindre anden kode i at ændre sig det:

Eksempel

 // 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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function Closures</h2>
<p>Counting with a local variable.</p>

<p id="demo"></p>

<script>
// Initiate counter
let counter = 0;

// Function to increment counter
function add() {
  let counter = 0; 
  counter += 1;
}

// Call add() 3 times
add();
add();
add();

// The result is not 3 because you mix up the globaland local counter
document.getElementById("demo").innerHTML = "The counter is: " + counter;
</script>

</body>
</html>

Det virkede ikke, fordi vi viser den globale tæller i stedet for den lokale tæller.

Vi kan fjerne den globale tæller og få adgang til den lokale tæller ved at lade funktion returnerer det:

Eksempel

 // 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.

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Closures</h2>
<p>Counting with a local variable.</p>

<button type="button" onclick="myFunction()">Count!</button>

<p id="demo">0</p>

<script>
// Function to increment counter
function add() {
  let counter = 0;
  counter += 1;
  return counter;
}
// Trying to increment the counter
function myFunction(){
  document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

Det virkede ikke, fordi vi nulstillede den lokale tæller, hver gang vi ringer til fungere.

En indre JavaScript-funktion kan løse dette.

JavaScript indlejrede funktioner

Alle funktioner har adgang til det globale omfang.

Faktisk har alle funktioner i JavaScript adgang til omfanget "over" dem.

JavaScript understøtter indlejrede funktioner. Indlejrede funktioner har adgang til rækkevidde "over" dem.

I dette eksempel har den indre funktion plus() adgang til tæller-variablen i den overordnede funktion:

Eksempel

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

Prøv det selv →

Dette kunne have løst moddilemmaet, hvis vi kunne nå plus() fungere udefra.

Vi skal også finde en måde at udføre counter=0 kun én gang.

Vi har brug for en lukning.

JavaScript-lukninger

Husk selvpåkaldende funktioner? Hvad gør denne funktion?

Eksempel

const add = (function () {
  let counter = 0;
  return function () {counter += 1; return counter}
})();
add();
add();
add();

// the counter is now 3

Prøv det selv →

Eksempel forklaret

Variablen add er tildelt returværdien af en selvpåkaldende fungere.

Den selvpåkaldende funktion kører kun én gang. Den sætter tælleren til nul (0), og returnerer et funktionsudtryk.

På denne måde bliver add en funktion. Den "vidunderlige" del er, at den kan få adgang tælleren i overordnet omfang.

Dette kaldes en JavaScript lukning. Det gør det muligt for at en funktion skal have "private" variabler.

Tælleren er beskyttet af omfanget af den anonyme funktion, og kan kun ændres ved hjælp af tilføjelsesfunktionen.

En lukning er en funktion, der har adgang til det overordnede omfang, selv efter at den overordnede funktion er lukket.