suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung von Umfang und Abschluss in Javascript_Javascript-Kenntnissen

Detaillierte Erläuterung von Umfang und Abschluss in Javascript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:20:051294Durchsuche

1. JavaScript-Bereich

JavaScript-Variablen haben eigentlich nur zwei Bereiche, globale Variablen und interne Variablen von Funktionen. Der Gültigkeitsbereich einer an einer beliebigen Stelle innerhalb einer Funktion definierten Variablen (Variablenbereich) ist der gesamte Funktionskörper.
Globale Variablen: Bezieht sich auf die Objekteigenschaften unter dem Fensterobjekt.
Bereichsaufteilung: basierend auf dem Kontext, unterteilt nach Funktionen, nicht nach Blöcken.
Betonung auf zwei Punkte:
1. Im gleichen Bereich ermöglicht JavaScript wiederholte Definitionen von Variablen, wobei die letztere Definition die vorherige Definition überschreibt.
2. Wenn eine Variable definiert wird, ohne das Schlüsselwort var innerhalb einer Funktion hinzuzufügen, ist sie standardmäßig eine globale Variable. 

var scope="global"; 
function t(){ 
  console.log(scope); //"global" 
  scope="local" 
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"local" 




var scope="global"; 
function t(){ 
  console.log(scope); //"undefined" 
  var scope="local" 
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"global"

Bei der Variablenauflösung wird zuerst der lokale Bereich und dann der obere Bereich durchsucht. Der Variablenbereich ist in der Funktion des ersten Codes nicht definiert, daher wird der obere Bereich (globaler Bereich) durchsucht und sein Wert ausgegeben. Der Variablenbereich wird jedoch in der Funktion des zweiten Codes definiert (unabhängig davon, ob die Variable nach der Konsole oder davor definiert wird, wird davon ausgegangen, dass sich der Variablenbereich in diesem Bereich befindet), sodass der Bereich der oberen Ebene nicht mehr vorhanden ist durchsucht und der Umfang direkt ausgegeben. Leider ist der lokalen Variablen i derzeit kein Wert zugewiesen, sodass die Ausgabe undefiniert ist. 

//所以根据函数作用域的意思，可以将上述第二段代码重写如下： 
var scope="global"; 
function t(){ 
  var scope; 
  console.log(scope); 
  scope="local" 
  console.log(scope); 
} 
t();

Aufgrund der Eigenschaften des Funktionsumfangs werden lokale Variablen immer im gesamten Funktionskörper definiert. Wir können die Variablendeklaration an den Anfang des Funktionskörpers „vorrücken“. 

var b; //第1步 
function fun(){  
  b = "change";  
}  
alert(b);//输出undefined，由于第1步只定义未赋值 
 
 
var b; //第1步 
function fun(){  
  b = "change";  
} 
fun(); //调用上述函数 
alert(b); //输出change

Wenn Sie var zum Deklarieren einer Variablen verwenden, ist das erstellte Attribut nicht konfigurierbar, was bedeutet, dass es nicht über den Löschoperator gelöscht werden kann.
2. Scope-Instanz

<html> 
<head> 
  <script type="text/javascript"> 
    function buttonInit(){ 
      for(var i=1;i<4;i++){ 
        var b=document.getElementById("button"+i); 
        b.addEventListener("click"，function(){ alert("Button"+i);}，false); 
      } 
    } 
    window.onload=buttonInit; 
  </script> 
</head> 
<body> 
  <button id="button1">Button1</button> 
  <button id="button2">Button2</button> 
  <button id="button3">Button3</button> 
</body> 
</html>

Wenn das Registrierungsereignis endet, ist der Wert von i 4. Wenn auf die Schaltfläche geklickt wird, lautet die Ereignisfunktion function(){ alarm("Button" i);} In dieser anonymen Funktion gibt es kein i die Bereichskette, also zu Finden Sie es in der buttonInit-Funktion Zu diesem Zeitpunkt ist der Wert von i 4, sodass „button4“ angezeigt wird.
3. JavaScript-Abschluss
In js umfassen Abschlüsse hauptsächlich mehrere andere Funktionen von js: Bereichskette, Müll-(Speicher-)Recyclingmechanismus, Funktionsverschachtelung usw.
1. Bereichskette: Einfach ausgedrückt ist eine Bereichskette ein Index, der erstellt wird, wenn eine Funktion definiert wird, um den Wert einer verwendeten Variablen zu finden. Ihre interne Regel besteht darin, die lokalen Variablen der Funktion selbst an den Anfang zu stellen Platzieren Sie die Variablen in der übergeordneten Funktion weiter hinten in der eigenen übergeordneten Funktion usw. bis zum globalen Objekt. Wenn der Wert einer Variablen in einer Funktion abgefragt werden muss, sucht der js-Interpreter in der Bereichskette, beginnend mit der lokalen Variablen vorne. Wenn die entsprechende Variable nicht gefunden wird, sucht er in der Kette der nächsten Ebene Sobald die Variable gefunden wurde, fahren Sie nicht fort. Wenn die erforderliche Variable am Ende nicht gefunden wird, gibt der Interpreter undefiniert zurück.
2. Der Garbage-Collection-Mechanismus von Javascript: Wenn in Javascript auf ein Objekt nicht mehr verwiesen wird, wird das Objekt von GC recycelt. Wenn zwei Objekte aufeinander verweisen und von einem Dritten nicht mehr referenziert werden, werden auch die beiden Objekte, die aufeinander verweisen, recycelt. Da Funktion a von b referenziert wird und b von c außerhalb von a referenziert wird, wird Funktion a nach der Ausführung nicht wiederverwendet. Erstellen Sie einen Abschluss. Diese Variablen werden vom Speicherkollektor nicht recycelt. Nur wenn die interne Funktion nicht aufgerufen wird, wird der Abschluss zerstört und beim nächsten Start werden keine Variablen recycelt.
3. Mit Abschlüssen können verschachtelte Funktionsstrukturen funktionieren
4. Verwenden Sie den js-Abschluss, um Schleifenbindungsereignisse zu implementieren

<html> 
<head> 
  <title>闭包</title> 
</head> 
<body> 
  <ul id="list"> 
    <li>第1条记录</li> 
    <li>第2条记录</li> 
    <li>第3条记录</li> 
    <li>第4条记录</li> 
    <li>第5条记录</li> 
    <li>第6条记录</li> 
  </ul> 
  <script type="text/javascript"> 
    function tt(nob) { 
      this.clickFunc = function() { 
        alert("这是第" + (nob + 1) + "记录"); 
      } 
    } 
    var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 
    for (var i = 0; i<= list_obj.length; i++){ 
      console.log(list_obj[i]) 
      list_obj[i].onmousemove = function(){ 
        this.style.backgroundColor = "#cdcdcd"; 
      } 
      list_obj[i].onmouseout = function() { 
        this.style.backgroundColor = "#FFFFFF"; 
      } 
      //list_obj[i].onclick = function() { 
      // alert("这是第" + i + "记录"); //不能正常获取 alert出来的都是：“这是第6记录” 
      //} 
      var col = new tt(i); //调用tt函数 
      list_obj[i].onclick = col.clickFunc; //执行clickFunc函数 
    } 
  </script> 
</body> 
</html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vollständiges Beispiel für den Jquery-Drag-and-Drop-Effekt (mit Download des Demo-Quellcodes)_jqueryNächster Artikel：Vollständiges Beispiel für den Jquery-Drag-and-Drop-Effekt (mit Download des Demo-Quellcodes)_jquery

In Verbindung stehende Artikel

Mehr sehen