JavaScript-Funktionsabschlüsse

Inhaltsverzeichnis

JavaScript-Variablen können zum lokalen gehören oder globaler Geltungsbereich.

Globale Variablen können mit Verschlüssen lokal (privat) gemacht werden.

Globale Variablen

Eine Funktion kann auf alle Variablen zugreifen, die innerhalb der Funktion definiert sind, wie folgt:

Beispiel

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

Probieren Sie es selbst aus →

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

Aber eine Funktion kann auch auf Variablen zugreifen, die außerhalb der Funktion definiert sind, wie folgt:

Beispiel

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

Probieren Sie es selbst aus →

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

Im letzten Beispiel ist a ein global Variable.

Auf einer Webseite gehören globale Variablen zur Seite.

Globale Variablen können von allen anderen Skripten auf der Seite verwendet (und geändert) werden.

Im ersten Beispiel ist a ein local Variable.

Eine lokale Variable kann nur innerhalb der Funktion verwendet werden, in der sie definiert ist. Es ist vor anderen Funktionen und anderem Skriptcode verborgen.

Global und lokale Variablen mit demselben Namen sind verschiedene Variablen. Durch die Änderung des einen wird das andere nicht geändert.

Notiz

Variablen, die ohne ein Deklarationsschlüsselwort erstellt wurden (var, let oder const) sind immer global, auch wenn sie innerhalb einer Funktion erstellt werden.

Beispiel

function myFunction() {
  a = 4;
}

Probieren Sie es selbst aus →

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

Variable Lebensdauer

Globale Variablen bleiben bestehen, bis die Seite verworfen wird, z. B. wenn Sie navigieren Wechseln Sie zu einer anderen Seite oder schließen Sie das Fenster.

Lokal Variablen haben eine kurze Lebensdauer. Sie werden erstellt, wenn die Funktion ausgeführt wird aufgerufen und gelöscht, wenn die Funktion beendet ist.

Ein Gegendilemma

Angenommen, Sie möchten eine Variable zum Zählen verwenden und möchten dies tun Zähler für alle Funktionen verfügbar zu machen.

Sie könnten eine globale Variable und eine Funktion verwenden, um den Zähler zu erhöhen:

Beispiel

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

Probieren Sie es selbst aus →

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

Bei der oben genannten Lösung gibt es ein Problem: Jeder Code auf der Seite kann den Zähler ändern, ohne Aufruf von add().

Der Zähler sollte lokal für die Funktion add() sein, um zu verhindern, dass sich anderer Code ändert Es:

Beispiel

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

Probieren Sie es selbst aus →

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

Es hat nicht funktioniert, weil wir den globalen Zähler anstelle des lokalen anzeigen Schalter.

Wir können den globalen Zähler entfernen und auf den lokalen Zähler zugreifen, indem wir ihn zulassen Funktion gibt es zurück:

Beispiel

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

Probieren Sie es selbst aus →

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

Es hat nicht funktioniert, da wir bei jedem Aufruf den lokalen Zähler zurückgesetzt haben Funktion.

Eine innere JavaScript-Funktion kann dieses Problem lösen.

Verschachtelte JavaScript-Funktionen

Alle Funktionen haben Zugriff auf den globalen Geltungsbereich.

Tatsächlich haben in JavaScript alle Funktionen Zugriff auf den Bereich „über“ ihnen.

JavaScript unterstützt verschachtelte Funktionen. Verschachtelte Funktionen haben Zugriff auf Umfang „über“ ihnen.

In diesem Beispiel hat die innere Funktion plus() Zugriff zur Variablen counter in der übergeordneten Funktion:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

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

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

<script>
document.getElementById("demo").innerHTML = add();
function add() {
  let counter = 0;
  function plus() {counter += 1;}
  plus();  
  return counter; 
}
</script>

</body>
</html>

Dies hätte das Zählerdilemma lösen können, wenn wir das plus() erreichen könnten Funktion von außen.

Wir müssen auch eine Möglichkeit finden, counter=0 nur einmal auszuführen.

Wir brauchen eine Schließung.

JavaScript-Verschlüsse

Erinnern Sie sich an selbstaufrufende Funktionen? Was macht diese Funktion?

Beispiel

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

// the counter is now 3

Probieren Sie es selbst aus →

<!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>
const add = (function () {
  let counter = 0;
  return function () {counter += 1; return counter;}
})();

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

</body>
</html>

Beispiel erklärt

Die Variable add wird dem Rückgabewert eines Selbstaufrufers zugewiesen Funktion.

Die selbstaufrufende Funktion wird nur einmal ausgeführt. Es setzt den Zähler auf Null (0), und gibt einen Funktionsausdruck zurück.

Auf diese Weise wird add zu einer Funktion. Das „Wunderbare“ daran ist, dass es darauf zugreifen kann der Zähler im übergeordneten Bereich.

Dies wird als JavaScript-Abschluss bezeichnet. Es macht es möglich damit eine Funktion „private“ Variablen hat.

Der Zähler ist durch den Umfang der anonymen Funktion geschützt. und kann nur über die Add-Funktion geändert werden.

Ein Abschluss ist eine Funktion, die Zugriff auf den übergeordneten Bereich hat, auch nachdem die übergeordnete Funktion geschlossen wurde.