Details zur Funktionsverschachtelung und zu Funktionsabschlüssen in js

Vorwort:

Heute werde ich mit Ihnen über mein Verständnis von Closures sprechen. Bevor wir dieses Problem diskutieren, wollen wir zunächst den Definitionsbereich der Variablen verstehen.
In js umfassen die Gültigkeitsbereiche von Variablendefinitionen den globalen und den lokalen Gültigkeitsbereich. Das neue Schlüsselwort zur Variablendeklaration in es6 wird eingeführt, um die Verwirrung einiger Variablenbereiche zu beseitigen. Auf den globalen Geltungsbereich wird hier nicht eingegangen. Sprechen Sie hauptsächlich über den Funktionsumfang.

1. Geltungsbereich

Einfach ausgedrückt ist der Gültigkeitsbereich einer Funktion der Raum innerhalb der geschweiften Klammern der Funktion. Sehen wir uns zunächst zwei Beispiele an, die Ihnen helfen können, dieses Konzept besser zu verstehen.

Funktion f1(){
  sei n = 999
  console.log(n)
}
f1() // 999

Funktion f2(){
  sei n = 999
}
alert(n); // Fehlermeldung

2. Funktionsrückgabewert

Bevor ich über Closures spreche, muss ich über Funktionsrückgabewerte sprechen. Über den Rückgabewert der Funktion verfügte der Redakteur erst zu Beginn des Jahres über ein tieferes Verständnis. Eine Funktion ohne Rückgabewert gibt nach der Ausführung undefined zurück, und eine Funktion mit Rückgabewert erhält nach der Ausführung den entsprechenden Rückgabewert. Genau wie dies

// Funktion ohne Rückgabewert function f1(){
  Alarm(666)
}
console.log(f1()) // Nachdem das Popup-Fenster angezeigt wird, geben Sie undefined in der Konsole aus

// Es gibt eine Rückgabewertfunktion f2(){
  Alarm(666)
  Rückkehr 'über'
}
console.log(f2()) // Nachdem das Popup-Fenster erscheint, Ausgabe in der Konsole. Natürlich können Sie eine Zeichenfolge, einen Bealon oder eine Funktion zurückgeben.

3. Verschachtelung von Funktionen

In „Refactoring – Verbesserung des Designs von vorhandenem Code“ wird vorgeschlagen, dass die js-Syntax das Verschachteln von Funktionen in Funktionen ermöglicht, dies jedoch nicht alle Programmiersprachen können. Die sogenannte Code-Verschachtelung bedeutet, dass sich innerhalb einer Funktion eine Funktionsdeklaration befindet.

So was:

Funktion outer(){
  lass name = "lilei"
  Funktion inner(){
    console.log(Name)
  }
}  

4. Abschluss

Das Problem des lokalen Variablenbereichs in js wurde bereits erläutert. In tatsächlichen Projekten ist es notwendig, von außerhalb der Funktion auf die Variablen innerhalb der Funktion zuzugreifen. Zu diesem Zeitpunkt sollte das Problem des lokalen Variablenbereichs angegangen werden. Es scheint unmöglich, aber das Aufkommen von Verschlüssen löst dieses Problem.

Funktion outer(){
  let name = "lilei"
  Funktion inner(){
    Rückgabename
  }
  Rückkehr innen
}

Das Obige ist eine typische Abschlussfunktion. Wenn wir diese Abschlussfunktion verwenden, können wir Folgendes tun:

sei g = äußere()
console.log(g()) // lilei

Bisher wurde der Zugriff auf lokale Variablen innerhalb globaler Funktionen gelöst. Aber auf dem Heimweg dachte ich darüber nach, ob ich diese Probleme vermeiden kann, wenn ich diese Funktion erreiche. Ich kann die Anforderungen auch durch eine solche Funktion erfüllen.

Funktion outer(){
  let name = "lilei"
  Rückgabename
}

console.log(äußere()) // lilei  

Tatsächlich ist der obige Code derselbe wie der, der durch Closure an die Konsole ausgegeben wird. Warum also Closure einführen? Ich habe fast eine Woche gebraucht, um das herauszufinden. Es ist wie Variable->Funktion->Klasse. Jede Stufe nach oben ist ein schrittweiser Verbesserungsprozess. Mehr Logik kann durch Funktionen implementiert werden, wie z. B. Datenverarbeitung, was allein durch Variablen nicht erreicht werden kann.

5. Praktische Anwendung von Verschlüssen

Der Herausgeber hat oben Closures vorgestellt. Welche Anwendungen haben sie also in tatsächlichen Projekten? Schauen wir uns zunächst den folgenden Code an:

