JavaScript-Closures erklärt
1. Was ist ein Abschluss?Eine Kombination aus der Funktion selbst und dem Zustand der Umgebung, in der die Funktion deklariert wird.
1.2 Memoisierung von Closures: Funktionen merken sich die Umgebung, in der sie definiert wurden
1.3 Closure-Phänomen: Jedes Mal, wenn in JS eine Funktion erstellt wird, wird ein Closure erstellt
2. Funktionen von Closures: Auswendiglernen, Simulation privater Variablen2.1 Speicher
Beispiel:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<Skript>
Funktion erstelleCheckTemp(standardTemp){
Funktion checkTemp(n){
wenn(n<=standardTemp){
alert('Ihre Temperatur ist normal');
}anders{
alert('Ihre Körpertemperatur ist hoch');
}
}
gib checkTemp zurück;
}
var checkTemp_A = createCheckTemp(37.1);
var checkTemp_B = createCheckTemp(37.3);
checkTemp_A(37.2);
checkTemp_A(37.0);
checkTemp_B(37.2);
checkTemp_B(37.0);
</Skript>
</body>
</html>Detail: 1: Erinnerung an Schließungen 2: Die Funktion return checkTemp ist ein Funktionsname 3: Definieren Sie var checkTemp_A und checkTemp_A, um den Funktionsnamen checkTemp zu erhalten, anstatt ihn direkt aufzurufen 2.2 Simulation privater Variablen (sichere Variablen)
Beispiel für einen Closure-Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<Skript>
// Kapsele eine Funktion ein, die Funktion dieser Funktion besteht darin, die Variable function fun(){ zu privatisieren.
//Definiere eine lokale Variable a
var a = 0;
zurückkehren {
getA:Funktion(){
gib a zurück;
},
hinzufügen:Funktion(){
eine ++;
},
pow:Funktion(){
ein*=2;
}
}
}
var obj = spaß();
// Wenn Sie die Variable a außerhalb der Fun-Funktion verwenden möchten, besteht die einzige Möglichkeit darin, die Methode getA() aufzurufen console.log(obj.getA());
//Möchte 1 zur Variable a hinzufügen obj.add();
obj.add();
obj.add();
console.log(obj.getA());
obj.pow();
console.log(obj.getA());
</Skript>
</body>
</html>
Tatsächlich ist es verständlich, dass JavaScript Funktionstypen wie C++ und Java, wie etwa int sum(), int add(), int pow() usw., nicht definieren kann. Daher ist es notwendig, die Eigenschaften von Closures zu nutzen: das heißt, den Speicher des Closure innerhalb der Funktion zu verwenden, um mit den Variablen innerhalb der Funktion zu arbeiten, und dann den Namen der Closure-Funktion zurückzugeben, um interne Datenoperationen auszuführen. 3.IIFE (Sofort aufgerufener Funktionsausdruck):Sobald eine JS-Sonderfunktion definiert ist, wird sie sofort aufgerufen
3.1 IIFE-Rolle 1 – Zuweisen von Werten zu VariablenBeispiel: Vergleichen Sie die Vorher- und Nachher-Bilder, um den Programmierstand widerzuspiegeln. . . Vereinfachen Sie den Code. . Schön. . .
3.2 IIFE-Funktion 2 – Konvertieren globaler Variablen in lokale Variablen
In diesem Fall sind die Ergebnisse der folgenden fünf Anweisungen alle 5, da es in JS kein Konzept des Blockbereichs gibt (das ist das aktuelle Verständnis), sodass var i zu einer globalen Variable wird und i=5 nach der for-Schleife. Das Ergebnis aller fünf Aussagen ist also 5. Dann können wir zur Lösung dieses Problems IIFE verwenden, das im Wesentlichen die Abschlussfunktion der Funktion nutzt.
Durch Übergeben der globalen Variable i an die IIFE-Funktion wird die globale Variable zu einer lokalen Variable. Durch Verwendung der Closure-Funktion der JS-Funktion kann die Funktion von arr[2]() in der Abbildung implementiert werden. ZusammenfassenDieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können! Das könnte Sie auch interessieren:
|
<<: CSS fixiert das Tag auf Containerebene (div...) an einer Position (ganz rechts auf der Seite)
>>: Einführung in den CSS BEM-Benennungsstandard (empfohlen)
Artikel empfehlen
Sechs Methoden zur Nginx-Optimierung
1. Optimieren Sie die Nginx-Parallelität [root@pr...
Beispielcode zum Erzielen eines kleinen Dreiecksrahmeneffekts mit reinem CSS3+DIV
Der spezifische Code lautet wie folgt: Der HTML-C...
Eine kurze Diskussion zum Verständnis von TypeScript-Indexsignaturen
Inhaltsverzeichnis 1. Was ist eine Indexsignatur?...
CSS zum Ändern der Größe (Breite, Höhe) des Bildes, wenn die Maus über den Bild-Hyperlink fährt
So ändern Sie den Bild-Hyperlink, wenn Sie mit der...
Lösung für das Problem des Sitzungsfehlers, der durch den Nginx-Reverse-Proxy verursacht wird
Ein Kollege bat um Hilfe: Die Anmeldung beim Back...
Einführung in die MySQL-Datenbank: Detaillierte Erläuterung des Datenbanksicherungsvorgangs
Inhaltsverzeichnis 1. Einzelne Datenbanksicherung...
So verwenden Sie das Flex-Layout, um ein Scrollen des festen Inhaltsbereichs im Kopf zu erreichen
Das feste Layout des Seitenkopfes wurde zuvor mit...
Beispiele für den Import und Export von MySQL-Tabellendaten
Dieser Artikel beschreibt die Import- und Exportv...
Beispiel für die Konfiguration von nginx zur Implementierung von SSL
Umgebungsbeschreibung Serversystem: Ubuntu 18.04 ...
Techniken zur Optimierung von MySQL-Paging-Abfragen
In Anwendungen mit Paging-Abfragen sind Abfragen,...
Schritte zur Installation von GRUB auf einem Linux-Server
So installieren Sie GRUB für Linux Server Sie kön...
Einführung in die Verwendung von MySQL-Befehlen zum Erstellen, Löschen und Abfragen von Indizes
MySQL-Datenbanktabellen können Indizes erstellen,...
Natives JavaScript zum Erzielen von Folieneffekten
Wenn wir eine Seite erstellen, insbesondere eine ...
Zusammenfassung des MySQL-Installationsdiagramms
Grafisches Tutorial zur Installation und Konfigur...
Sequenzimplementierungsmethode basierend auf MySQL
Das Team ersetzte den neuen Rahmen. Alle neuen Un...