JavaScript-Verschlüsse: Ein Leitfaden für Anfänger

Abschlüsse sind eine leistungsstarke und wichtige Funktion in JavaScript, mit der viele Anfänger zu kämpfen haben. Sie sind für einige der nützlichsten Funktionen von JavaScript verantwortlich, etwa das Speichern des Zustands über Funktionsaufrufe hinweg und das Erstellen privater Variablen. In diesem Blog wird versucht, Schließungen zu erklären, indem er sie in einfache Sprache herunterbricht und ihre Bedeutung zusammen mit praktischen Beispielen diskutiert.

? Was ist eine Schließung?

Wenn eine Funktion von einer anderen Funktion in JavaScript zurückgegeben wird, erbt sie den Umfang der übergeordneten Funktion. Dies bedeutet, dass die zurückgegebene Funktion auch dann auf Variablen zugreifen kann, die im Bereich der äußeren Funktion definiert sind, nachdem die äußere Funktion die Ausführung abgeschlossen hat. Ein Abschluss ist die Kombination einer Funktion und ihres umschließenden Umfangs.
Hier ist eine einfachere Definition:

• Ein Abschluss ist eine Funktion, die Variablen aus dem Gültigkeitsbereich der äußeren (umschließenden) Funktion „merkt“
.
Es ermöglicht der inneren Funktion, auf diese Variablen zuzugreifen, auch wenn die äußere Funktion nicht mehr ausgeführt wird.

? Wie Schließungen funktionieren: Ein Beispiel

? Beispiel ohne Abschluss

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

? Beispiel mit Abschluss

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

? Hauptmerkmale des Verschlusses

1. Persistenter Speicher
: Variablen im Gültigkeitsbereich der äußeren Funktion werden lange nach dem Beenden der äußeren Funktion „erinnert“.
2. Lexical Scoping
: Abschlüsse basieren darauf, wo die Funktion definiert ist, nicht darauf, wo sie ausgeführt wird.
3. Mehrere Instanzen
: Jede Abschlussinstanz speichert ihre eigene Kopie der äußeren Variablen.

? Beispiel mit mehreren Instanzen:

function counterFunction() {
    let count = 0;

    return function increment() {
        count++;
        return count;
    };
}

const counter1 = counterFunction();
const counter2 = counterFunction();

console.log("counter1 = " + counter1()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 2
console.log("counter2 = " + counter2()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 3
console.log("counter2 = " + counter2()); // Output: 2

Hier haben Zähler1 und Zähler2 jeweils ihre eigene separate Zählvariable.

? Praktische Verwendung von Verschlüssen

1️⃣ Datenschutz:
Abschlüsse können Variablen aus dem globalen Bereich ausblenden, sodass sie nur innerhalb einer bestimmten Funktion verfügbar sind.
? Beispiel:

function secretInfo() {
    let secret = "I love JavaScript";
    return {
        getSecret: function() {
            return secret;
        },
        setSecret: function(newSecret) {
            secret = newSecret;
        }
    };
}

const secretObject = secretInfo();
console.log(secretObject.getSecret()); // Output: I love JavaScript
secretObject.setSecret("I love Python too!");
console.log(secretObject.getSecret()); // Output: I love Python too!
secretObject.setSecret("I love PHP too!");
console.log(secretObject.getSecret()); // Output: I love PHP too!
// Attempting to Access secret Directly will not work
console.log(secretObject.secret); // Output: undefined

✍️ Wie dieser Kodex den Datenschutz darstellt:

Globaler Bereichsschutz: Auf das Variablengeheimnis kann nicht direkt vom globalen Bereich oder einem anderen Teil des Codes aus zugegriffen werden. Wenn Sie beispielsweise console.log(secretObject.secret) ausprobieren, wird undefiniert zurückgegeben.
Private State Maintenance: Das Variablengeheimnis des Verschlusses ist privat und kann nur mit den Methoden getSecret und setSecret gelesen oder geändert werden.
Kontrollierter Zugriff: Das Programm gewährleistet einen eingeschränkten Zugriff auf die geheime Variable, indem es die Funktionen getSecret und setSecret definiert.

2️⃣ Funktionsfabriken: Eine Funktionsfabrik
ist eine Funktion, die neue Funktionen generiert und zurückgibt. Es ermöglicht uns, kundenspezifische Funktionen basierend auf Eingabeparametern dynamisch zu erstellen.
? Beispiel:

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

✍️ Wie dieser Code Funktionsfabriken darstellt:

1. Die Berechnungsfunktion funktioniert wie eine Fabrik und erzeugt spezielle Multiplikatorfunktionen (doppelt, dreifach) basierend auf der Eingabe (Faktor).
2. Jede Funktion ist einzigartig und unabhängig und verfügt über dieselbe Kernlogik.

3️⃣ Ereignis-Listener: Abschlüsse werden häufig in Rückrufen und Ereignis-Listenern verwendet, um den Zustand aufrechtzuerhalten.
? Beispiel:

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

✍️ Wie dieser Code zeigt, wie Schließungen in Ereignis-Listenern funktionieren:

1. Die setupListener-Funktion erstellt einen Abschluss und definiert die darin enthaltene clickCount-Variable.
2. Die Ereignis-Listener-Funktion, bei der es sich um einen Rückruf handelt, erhält Zugriff auf clickCount, auch nachdem die Ausführung der setupListener-Methode abgeschlossen ist.
3. Jedes Mal, wenn auf die Schaltfläche mit der ID „myButton“ geklickt wird, erhöht der Rückruf des Ereignis-Listeners clickCount und protokolliert den aktualisierten Wert.

? Abschluss

Abschlüsse sind eine Grundidee in JavaScript, die es Entwicklern ermöglicht, modulareren, effizienteren und privateren Code zu erstellen. Das Verständnis von Abschlüssen gibt Ihnen die Möglichkeit, dynamische Funktionen zu schreiben, einen persistenten Zustand aufrechtzuerhalten und eine Datenkapselung zu erreichen.

Nehmen Sie sich als Anfänger Zeit zum Üben und Experimentieren mit Verschlüssen. Sie mögen auf den ersten Blick schwierig erscheinen, aber anhand praktischer Beispiele und ihrer Verwendung werden Sie schnell ihre unglaubliche Stärke und Vielseitigkeit in der JavaScript-Programmierung erkennen.

Gibt es Analogien oder Beispiele aus dem wirklichen Leben, die Ihnen beim Erlernen von Abschlüssen geholfen haben? Teilen Sie sie im Kommentarbereich unten!
Viel Spaß beim Codieren! ✨

Das obige ist der detaillierte Inhalt vonJavaScript-Verschlüsse: Ein Leitfaden für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!