Detaillierte Erklärung des js-Verschlusses_Grundkenntnisse-js-Tutorial-php.cn

Detaillierte Erklärung des js-Verschlusses_Grundkenntnisse

WBOY

Freigeben： 2016-05-16 16:37:57

Original

1781 Leute haben es durchsucht

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被回收！！

Nach dem Login kopieren

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.

Garbage-Collection-Prinzip von JavaScript

(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

2. Lokale Variablen

<script>
var a = 1;
function abc(){
    a++;
    alert(a);
}
abc();       //2
abc();      //3
</script>

Nach dem Login kopieren

<script>

function abc(){
    var a = 1;
    a++;
    alert(a);
}
abc();            //2
abc();          //2
</script>

Nach dem Login kopieren

Wie können wir also eine Variable sowohl zu einer lokalen als auch einer akkumulativen Variablen machen?

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>

Nach dem Login kopieren

Funktionsdeklaration und Funktionsausdruck in js:

In js können wir eine Funktion über das Schlüsselwort function deklarieren:

<script>
function abc(){
    alert(123);
}
abc();
</script>

Nach dem Login kopieren

Wir können diese Aussage auch durch ein „()“ in einen Ausdruck umwandeln:

<script>
(function (){
    alert(123);
})();          //然后通过()直接调用前面的表达式即可，因此函数可以不必写名字；
</script>

Nach dem Login kopieren

4. Modularer Code zur Reduzierung der Verschmutzung globaler Variablen

<script>
var abc = (function(){   //abc为外部匿名函数的返回值
    var a = 1;
    return function(){
        a++;
        alert(a);
    }
})();
abc();  //2 ；调用一次abc函数，其实是调用里面内部函数的返回值  
abc();  //3
</script>

Nach dem Login kopieren

5. Die Existenz privater Mitglieder

<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>

Nach dem Login kopieren

6. Suchen Sie direkt den Index des entsprechenden Elements in der Schleife

  <!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>

Nach dem Login kopieren

7. Schreiben Sie den obigen Code mit der Schließung neu: