Heim > Web-Frontend > js-Tutorial > Hauptteil

Beherrschen von Abschlüssen in JavaScript: Umfang, Kapselung und Leistung verstehen

Mary-Kate Olsen
Freigeben: 2024-10-22 15:20:18
Original
547 Leute haben es durchsucht

Mastering Closures in JavaScript: Understanding Scope, Encapsulation, and Performance

Schließung

Definition

Abschluss ist eine Funktion, die den Funktionen den Zugriff auf alle anderen Variablen und Funktionen ermöglicht, die auf gleicher Gültigkeitsebene (lexikalischer Gültigkeitsbereich) deklariert sind.

  • Abschluss ist eine Funktion, die den Funktionen den Zugriff auf alle anderen Variablen und Funktionen ermöglicht, die auf gleicher Gültigkeitsebene (lexikalischer Gültigkeitsbereich) deklariert sind.
  • Abschluss wird erstellt, wenn eine Funktion innerhalb einer anderen Funktion (äußere Funktion und innere Funktion) definiert wird. Die innere Funktion erstellt einen Abschluss, der allen in dieser äußeren Funktion erstellten Variablen und Funktionen Zugriff auf die innere Funktion bietet.
  • Abschlüsse ermöglichen der inneren Funktion den Zugriff auf in der äußeren Funktion deklarierte Variablen, auch nachdem die äußere Funktion zurückgekehrt ist.
  • Wir müssen mit dem Speicher richtig umgehen, das Schließen kann sowohl zu Speicherverlusten als auch zu einer besseren Speicherverwaltung führen.
  • Abschlüsse in JavaScript dienen einem ähnlichen Zweck wie private Methoden in Java, indem sie es Ihnen ermöglichen, private Variablen zu erstellen und Funktionalität zu kapseln.

    Beispiel

    function outerFunction() {
        let outerVariable = 'I am from outer scope';
    
        function innerFunction() {
            console.log(outerVariable); // Accessing outerVariable from the outer scope
        }
    
        return innerFunction; // Return the inner function
    }
    
    const closureFunction = outerFunction(); // Call outerFunction, which returns innerFunction
    closureFunction(); // Outputs: I am from outer scope
    
    Nach dem Login kopieren
    • Siehe im obigen Beispiel, dass wir die innere Funktion nur aufrufen, weil sie nur zurückgegeben wird. Obwohl wir Zugriff auf äußereVariable haben.
    • Sehen wir uns ein weiteres bestes Beispiel an
        function handleCount() {
        let count = 0;
    
        return {
            increment: () => {
                    count++;
                    return count;
            },
            decrement: () => {
                    count--;
                    return count;
            },
            getCount: () => {
                    return count;
            },
        };
    }
    
    const counter = handleCount();
    console.log(counter.increment()); // Outputs: 1
    console.log(counter.increment()); // Outputs: 2
    console.log(counter.getCount());  // Outputs: 2
    console.log(counter.decrement()); // Outputs: 1
    console.log(counter.getCount());  // Outputs: 1
    
    Nach dem Login kopieren
    • Jetzt wird für jedes Mal, wenn wir Inkrement, Dekrement, GetCount und nicht HandleCount aufrufen, nur die aufgerufene Funktion ausgeführt, aber wir haben auch Zugriff auf die Variablen außerhalb ihres Gültigkeitsbereichs. Dies wird als Abschluss bezeichnet.

Wichtige Punkte, die Sie sich merken sollten

  • Definition: Ein Abschluss ist eine Funktion, die den Zugriff auf ihren lexikalischen Bereich behält, auch wenn die Funktion außerhalb dieses Bereichs ausgeführt wird.
  • Scope Chain: Abschlüsse werden erstellt, wenn eine Funktion innerhalb einer anderen Funktion definiert wird. Die innere Funktion bildet einen Abschluss, der den Umfang der äußeren Funktion einschließt.
  • Zugriff auf Variablen: Abschlüsse ermöglichen der inneren Funktion den Zugriff auf Variablen, die in der äußeren Funktion deklariert wurden, auch nachdem die äußere Funktion zurückgekehrt ist.
  • Private Variablen: Abschlüsse werden häufig zum Erstellen privater Variablen verwendet. Dies bedeutet, dass Variablen aus dem globalen Bereich ausgeblendet werden können und nur über den Abschluss darauf zugegriffen werden kann.
  • Speicherverwaltung: Abschlüsse können zu einer besseren Speichereffizienz führen, da sie nur die Variablen behalten, die für die Ausführung benötigt werden.
  • Überlegungen zur Leistung: Schließungen sind zwar leistungsstark, können aber auch zu Speicherverlusten führen, wenn sie nicht richtig verwaltet werden, insbesondere bei langlebigen Objekten oder Ereignis-Listenern.

Anwendungsfälle

  • Kapselung: Zum Erstellen privater Daten oder Methoden.
  • Funktionsfabriken: Zum Erstellen von Funktionen mit voreingestellten Parametern.
  • Rückrufe: Für asynchrone Programmierung (wie in Event-Handlern oder setTimeout).
  • CSS: rem und em. rem wird vom Stammelement (html/body) abgeleitet, em jedoch von seinem nahen übergeordneten Element.

Häufige Fragen im Vorstellungsgespräch

  • Was ist ein Verschluss und wie funktioniert er?
  • Können Sie den Unterschied zwischen einem Verschluss und einer regulären Funktion erklären?
  • Geben Sie ein Beispiel für einen Abschluss in JavaScript an.
  • Was sind die Anwendungsfälle von Abschlüssen in JavaScript?
  • Wie können Schließungen zu Speicherverlusten führen und wie können Sie diese verhindern?

Das obige ist der detaillierte Inhalt vonBeherrschen von Abschlüssen in JavaScript: Umfang, Kapselung und Leistung verstehen. 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!