Detaillierte Beschreibung des Anwendungsszenarios für Javascript-Closure
|
1. Abschluss In Beispielsweise der folgende Code:
Funktion f1() {
var n = 999;
Funktion f2() {
konsole.log(n);
}
Rückgabe f2;
}
var Ergebnis = f1();
Ergebnis();//999
Funktion f2 ist in Funktion f1 enthalten und alle lokalen Variablen in f1 sind für f2 sichtbar. Der umgekehrte Fall ist jedoch nicht der Fall. Die lokalen Variablen in f2 sind für f1 nicht sichtbar. Dies ist die für die Sprache Da f2 die lokalen Variablen in f1 lesen kann, können seine internen Variablen außerhalb von f1 gelesen werden, solange f2 als Rückgabewert verwendet wird. 2. Verwendungsszenarien für Schließungen1.setTimeout Die erste vom nativen
Funktion f1(a) {
Funktion f2() {
konsole.log(a);
}
Rückgabe f2;
}
var Spaß = f1(1);
setTimeout(fun,1000);//Nach einer Sekunde 1 ausgeben
2. RückrufDefinieren 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. Beispielsweise 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>
Wenn Sie auf eine Zahl klicken, ändert sich die Schriftgröße auf die entsprechende Größe. 3. Funktion Anti-ShakeDer 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 Wie im folgenden Code gezeigt:
/*
* fn [Funktion] die Funktion, die Anti-Shake benötigt * Verzögerung [Zahl] Millisekunden, Anti-Shake-Fristwert * /
Funktion Entprellung(fn,Verzögerung){
let timer = null
//Mithilfe der Closure 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.}
}
}
4. Kapseln Sie private VariablenWie im folgenden Code gezeigt: Erstellen Sie einen Zähler mit js Methode 1:
Funktion f1() {
var Summe = 0;
var obj = {
inc:Funktion () {
Summe++;
Rücklaufsumme;
}
};
gibt Objekt zurück;
}
lass Ergebnis = f1();
konsole.log(ergebnis.inc());//1
konsole.log(ergebnis.inc()); //2
konsole.log(ergebnis.inc());//3
Im zurückgegebenen Objekt ist ein Abschluss implementiert, der die lokale Variable x trägt, und auf die Variable x kann von externem Code aus überhaupt nicht zugegriffen werden. Methode 2:
Funktion f1() {
var Summe = 0;
Funktion f2() {
Summe++;
Rückgabe f2;
}
f2.valueOf = Funktion () {
Rücklaufsumme;
};
f2.toString = Funktion () {
gib Summe+ zurück'';
};
Rückgabe f2;
}
//Funktion f1 ausführen und Funktion f2 zurückgeben
console.log(+f1());//0
konsole.log(+f1()()) //1
konsole.log(+f1()()()) //2
Alle js-Datentypen haben die beiden Methoden
Bei numerischen Operationen wird zuerst Dies ist das Ende dieses Artikels über die Verwendungsszenarien von Javascript-Closures. Weitere relevante Javascript-Closure-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Tudou.com Frontend-Übersicht
>>: Was ist Software 404 und 404-Fehler und was ist der Unterschied zwischen ihnen
Artikel empfehlen
So zeigen Sie den Nginx-Konfigurationsdateipfad und den Ressourcendateipfad an
Zeigen Sie den Pfad der Nginx-Konfigurationsdatei...
Warum ist der Speicherplatz nach dem Löschen von Tabellendaten in MySQL immer noch belegt?
Inhaltsverzeichnis 1. MySQL-Datenstruktur 2. Die ...
Eine SQL-Anweisung schließt die MySQL-Deduplizierung ab und behält eine
Als ich vor einigen Tagen an einer Anforderung ar...
Canvas zeichnet Rubbellos-Effekt
In diesem Artikel wird der spezifische Code zum Z...
Ladeanimation mit CSS3 implementiert
Ergebnisse erzielen Implementierungscode <h1&g...
So verwenden Sie Nginx zur Simulation einer Blue-Green-Bereitstellung
Dieser Artikel stellt die Blue-Green-Bereitstellu...
Über die Implementierung des JavaScript-Karussells
Heute ist ein weiterer sehr praktischer Fall. All...
Detaillierte Erläuterung der FTP-Umgebungskonfigurationslösung (vsftpd)
1. Installieren Sie die vsftpd-Komponente Install...
HTML implementiert ein festes schwebendes, halbtransparentes Suchfeld auf Mobilgeräten
Frage. Im mobilen Shopping-Mall-System sehen wir ...
Vue verwendet MockJS, um simulierte Datenfalldetails zu generieren
Inhaltsverzeichnis Installieren Sie Mockjs in Ihr...
jQuery implementiert die Formularvalidierung
Verwenden Sie jQuery, um die Formularvalidierung ...
Inhaltstypbeschreibung, d. h. der Typ des HTTP-Anforderungsheaders
Um den Inhaltstyp zu lernen, müssen Sie zunächst ...
Beispielcode zum Festlegen des Beschriftungsstils mithilfe des CSS-Selektors
CSS-Selektoren Durch Festlegen des Stils für das ...
WeChat-Applet zum Abrufen eines Schrittdatensatzes für Mobiltelefonnummern
Vorwort Kürzlich bin ich bei der Entwicklung eine...
Details zum JavaScript-Abschluss
Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...