Heim > Artikel > Web-Frontend > Weiteres Verständnis von js-Verschlüssen
Weiteres Verständnis von js-Verschlüssen
- 不言Original
- 2018-07-18 17:16:141381Durchsuche
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
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>
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
<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>
Immer wenn die for-Schleife list[i].onmouseover
ausführt, wird die Funktion sofort ausgeführt und die aktuelle Variable i übergebenEine 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
wird ausgelöst. Die Funktionführt dann die for-Schleife in der Generierungsfunktion aus, um alle className von li
zu löschenDieser 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
Verwandte Empfehlungen: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!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse