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
Grafisches Tutorial zur Installation und Konfiguration von Ubuntu Server 16.04 MySQL 8.0
Grafisches Tutorial zur Installation und Konfigur...
Detaillierte Erläuterung zur Entwicklung von JavaScript-Webseiten auf Einstiegsniveau
Teil 3: ❤Drei Möglichkeiten, den Backend-Datenemp...
Zentrieren des Formulars in HTML
Ich bin einmal auf eine Aufgabe gestoßen, bei der...
Das mobile Vue-Terminal bestimmt die Richtung, in die der Finger über den Bildschirm gleitet
Das mobile Vue-Terminal bestimmt die Richtung, in...
Detaillierte Erläuterung der Einschränkungen und Beschränkungen von MySQL-partitionierten Tabellen
Build deaktivieren Partitionsausdrücke unterstütz...
Detaillierte Erklärung zur Verwendung von ElementUI in Vue
Anmeldung + SessionStorage Effektanzeige Nach ein...
Detailliertes Tutorial zur Verwendung von stimulsoft.reports.js mit vue-cli
vue-cli verwendet stimulsoft.reports.js (Tutorial...
Warum MySQL das Löschen von Daten nicht empfiehlt
Inhaltsverzeichnis Vorwort InnoDB-Speicherarchite...
Ursachen und Lösungen für domänenübergreifende Probleme bei Ajax-Anfragen
Inhaltsverzeichnis 1. Wie entsteht Cross-Domain? ...
Der Prozess der Bereitstellung eines Projekts auf einem anderen Host mit Jenkins
Umfeld Hostname IP-Adresse Aufschlag Jenkins 192....
MySQL 8.0.18 fügt Benutzer zur Datenbank hinzu und erteilt Berechtigungen
1. Es wird empfohlen, den Root-Benutzer für die A...
MySQL 8.0.17 winx64 (mit Navicat) manuelle Konfiguration Version Installation Tutorial Diagramm
1. Download-Adresse: mysql-8.0.17-winx64 Herunter...
Zwei Möglichkeiten zum Verwalten von Volumes in Docker
Im vorherigen Artikel habe ich die Grundkenntniss...
js, um einen einfachen Bild-Drag-Effekt zu erzielen
In diesem Artikel wird der spezifische Code von j...
Zusammenfassung gängiger Befehle zum Erstellen von ZooKeeper3.4-Middleware unter CentOS7
1. Herunterladen und entpacken 1. Einführung in Z...