Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript-Abschlüsse verstehen: Ein umfassender Leitfaden

Patricia Arquette
Freigeben: 2024-11-06 19:47:02
Original
468 Leute haben es durchsucht

Understanding JavaScript Closures: A Comprehensive Guide

JavaScript-Abschlüsse verstehen: Ein umfassender Leitfaden.

Was ist eine Schließung?

Ein Abschluss ist ein grundlegendes JavaScript-Konzept, bei dem eine innere Funktion Zugriff auf Variablen und Parameter ihrer äußeren (umschließenden) Funktion hat, auch nachdem die Ausführung der äußeren Funktion abgeschlossen ist. Einfacher ausgedrückt ermöglicht ein Abschluss einer Funktion, sich Variablen aus ihrem äußeren Bereich zu „merken“ und darauf zuzugreifen, selbst wenn die Funktion in einem anderen Bereich ausgeführt wird.

Die drei Bereiche eines Abschlusses

Jeder Abschluss in JavaScript hat Zugriff auf drei Bereiche:

  • Sein eigener Bereich (in der Funktion definierte Variablen)
  • Variablen der äußeren Funktion (Variablen der übergeordneten Funktion)
  • Globale Variablen (in der gesamten Anwendung verfügbare Variablen)

Lexikalisches Scoping: Die Grundlage

Lassen Sie uns den lexikalischen Geltungsbereich anhand eines einfachen Beispiels verstehen:

function init() {
  var name = "Mozilla"; // local variable created by init
  function displayName() {
    // inner function
    console.log(name); // uses variable declared in parent function
  }
  displayName();
}
init();
Nach dem Login kopieren

In diesem Beispiel:

  • Die Funktion init() erstellt einen lokalen Variablennamen und eine innere Funktion displayName()
  • displayName() ist eine innere Funktion, die nur innerhalb von init()
  • existiert
  • displayName() hat keine eigenen lokalen Variablen
  • Aufgrund des lexikalischen Bereichs hat es Zugriff auf Variablen in seinem übergeordneten Bereich, einschließlich des Namens

Schließungen in Aktion verstehen

Sehen wir uns eine leicht modifizierte Version an, die den Abschluss demonstriert:

function makeFunc() {
  const name = "Mozilla";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();
Nach dem Login kopieren

Wichtige Punkte, die es zu verstehen gilt:

  • Das sieht ähnlich aus wie das vorherige Beispiel, aber es gibt einen entscheidenden Unterschied
  • Anstatt die innere Funktion sofort auszuführen, geben wir sie zurück
  • Auch wenn die Ausführung von makeFunc() abgeschlossen ist, hat myFunc immer noch Zugriff auf die Namensvariable
  • Dies ist möglich, weil die Funktion einen Verweis auf ihre lexikalische Umgebung beibehält

Praxisbeispiel: Funktionsfabrik

Hier ist ein praktischeres Beispiel, das die Kraft von Verschlüssen demonstriert:

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2));  // outputs 7
console.log(add10(2)); // outputs 12
Nach dem Login kopieren

Lassen Sie uns zusammenfassen, was passiert:

  • makeAdder ist eine Funktionsfabrik – sie erstellt benutzerdefinierte Funktionen
  • Jede von ihr erstellte Funktion merkt sich den Wert von x, der an makeAdder übergeben wurde
  • add5 und add10 sind beide Schließungen:

Sie haben dieselbe Funktionsdefinition
Aber sie haben unterschiedliche lexikalische Umgebungen
In der Umgebung von add5 ist x 5
In der Umgebung von add10 ist x 10

Warum Schließungen wichtig sind

Abschlüsse sind wirkungsvoll, weil sie Folgendes ermöglichen:

  1. Datenschutz: Variablen innerhalb des Verschlusses bleiben privat und können von außen nicht aufgerufen werden
  2. Zustandserhaltung: Sie können den Zustand zwischen Funktionsaufrufen aufrechterhalten
  3. Funktionsfabriken: Sie können spezielle Funktionen mit voreingestellten Parametern erstellen
  4. Modulmuster: Sie sind grundlegend für das Modulmuster in JavaScript

Abschluss

Das Verständnis von Abschlüssen ist für JavaScript-Entwickler von entscheidender Bedeutung, da sie in modernen JavaScript-Mustern, Frameworks und Bibliotheken häufig verwendet werden. Sie bieten eine Möglichkeit, private Variablen zu erstellen und den Status in der funktionalen Programmierung beizubehalten, während Ihr Code sauber und wartbar bleibt.

Denken Sie daran: Ein Abschluss ist nicht nur eine Funktion innerhalb einer anderen Funktion – es ist eine Funktion, die Zugriff auf Variablen in ihrem äußeren Bereich hat und diesen Zugriff auch dann beibehält, wenn die Ausführung der äußeren Funktion abgeschlossen ist.

Das obige ist der detaillierte Inhalt vonJavaScript-Abschlüsse verstehen: Ein umfassender Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!