suchen
HeimWeb-Frontendjs-TutorialAusführliche Erklärung von Schließungen in Javascript_Grundkenntnisse

Vorwort: Dies ist immer noch ein Einführungsartikel. Es gibt mehrere sehr wichtige Sprachfunktionen in Javascript – Objekte, prototypische Vererbung und Abschlüsse. Unter anderem ist Closing eine neue Sprachfunktion für Programmierer, die die traditionelle statische Sprache C/C verwenden. Dieser Artikel beginnt mit Beispielen, um die Sprachfunktionen von Javascript-Verschlüssen vorzustellen, und kombiniert sie mit einigen ECMAScript-Sprachspezifikationen, um den Lesern ein tieferes Verständnis von Verschlüssen zu ermöglichen.

Hinweis: Bei diesem Artikel handelt es sich um einen Einführungsartikel. Wenn Sie ein Experte sind, können Sie gerne technische Vorschläge und Meinungen zu dem Artikel abgeben. In diesem Artikel geht es um Javascript. Ich möchte keinen Sprachvergleich durchführen. Wenn Sie mit Javascript nicht vertraut sind, machen Sie bitte einen Umweg.

Was ist Schließung?
Was ist eine Schließung? Schließung ist eine neue Funktion, die statische Sprachen nicht haben. Aber der Abschluss ist nicht allzu kompliziert, um ihn zu verstehen. Kurz gesagt, der Abschluss ist:

Ein Abschluss ist eine Sammlung lokaler Variablen einer Funktion, aber diese lokalen Variablen bleiben nach der Rückkehr der Funktion weiterhin bestehen.
Schließung bedeutet, dass der „Stapel“ einer Funktion nach der Rückkehr der Funktion nicht freigegeben wird. Wir können auch verstehen, dass diese Funktionsstapel nicht auf dem Stapel, sondern auf dem Heap zugewiesen werden
Beim Definieren einer anderen Funktion innerhalb einer Funktion wird ein Abschluss generiert
Die obige zweite Definition ist die erste ergänzende Erklärung, die das Subjekt, das Prädikat und das Objekt der ersten Definition extrahiert – der Abschluss ist die Menge der „lokalen Variablen“ der Funktion. Es ist lediglich so, dass nach der Rückkehr der Funktion auf diese lokale Variable zugegriffen werden kann. (Dies ist keine offizielle Definition, aber diese Definition sollte für Sie hilfreicher sein, um Schließungen zu verstehen)

Als lokale Variablen kann der Code innerhalb der Funktion auf sie zugreifen. Dies unterscheidet sich nicht von statischen Sprachen. Der Unterschied zu Abschlüssen besteht darin, dass Code außerhalb der Funktion weiterhin auf lokale Variablen zugreifen kann, nachdem die Funktionsausführung beendet ist. Das bedeutet, dass die Funktion eine „Referenz“ zurückgeben muss, die auf den Abschluss verweist, oder diese „Referenz“ einer externen Variablen zuweisen muss, um sicherzustellen, dass externer Code auf die lokalen Variablen im Abschluss zugreifen kann. Natürlich sollte die Entität, die diese Referenz enthält, ein Objekt sein, da in Javascript mit Ausnahme der Grundtypen alles andere ein Objekt ist. Leider stellt ECMAScript keine relevanten Mitglieder und Methoden für den Zugriff auf lokale Variablen in Abschlüssen bereit. Aber in ECMAScript kann die im Funktionsobjekt definierte innere Funktion (innere Funktion) direkt auf die lokalen Variablen der externen Funktion zugreifen. Durch diesen Mechanismus können wir den Zugriff auf den Abschluss auf folgende Weise vervollständigen.

Code kopieren Der Code lautet wie folgt:

