JavaScript-Abschlüsse verstehen: Variablen, Funktionen und Umfang.-js-Tutorial-php.cn

„Javascript-Abschlüsse sind ein grundlegendes Konzept in der Programmierung und ermöglichen es Funktionen, auf Variablen aus umgebenden Bereichen zuzugreifen und diese zu manipulieren.“ Diese leistungsstarke Technik ermöglicht Datenkapselung, Kontexterhaltung und effiziente Speicherverwaltung. Das Verständnis von Javascript-Abschlüssen ist für die Entwicklung robuster, skalierbarer und wartbarer Anwendungen von entscheidender Bedeutung. In diesem Artikel werden wir uns mit der Komplexität dieses Konzepts befassen und Variablen, Funktionen und Umfang untersuchen, um dieses wesentliche Javascript-Konzept zu beherrschen.“
Sehen wir uns nun an, was ein Abschluss in Javascript ist. Ich möchte dies auf drei Arten definieren: auf einfache und prägnante Weise, in einer technischen und detaillierten Definition und in einer konzeptionellen und analogen Definition.

Was ist ein Abschluss in JavaScript?

„Ein Abschluss ist ein oder mehrere Kanäle, über die eine Funktion innerhalb einer anderen Funktion Zugriff auf ihren eigenen Bereich und den Bereich ihrer äußeren Funktion(en) hat, selbst wenn die äußere(n) Funktion(en) zurückgekehrt ist(en).“

„Ein Abschluss kann auch als eigenständige Funktion bezeichnet werden, die einen Verweis auf den umgebenden lexikalischen Bereich aufrechterhält und es ihr ermöglicht, auf Variablen aus diesem Bereich zuzugreifen und diese zu manipulieren, selbst wenn die Funktion außerhalb ihres ursprünglichen Kontexts aufgerufen wird.“ .

„Ein Abschluss ist wie ein Raum mit Erinnerung.“ Wenn eine Funktion innerhalb einer anderen Funktion erstellt wird, erbt sie den Geltungsbereich der äußeren Funktion, ähnlich wie ein Raum die Merkmale des Gebäudes erbt, in dem er sich befindet. Selbst wenn die äußere Funktion „schließt“ (zurückkehrt), merkt sich die innere Funktion den äußeren Geltungsbereich und ermöglicht dies es, um auf seine Variablen und Funktionen zuzugreifen. Diese Definitionen heben verschiedene Aspekte des JavaScript-Abschlusses hervor.

Um die Definitionen zu untermauern oder das Thema besser zu verstehen, denken Sie an einen Abschluss wie diesen. Stellen Sie sich vor, Sie haben einen Spielzeugkistenbehälter, in dem Sie alle Ihre Lieblingsspielzeuge aufbewahren (der Spielzeugkistenbehälter ist unsere äußere Funktion). Stellen Sie sich nun vor, dass sich in dem Spielzeugbehälter (Außenfunktion) verschiedene Spielzeuge befinden, unter anderem Autos, Puppen und ein Roboter. (das sind Variablen oder andere Funktionen) Von diesen Spielzeugen gibt es ein besonderes Spielzeug (innere Funktion), nämlich den Roboter. Stellen Sie sich vor, der Roboter verfügt über einen Kanal über besondere Kräfte. Es kann alle anderen Spielzeuge in der Spielzeugkiste spielen oder verbinden, selbst wenn die Spielzeugkiste geschlossen ist. Stellen Sie sich vor, dieser besondere Kanal oder diese Kraft wäre ein Abschluss. Ich hoffe, dass du das verstehst. Sehen wir uns ein Beispiel eines Codes zur Veranschaulichung des Abschlusses an.

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

Nach dem Login kopieren

Im obigen Code handelt es sich bei displayDetails um die Funktion oder den Abschluss, oder noch besser, um einen Verweis auf die Abbildung vor dem Code. Die Funktion displayDetails nutzt die Fähigkeit des Abschlusses, um auf Variablen außerhalb ihres Gültigkeitsbereichs zuzugreifen. Hier ist das Ding. displayDetails wird innerhalb von Details definiert, es greift vom äußeren Bereich auf surName und lastName zu und behält diesen Zugriff auch außerhalb seines Bereichs bei. Oder anders ausgedrückt: „Details“ erstellen einen Bereich mit „surName“ und „lastName“, „displayDetails“ greift auf diesen Bereich zu, „displayDetail“ gibt einen String mit „surName“ und „lastName“ zurück und „details“ gibt das Ergebnis von „displayDetails“ zurück. console.log(details()); ruft displayDetails auf und greift auf Variablen außerhalb des Gültigkeitsbereichs zu.
Die Ausgabe dieses Codes ist „Hey John Mercy, du wurdest registriert“
Das Ergebnis wird unten angezeigt