1. Interne Variablennamen ausblenden und Funktionsausführung pausieren

Funktion outer() {
    lass name = 1
    Funktion inner() {
        Rückgabename ++
    }
    Rückkehr innen
}
sei g = äußere()
console.log(g()) // 2
console.log(g()) // 3
console.log(g()) // 4
console.log(g()) // 5

2. Die Funktion setTimeout übergibt Parameter

Der Standardwert für setTimeout ist dieser:

Ich habe das auch schon einmal probiert.

Funktion f1(p) {
    konsole.log(p)
}
setTimeout(f1(666),3000) // Keine Verzögerung, gebe 666 direkt aus

Wenn Sie Parameter durch Verzögerung an eine Funktion übergeben möchten, wird die Rolle des Abschlusses deutlich.

Funktion f1(a) {
    Funktion f2() {
        konsole.log(a);
    }
    Rückgabe f2;
}
var Spaß = f1(1);
setTimeout(fun,1000); // drucke 1 nach einer Sekunde aus

3. Rückruf

Definieren Sie ein Verhalten und verknüpfen Sie es mit einem Benutzerereignis (Klick oder Tastendruck). Code wird üblicherweise als Callback (eine Funktion, die aufgerufen wird, wenn das Ereignis ausgelöst wird) an ein Ereignis gebunden. Wie der folgende Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Test</title>
</Kopf>
<Text>
    <a href="#" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" id="size-12">12</a>
    <a href="#" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" id="size-20">20</a>
    <a href="#" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" id="size-30">30</a>

    <Skripttyp="text/javascript">
        Funktion changeSize(Größe){
            Rückgabefunktion(){
                document.body.style.fontSize = Größe + 'px';
            };
        }

        var Größe12 = Größe ändern(12);
        var Größe14 = Größe ändern(20);
        var size16 = Größe ändern(30);

        document.getElementById('size-12').onclick = size12;
        document.getElementById('size-20').onclick = size14;
        document.getElementById('size-30').onclick = size16;
</Skript>
</body>
</html>

4. Funktion Anti-Shake

Der Callback wird n Sekunden nach Auslösen des Ereignisses ausgeführt. Wird er innerhalb von n Sekunden erneut ausgelöst, wird die Zeitmessung neu gestartet.

Der Schlüssel zur Implementierung liegt in der Funktion setTimeout . Da eine Variable zum Speichern der Zeitangaben benötigt wird, kann sie zur Wahrung der globalen Reinheit mithilfe von Closures implementiert werden. So was:

/*
* fn [Funktion] die Funktion, die Anti-Shake benötigt * Verzögerung [Zahl] Millisekunden, Anti-Shake-Fristwert * /
Funktion Entprellung(fn,Verzögerung){
    let timer = null //Mit Abschluss return function() {
        wenn(Zeitgeber){
            clearTimeout(timer) //Das Eingeben dieser Verzweigungsanweisung zeigt an, dass derzeit ein Zeitmessvorgang ausgeführt wird und das gleiche Ereignis erneut ausgelöst wird. Um die aktuelle Zeitmessung abzubrechen und neu zu starten, führen Sie den Timer wie folgt aus: setTimeOut(fn,delay) 
        }anders{
            timer = setTimeOut(fn,delay) //Das Betreten dieses Zweigs bedeutet, dass derzeit keine Zeitmessung stattfindet. Starten Sie daher eine Zeitmessung.}
    }
}

6. Verwenden Sie Klassen, um Funktionen zu implementieren, die dem Ausblenden interner Variablen in Abschlüssen ähneln

Das Obige ist eine praktische Anwendung von Closures. Als ich nachts nicht schlafen konnte, dachte ich an das gleiche Bedürfnis. Kann es durch Klassen umgesetzt werden? Nach vielen Schwierigkeiten lautet die Antwort schließlich „Ja“, und zwar wie folgt:

Klasse Addierer{
    Konstruktor(c){
        dies._c = c
    }
    Zunahme(){
        dies._c++ 
    }
    verringern(){
        dies._c --
    }
    Holen Sie sich finalNum(){
        gib dies zurück._c
    }
}
sei c = neuer Addierer(1)
c.erhöhen()
console.log(c.finalNum) // 2
c.erhöhen()
console.log(c.finalNum) // 3
c.erhöhen()
konsole.log(c.finalNum) // 4
c.decreace()
console.log(c.finalNum) // 3

Referenzartikel:

https://www.cnblogs.com/gg-qq...

https://www.cnblogs.com/pikac...

https://developer.mozilla.org...