Der Inhalt dieses Artikels befasst sich mit dem weiteren Verständnis von js-Verschlüssen. Der Inhalt ist sehr gut.
Das Konzept des Abschlusses verwirrt mich, seit ich vor ein paar Monaten angefangen habe, JS zu lernen
Ich habe es vorher verstanden, aber dann habe ich Ich habe es lange nicht benutzt, ich habe es nur vergessen
Abschluss: Laienhaft ausgedrückt akzeptieren die meisten Leute, dass eine Funktion das Recht hat, lokale Variablen in einer anderen Funktion zu verwenden
Ich habe viele Unterschiede gesehen
Dargestellt im einfachsten Code
<span style="font-size: 14px;">function out(){<br/><br/>var age=21;<br/><br/>function inner(){<br/> <br/> console.log(age);<br/><br/>}<br/><br/>return inner;<br/><br/>}<br/><br/>var fn=out();<br/> fn(); //22</span>Sehr im Einklang mit dem Konzept
Ich denke, dass der Abschluss den Umfang widerspiegelt
Die innere Funktion ist definiert in Die Out-Funktion
Also console(age);
verwendet zunächst den Variablensuchmechanismus und sucht innerhalb Ihres eigenen Bereichs (. Wenn die Funktion nicht gefunden wird, suchen Sie nach
. Wenn sie nicht gefunden wird, wird nach < gesucht 🎜>
In einem größeren Bereich kann auf Bereiche der unteren Ebene nach oben zugegriffen werden, auf Bereiche der oberen Ebene jedoch nicht nach unten >Und JS hat keinen Gültigkeitsbereich auf Blockebene
for(var i=0;i<5;i++){
console.log(i);// 1 2 3 4 5
}
cosole.log(i );//5
Ich werde nicht nur wegen der for-Schleife zerstört
Das sollte beachtet werden
Okay, ich habe ein wenig über den Umfang gesprochen.
Der Kern von Verschlüssen ist die Rückgabe, wenn man sich nur den Code ansieht
Mein Verständnis ist, dass „return“ den Funktionskörper von „Inner“ und den Bereich zurückgibt, auf den „Inner“ zugreifen kann!
Der Zugriff auf „Inner“ kann also überall erfolgen
Beispiel:
<span style="font-size: 14px;">function test(){<br/> var age=23;<br/> var fn=out();<br/> fn(); //21<br/> <br/> }<br/> <br/> test();//21</span>Nach dem Login kopieren
Auch wenn das Alter in der Testfunktion definiert ist, kann es nicht überschrieben werden, da die vorhandenen Bereiche unterschiedlich sind
Es Gibt den Bereich zurück, sodass sich alle Variablen, auf die zugegriffen wird, in diesem Bereich befinden, was nichts mit dem Bereich zu tun hat, in dem sich Ihre Funktion jetzt befindet.
Der Abschluss ist eigentlich ein Phänomen, das jeder kennt Wer DNF spielt, malt Bilder und verkauft Materialien, um Geld zu verdienen.
Zusammenfassend lässt sich sagen, dass es mit dem Umfang der von Ihnen definierten Funktion zu tun hat Rolle der von Ihnen ausgeführten Funktion. Domänenunabhängig
Im Gegensatz dazu hat dies nichts mit der Definitionszeit zu tun, sondern hängt mit der Ausführungszeit zusammen. Vergleichendes Gedächtnis
Wenn Sie es also nicht gut verstehen, Abschluss
Dann können Sie es wie ich verstehen
Was zurückgegeben wird, ist die Funktion selbst + die Funktionen, auf die die Funktion zugreifen kann Domäne
Geben Sie eine häufig verwendete an:
Schließen-Tab-Leistenumschaltung
Immer wenn die for-Schleife list[i].onmouseover Eine Funktion zurückgeben Dies bildet einen Abschluss. Die Rückgabefunktion und der Bereich, auf den die Funktion zugreifen kann, werden immer dann ausgeführt, wenn onmouseover führt dann die for-Schleife in der Generierungsfunktion aus, um alle className von li Dieser Satz ist der wichtigste beim Ausführen von list[n]. Das n hier ist das i onmouseover übergeben wurde > Weil die Funktion sofort ausgeführt wird, wenn sie definiert ist und i an die anonyme Funktion übergeben wird. Dieses i liegt im Bereich der Anonymität Funktion Jedes onmouseoverspeichert sein eigenes i so, wenn es ausgelöst wirdWann Mit der Maus darüber kann li auf das i zugreifen, das zuvor im Bereich gespeichert wurde, und erkennt so die Notwendigkeit, die Hintergrundfarbe desjenigen zu ändern, der darauf klickt Verständnis der tatsächlichen Parameter, formalen Parameter und Abschlüsse von js-Funktionen Das obige ist der detaillierte Inhalt vonWeiteres Verständnis von js-Verschlüssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!<span style="font-size: 14px;"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0<span style="font-size: 12px; color: rgb(0, 0, 0);">;}
.box{
width:140px;
height:18px;
position:relative;
padding:6px 20px;
margin:50px auto;
background:#ff6666;
}
.box ul{
list</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">style:none;
}
.box li{
width:18px;
height:18px;
background:#ff3300;
line</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">height:18px;
text</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">align:center; </span><span style="font-size: 12px; color: rgb(0, 0, 255);">float</span><span style="font-size: 12px; color: rgb(0, 0, 0);">:left;
margin</span>-<span style="font-size: 12px; color: rgb(0, 0, 0);">right:5px;
cursor:pointer;
}
.current{
background:#ffccff</span>!<span style="font-size: 12px; color: rgb(0, 0, 0);">important;
} </span></style>
</head>
<body>
<p class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</p>
<script type="text/javascript"> <br/><span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);"> $(name){ <br/> <br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">return</span><span style="font-size: 12px; color: rgb(0, 0, 0);"> document.querySelectorAll(name);
} <br/> <br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> list=$(".box ul li"<span style="font-size: 12px; color: rgb(0, 0, 0);">); <br/><br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> len=<span style="font-size: 12px; color: rgb(0, 0, 0);">list.length; <br/> </span><span style="font-size: 12px; color: rgb(0, 0, 255);">for</span>(<span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> i=0;i<len;i++<span style="font-size: 12px; color: rgb(0, 0, 0);">){
list[i].onmouseover</span>=(<span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);">(n){
</span><span style="font-size: 12px; color: rgb(0, 0, 255);">return</span> <span style="font-size: 12px; color: rgb(0, 0, 255);">function</span><span style="font-size: 12px; color: rgb(0, 0, 0);">(){ <br/><br/></span><span style="font-size: 12px; color: rgb(0, 0, 255);">for</span>(<span style="font-size: 12px; color: rgb(0, 0, 255);">var</span> j=0;j<len;j++<span style="font-size: 12px; color: rgb(0, 0, 0);">){
list[j].className</span>=""<span style="font-size: 12px; color: rgb(0, 0, 0);">;
}
list[n].className</span>="current"<span style="font-size: 12px; color: rgb(0, 0, 0);">;
}
})(i);
}<br/><br/><br/><br/></span></script>
</body>
</html></span>Nach dem Login kopieren