Understanding JavaScript closures: variables, functions, and scope.

Da Sie nun die Schließung verstanden haben, wollen wir uns die Vorteile der Schließung beim Schreiben von Javascript-Code ansehen.

Variablen in Abschlüssen

Lokale Variablen: Innerhalb der Funktion deklarierte Variablen, auf die nur innerhalb des Funktionsbereichs und nicht außerhalb des Bereichs zugegriffen werden kann.
Äußere Variablen: In einer äußeren Funktion deklarierte Variablen sind für die innere Funktion
Globale Variablen: Variablen, die außerhalb aller Funktionen deklariert sind und von überall aus zugänglich sind

Funktionen im Abschluss

Innere Funktionen: Dies sind Funktionen, die innerhalb einer anderen Funktion definiert sind und Zugriff auf den äußeren Bereich haben
Äußere Funktion: Diese Funktion definiert den Umfang für innere Funktionen
Funktionsausdrücke: Als Ausdrücke definierte Funktionen können als Abschlüsse verwendet werden

Umfang in Verschlüssen

Lexikalischer Geltungsbereich: Innere Funktionen haben Zugriff auf den äußeren Geltungsbereich.
Dynamisches Scoping: Der Bereich wird zur Laufzeit bestimmt (wird in Javascript nicht verwendet).

Was sind die Vorteile einer Schließung?

Daten verbergen: Daten vor externem Zugriff schützen Sehen wir uns im folgenden Codebeispiel einen Code an, der zeigt, wie diese Daten ausgeblendet werden

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

Nach dem Login kopieren

Im obigen Code akzeptiert die Funktion Person zwei Argumente: Name und Alter. Diese Funktion erstellt ein neues Personenobjekt. Innerhalb der Funktion werden zwei private Variablen deklariert: privateName und privateAge. Diesen Variablen werden die an die Personenfunktion übergebenen Werte (Name und Alter) zugewiesen. Diese Variablen sind privat, da sie mit let deklariert werden und außerhalb der Person-Funktion nicht direkt zugänglich sind. Die Rückgabeobjekte werden ebenfalls mit drei Methoden erstellt. Diese drei Methoden bieten kontrollierten Zugriff auf private Variablen. Daher erstellt die Person-Funktion einen Abschluss, der dem zurückgegebenen Objekt den Zugriff auf private Variablen ermöglicht. Außerdem sind die privaten Variablen vor externem Zugriff verborgen, um den Datenschutz zu gewährleisten.

Kapselungen: Bündelung von Daten und Methoden
Kontexterhaltung: Beibehaltung des Kontexts in asynchronen Aufrufen.

Häufige Anwendungsfälle der Schließung

Ereignis-Listener oder Ereignisbehandlung: Beibehaltung des Ereigniskontexts. Hier ist ein einfacher Code zur Ereignisbehandlung

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

Nach dem Login kopieren

Hier ist, was im Code passiert ist. Wir definieren eine Funktion createClickCounter, die eine andere Funktion zurückgibt. Innerhalb von createClickCounter deklarieren wir eine Variable clickCounter, die auf 0 initialisiert ist.
Die zurückgegebene Funktion erhöht clickCounter und aktualisiert den Textinhalt von clickCounterElement. Wir rufen createClickCounter() auf, um einen Abschluss zu erstellen und ihn der Zählervariablen zuzuweisen. Wir hängen die Zählerfunktion mit addEventListener.

an das Klickereignis der Schaltfläche an

Die Zählerfunktion ist ein Abschluss, da sie Zugriff auf ihren eigenen Bereich hat, Zugriff auf den Bereich der äußeren Funktion hat (createClickCounter()) und den Status von clickCounter zwischen Funktionsaufrufen beibehält.

Rückruffunktionen: Beibehalten des Kontexts bei asynchronen Aufrufen.
Private Module: Erstellen privater Variablen und Funktionen

Abschluss

JavaScript-Abschlüsse ermöglichen es Entwicklern, effizienten, modularen und sicheren Code zu schreiben. Durch die Beherrschung von Variablen, Funktionen und Umfang können Entwickler das volle Potenzial von Abschlüssen ausschöpfen. Abschlüsse ermöglichen die Kapselung von Daten, die Erhaltung des Zustands und private Variablen und erhöhen so die Qualität und Wartbarkeit des Codes. Mit diesem grundlegenden Verständnis können Entwickler komplexe Javascript-Herausforderungen mit Zuversicht angehen. Der effektive Einsatz von Abschlüssen ist für skalierbare, robuste und effiziente JavaScript-Anwendungen unerlässlich.

Das obige ist der detaillierte Inhalt vonJavaScript-Abschlüsse verstehen: Variablen, Funktionen und Umfang.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!