Heim > Artikel > Web-Frontend > Detaillierte Erklärung des js-Verschlusses_Grundkenntnisse
Das Schließen ist eine Schwierigkeit und ein Merkmal der Javascript-Sprache. Viele fortgeschrittene Anwendungen basieren auf dem Schließen.
Abschlüsse weisen drei Merkmale auf:
1. Funktion verschachtelte Funktion
2. Externe Parameter und Variablen können innerhalb der Funktion
referenziert werden
3. Parameter und Variablen werden vom Garbage-Collection-Mechanismus nicht recycelt
Ein Abschluss ist eine Funktion, die Zugriff auf Variablen im Gültigkeitsbereich einer anderen Funktion hat. Die häufigste Methode zum Erstellen eines Abschlusses besteht darin, eine andere Funktion innerhalb einer Funktion zu erstellen und über eine andere Funktion auf die lokalen Variablen dieser Funktion zuzugreifen
Die Verwendung von Abschlüssen hat Vor- und Nachteile, d. h. lokale Variablen können im Speicher verbleiben und die Verwendung globaler Variablen kann vermieden werden. Globale Variablen sind in jedem Modul aufrufbar, was zwangsläufig katastrophale Folgen hat.
Es wird daher empfohlen, private, gekapselte lokale Variablen zu verwenden.
Nachdem die allgemeine Funktion ausgeführt wurde, wird das lokal aktive Objekt zerstört und nur der globale Bereich im Speicher gespeichert. Bei Schließungen ist die Situation jedoch anders!
Schließen verschachtelter Funktionen:
function aaa() { var a = 1; return function(){ alert(a++) }; } var fun = aaa(); fun();// 1 执行后 a++,,然后a还在~ fun();// 2 fun = null;//a被回收!!
Das obige Ausgabeergebnis ist 5;
Bei Abschlüssen bleiben Variablen immer im Speicher, was bei unsachgemäßer Verwendung zu einem erhöhten Speicherverbrauch führt.
(1). Wenn in JavaScript auf ein Objekt nicht mehr verwiesen wird, wird das Objekt von GC recycelt; (2) Wenn zwei Objekte aufeinander verweisen und von einem Dritten nicht mehr referenziert werden, werden auch die beiden Objekte, die aufeinander verweisen, recycelt.
Was sind also die Vorteile der Verwendung von Verschlüssen? Die Vorteile der Verwendung von Verschlüssen sind:
1. Sie möchten, dass eine Variable lange im Speicher bleibt
2. Vermeiden Sie die Verschmutzung globaler Variablen
3. Die Existenz privater Mitglieder
1. Akkumulation globaler Variablen
<script> var a = 1; function abc(){ a++; alert(a); } abc(); //2 abc(); //3 </script>
<script> function abc(){ var a = 1; a++; alert(a); } abc(); //2 abc(); //2 </script>
3. Akkumulation lokaler Variablen (was Schließungen bewirken können)
<script> function outer(){ var x=10; return function(){ //函数嵌套函数 x++; alert(x); } } var y = outer(); //外部函数赋给变量y; y(); //y函数调用一次,结果为11 y(); //y函数调用第二次,结果为12,实现了累加 </script>
In js können wir eine Funktion über das Schlüsselwort function deklarieren:
<script> function abc(){ alert(123); } abc(); </script>
<script> (function (){ alert(123); })(); //然后通过()直接调用前面的表达式即可,因此函数可以不必写名字; </script>
<script> var abc = (function(){ //abc为外部匿名函数的返回值 var a = 1; return function(){ a++; alert(a); } })(); abc(); //2 ;调用一次abc函数,其实是调用里面内部函数的返回值 abc(); //3 </script>
<script> var aaa = (function(){ var a = 1; function bbb(){ a++; alert(a); } function ccc(){ a++; alert(a); } return { b:bbb, //json结构 c:ccc } })(); aaa.b(); //2 aaa.c() //3 </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <script> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for (var i=0;i<aLi.length;i++){ aLi[i].onclick = function(){ //当点击时for循环已经结束 alert(i); }; } } </script> </head> <body> <ul> <li>123</li> <li>456</li> <li>789</li> <li>010</li> </ul> </body> </html>7. Schreiben Sie den obigen Code mit der Schließung neu: