Weiteres Verständnis von js-Verschlüssen-js-Tutorial-php.cn

Weiteres Verständnis von js-Verschlüssen

不言

Freigeben： 2018-07-18 17:16:14

Original

1431 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Es erhält 21 statt 22, da Funktionskörper und Umfang zusammen zurückgegeben werden. Dann der nächstgelegene Geltungsbereich ist der Out-Funktionsbereich

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>

Nach dem Login kopieren

Immer wenn die for-Schleife list[i].onmouseover

ausführt, wird die Funktion sofort ausgeführt und die aktuelle Variable i übergeben

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

wird ausgelöst. Die Funktion

führt dann die for-Schleife in der Generierungsfunktion aus, um alle className von li

zu löschen

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

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!