Funktionsbegrüßung (Name) {
var text = 'Hallo' name; // lokale Variable
// Bei jedem Aufruf wird ein Abschluss generiert und das interne Funktionsobjekt an den Aufrufer zurückgegeben
Rückgabefunktion() { Alert(text); }
var sayHello=greeting("Closure");
sayHello() // Auf die lokale Variable text
wird durch den Abschluss zugegriffen

Das Ausführungsergebnis des obigen Codes lautet: Hallo Abschluss, da die Funktion sayHello() nach Ausführung der Begrüßungsfunktion weiterhin auf den darin definierten lokalen Variablentext zugreifen kann.

Okay, das ist der legendäre Effekt von Verschlüssen. Es gibt verschiedene Anwendungsszenarien und -modi in Javascript, wie z. B. Singleton, Power Constructor und andere Javascript-Modi, die untrennbar mit der Verwendung von Verschlüssen verbunden sind.

ECMAScript-Abschlussmodell
Wie implementiert ECMAScript Verschlüsse? Wer mehr erfahren möchte, kann sich die ECMAScript-Spezifikation zur Recherche besorgen. Ich gebe hier nur eine einfache Erklärung, auch der Inhalt stammt aus dem Internet.

Wenn die Funktion des ECMAscript-Skripts ausgeführt wird, verfügt jede Funktionszuordnung über eine Ausführungskontextszene (Ausführungskontextszene). Diese Ausführungskontextszene enthält drei Teile

Die Lexikalische Umgebung
Die VariableEnvironment
diese Bindung
Der dritte Punkt, diese Bindung, hat nichts mit Schließungen zu tun und wird in diesem Artikel nicht behandelt. Die Grammatikumgebung wird zum Parsen von Variablenbezeichnern verwendet, die während der Funktionsausführung verwendet werden. Wir können uns die Grammatikumgebung als ein Objekt vorstellen, das zwei wichtige Komponenten enthält: Umgebungsdatensatz (Enviroment Recode) und externe Referenz (Zeiger). Der Umgebungsdatensatz enthält lokale Variablen und Parametervariablen, die innerhalb der Funktion deklariert wurden, und externe Referenzen verweisen auf das Kontextausführungsszenario des externen Funktionsobjekts. Der Wert dieser Referenz in der globalen Kontextszene ist NULL. Eine solche Datenstruktur bildet eine einseitig verknüpfte Liste, wobei jede Referenz auf die äußere Kontextszene verweist.

Zum Beispiel sollte das Abschlussmodell unseres obigen Beispiels so aussehen: Die Funktion sayHello befindet sich auf der unteren Ebene, die obere Ebene ist die Begrüßungsfunktion und die äußerste Ebene ist die globale Szene. Wie unten gezeigt: Wenn sayHello aufgerufen wird, findet sayHello den Wert des lokalen Variablentextes über die Kontextszene, sodass im Dialogfeld auf dem Bildschirm die Funktion der Variablenumgebung (VariableEnvironment) angezeigt wird. und die Grammatikumgebung sind grundsätzlich ähnlich. Einzelheiten zu den spezifischen Unterschieden finden Sie im ECMAScript-Spezifikationsdokument.

Beispielsequenz von Verschlüssen
Zuvor habe ich ungefähr verstanden, was Javascript-Abschlüsse sind und wie Abschlüsse in Javascript implementiert werden. Im Folgenden helfen wir Ihnen, Schließungen anhand einiger Beispiele besser zu verstehen. Die folgenden Beispiele stammen von JavaScript-Verschlüssen für Dummies (Spiegel). Beispiel 1: Lokale Variablen in Abschlüssen sind Referenzen und keine Kopien

Code kopieren Der Code lautet wie folgt:

Funktion say667() {
// Lokale Variable, die innerhalb des Abschlusses landet
var num = 666;
var sayAlert = function() { alarm(num); num ;
Geben Sie sayAlert;
zurück }

var sayAlert = say667();
sayAlert()

Das Ausführungsergebnis sollte also 667 statt 666 sein.

Beispiel 2: Mehrere Funktionen binden denselben Abschluss, da sie in derselben Funktion definiert sind.

Code kopieren Der Code lautet wie folgt:
Funktion setupSomeGlobals() {
// Lokale Variable, die innerhalb des Abschlusses landet
var num = 666;
// Einige Referenzen auf Funktionen als globale Variablen speichern
gAlertNumber = function() { alarm(num); gIncreaseNumber = function() { num ; gSetNumber = function(x) { num = x; }
setupSomeGlobals(); // Werte zu drei globalen Variablen zuweisen
gAlertNumber(); //666
gIncreaseNumber();
gAlertNumber(); // 667
gSetNumber(12);//
gAlertNumber();//12



Beispiel 3: Beim Zuweisen von Funktionen in einer Schleife werden diese Funktionen an denselben Abschluss gebunden

Code kopieren

Der Code lautet wie folgt: Funktion buildList(list) { var result = [];
for (var i = 0; i         var item = 'item' list[i];
result.push( function() {alert(item ' ' list[i])} );
}
Ergebnis zurückgeben;
}
Funktion testList() {
var fnlist = buildList([1,2,3]);
// j nur verwenden, um Verwirrung zu vermeiden – könnte i verwenden
for (var j = 0; j             fnlist[j]();
}
}

Das Ausführungsergebnis von testList besteht darin, dass das undefinierte Fenster item3 dreimal angezeigt wird, da diese drei Funktionen an denselben Abschluss gebunden sind und der Wert von item das zuletzt berechnete Ergebnis ist. Wenn ich jedoch aus der Schleife springe, Der Wert von i ist 4, also list Das Ergebnis von [4] ist undefiniert.

Beispiel 4: Alle lokalen Variablen der äußeren Funktion liegen innerhalb des Abschlusses, auch wenn diese Variable nach der Definition der inneren Funktion deklariert wird.

Code kopieren Der Code lautet wie folgt:

Funktion sayAlice() {
var sayAlert = function() { alarm(alice); // Lokale Variable, die innerhalb des Abschlusses landet
var alice = 'Hallo Alice';
Geben Sie sayAlert;
zurück }
var helloAlice=sayAlice();
halloAlice();

Das Ausführungsergebnis ist ein Popup-Fenster mit der Aufschrift „Hallo Alice“. Auch wenn die lokale Variable nach der Funktion sayAlert deklariert wird, kann weiterhin auf die lokale Variable zugegriffen werden.

Beispiel 5: Erstellen Sie bei jedem Aufruf der Funktion einen neuen Abschluss

Code kopieren Der Code lautet wie folgt:
Funktion newClosure(someNum, someRef) {
// Lokale Variablen, die innerhalb des Abschlusses landen
var num = someNum;
var anArray = [1,2,3];
var ref = someRef;
Rückgabefunktion(x) {
         num = x;
        anArray.push(num);
alarm('num: ' num
          'nanArray ' anArray.toString()
          'nref.someVar ' ref.someVar);
}
}
close1=newClosure(40,{someVar:'closure 1'});
close2=newClosure(1000,{someVar:'closure 2'});

Schließung1(5); // num:45 anArray[1,2,3,45] ref:'someVar Schließung1'
Schließung2(-10);// num:990 anArray[1,2,3,990] ref:'someVar Schließung2'

Antrag auf Schließung

Singleton:

Code kopieren Der Code lautet wie folgt:
var singleton = function () {
var privateVariable;
Funktion privateFunction(x) {
           ...privateVariable...
}

Geben Sie {
zurück          firstMethod: Funktion (a, b) {
                  ...privateVariable...
},
secondMethod: Funktion (c) {
                  ...privateFunction()...
}
};
}();

Dieser Singleton wird durch Schließungen implementiert. Die Kapselung privater Mitglieder und Methoden wird durch Abschlüsse vervollständigt. Die anonyme Hauptfunktion gibt ein Objekt zurück. Das Objekt enthält zwei Methoden: Methode 1 kann auf private Variablen zugreifen und Methode 2 kann auf interne private Funktionen zugreifen. Was Aufmerksamkeit erfordert, ist das „()“ am Ende der anonymen Hauptfunktion. Ohne dieses „()“ kann der Singleton nicht generiert werden. Denn anonyme Funktionen können nur ein eindeutiges Objekt zurückgeben und nicht von anderen Orten aus aufgerufen werden. So verwenden Sie Verschlüsse, um Singletons zu generieren.


Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Jenseits des Browsers: JavaScript in der realen WeltJenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AM

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen

So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten

JavaScript: Erforschung der Vielseitigkeit einer WebspracheJavaScript: Erforschung der Vielseitigkeit einer WebspracheApr 11, 2025 am 12:01 AM

JavaScript ist die Kernsprache der modernen Webentwicklung und wird für seine Vielfalt und Flexibilität häufig verwendet. 1) Front-End-Entwicklung: Erstellen Sie dynamische Webseiten und einseitige Anwendungen durch DOM-Operationen und moderne Rahmenbedingungen (wie React, Vue.js, Angular). 2) Serverseitige Entwicklung: Node.js verwendet ein nicht blockierendes E/A-Modell, um hohe Parallelitäts- und Echtzeitanwendungen zu verarbeiten. 3) Entwicklung von Mobil- und Desktop-Anwendungen: Die plattformübergreifende Entwicklung wird durch reaktnative und elektronen zur Verbesserung der Entwicklungseffizienz realisiert.

Die Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenDie Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenApr 10, 2025 am 09:33 AM

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Entmystifizieren JavaScript: Was es tut und warum es wichtig istEntmystifizieren JavaScript: Was es tut und warum es wichtig istApr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Ist Python oder JavaScript besser?Ist Python oder JavaScript besser?Apr 06, 2025 am 12:14 AM

Python eignet sich besser für Datenwissenschaft und maschinelles Lernen, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python ist bekannt für seine prägnante Syntax- und Rich -Bibliotheks -Ökosystems und ist für die Datenanalyse und die Webentwicklung geeignet. 2. JavaScript ist der Kern der Front-End-Entwicklung. Node.js unterstützt die serverseitige Programmierung und eignet sich für die Entwicklung der Vollstapel.

Wie installiere ich JavaScript?Wie installiere ich JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript erfordert keine Installation, da es bereits in moderne Browser integriert ist. Sie benötigen nur einen Texteditor und einen Browser, um loszulegen. 1) Führen Sie sie in der Browser -Umgebung durch, indem Sie die HTML -Datei durch Tags einbetten. 2) Führen Sie die JavaScript -Datei nach dem Herunterladen und Installieren von node.js nach dem Herunterladen und Installieren der Befehlszeile aus.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen