Heim > Web-Frontend > js-Tutorial > Was ist Schließung?

Was ist Schließung?

一个新手
Freigeben: 2017-09-08 13:12:50
Original
1578 Leute haben es durchsucht

Was ist ein Abschluss:

Ein Abschluss ist eine Funktion, die Zugriff auf eine Variable im Gültigkeitsbereich einer anderen Funktion hat.
–"Javascript Advanced Programming"

在这个函数fun2中可以访问另一个函数中的变量a,所以fun2()就是一个闭包。
function fun1 () { 
      var  a = 0; 
      function fun2 () {  
          console.log(a);  
      } 
      fun2(); }
Nach dem Login kopieren

 1. So rufen Sie den Abschluss außerhalb der definierten Funktion auf, Escape-Methode:

  (1). innere Funktion zu einer globalen Variablen;

var globalVar; function outer() { 
      console.log(‘outer’); 
      function inner(){ 
          console.log(‘inner’); 
      } 
      globalVar = inner;       
      } outer(); // outer 
      globalVar(); // inner;
Nach dem Login kopieren

In diesem Beispiel entkommt inner() erfolgreich durch die Referenz der globalen Variablen und kann nun global aufgerufen werden und auf äußere Variablen verweisen von ()

(2). 'Retten' Sie die Referenz der inneren Funktion, indem Sie den Wert

function outer() { 
      console.log(‘outer’); 
      function inner(){ 
          console.log(‘inner’); 
      }    
      return inner;       
      } 
      var fn = outer(); // outer 
      fn(); // inner;
Nach dem Login kopieren

zurückgeben. In diesem Beispiel inner() durch Rückgabe von Wert erfolgreich maskiert, jetzt kann er global aufgerufen werden und auf die Variable von „outer()“ kann verwiesen werden

2. Die Auswirkung des Aufrufs von „Closure“ außerhalb der Funktion: erhöhte Speichernutzung

Unter normal Umstände Nachdem der Funktionsaufruf beendet ist, verlässt die Ausführungsumgebung der Funktion den Umgebungsstapel, die definierten Variablen werden verworfen (Entsorgung hängt mit dem Garbage-Collection-Mechanismus zusammen), die aktiven Variablen (Variablenobjekte) werden zerstört und der Speicher wird zerstört freigegeben. Da die Gültigkeitskette des Abschlusses jedoch das Variablenobjekt der externen Funktion enthält, kann auf die Variablen der externen Funktion erneut verwiesen werden. Der Garbage Collection-Mechanismus verwirft die Variablen der externen Funktion und die Variablenobjekte der externen Funktion nicht Funktion bleiben im Speicher erhalten. Dadurch erhöht sich der Speicherverbrauch.

3. Die Beziehung zwischen Abschlüssen und Variablen: Häufige Missverständnisse und Lösungstechniken bei Abschlüssen

Abschlüsse speichern das gesamte Variablenobjekt, das die Funktion enthält, und die erhaltenen externen Objektvariablen sind Abschlüsse. Die Objektvariable bei Der Zeitpunkt des Paketaufrufs ist normalerweise der letzte Wert der externen Funktionsvariablen.

Beispiel:

function createFun() { 
      var result = []; 
      for ( var i = 0; i < 10; i++) { 
          result[i] = function() { 
              return i; 
          }; 
      } 
      return result; } var result = createFun(); console.log(result5); // 10
Nach dem Login kopieren

Der Rückgabewert der externen Funktion ist hier ein Array, und der Array-Wert ist ein Verweis auf eine andere Funktion (Abschluss). Wir denken fälschlicherweise, dass der Rückgabewert jedes Abschlussaufrufs unterschiedlich ist, aber tatsächlich gibt jede Funktion denselben Wert zurück. Denn wenn der Abschluss aufgerufen wird, wurde die externe Funktion ausgeführt, die den Abschluss aufgerufen hat. Zu diesem Zeitpunkt ist i = 10 im Variablenobjekt der externen Funktion und der Rückgabewert unseres Abschlusses ist i, der Abschluss erhält den externen Variables Objekt zum Zeitpunkt des Aufrufs, i ist zu diesem Zeitpunkt 10.

Lösung:

function createFun() { 
      var result = []; 
      for ( var i = 0; i < 10; i++) { 
          result[i] = function(num) { 
              return function() { 
                     return num; 
              }; 
           }(i); 
      } 
      return result; } var result = createFun(); console.log(result5); // 5
Nach dem Login kopieren

In der Schleife definieren wir ein anonymes Array und weisen das Ergebnis der sofortigen Ausführung der anonymen Funktion dem Array zu, wobei anonym ist Die Funktion hat einen Parameter num. Jedes Mal, wenn ich als Parameter an num übergeben wird, erhält num bei jeder Schleife einen anderen Wert, sodass jedes Mal eine andere Funktion zurückgegeben wird (der Unterschied besteht darin, dass der num-Wert unterschiedlich ist). Wenn der Array-Wert extern aufgerufen wird, werden erwartungsgemäß unterschiedliche Werte zurückgegeben.

4. Achten Sie auf den this-Wert im Abschluss

Zunächst einmal sollten wir in Bezug auf den this-Punkt in der Funktion wissen, dass dieser auf das Objekt zeigt, das die Funktion If aufruft Es gibt kein explizites Aufrufobjekt, es zeigt auf das Fensterobjekt.

Es ist leicht, den Punkt this im Abschluss zu verwechseln, zum Beispiel:

var name = “window”; 
      var o = { 
          name: “object”, 
          getName: function() { 
              return function() { 
                  return this.name; 
              }; 
          } 
      }; console.log(o.getName()()); // window
Nach dem Login kopieren

Es ist ersichtlich, dass der Abschluss this auf das globale Objekt verweist. Nach der Analyse können Sie o.getName()() als (o.getName())() schreiben. Dieser Ausdruck entspricht der Ausführung von o.getName() im ersten Schritt ) und dann global Dieser Abschluss wird ausgeführt und nicht über das Objekt o aufgerufen, sodass dies auf das globale Objekt zeigt.

5. Das Problem von Speicherlecks, wie man unnötige Speichernutzung reduziert

function assignHandler() { 
          var ele = documnet.getElementById(“somenode”); 
          ele.onclick = function() { 
              console.log(ele.id); 
          }; 
          }
Nach dem Login kopieren

Im obigen Beispiel hängt die Methode zur Definition von ele mit der Anonymität zusammen Funktion, also speichert ele einen Verweis auf die anonyme Funktion, und der Abschluss verweist auf die enthaltende Funktion und verweist auch auf das ele-Objekt, was zu einem Zirkelverweis auf das Objekt führt. Das ELE-Element (das DOM-Element nimmt viel Speicher ein ) immer im Speicher gespeichert ist und nicht freigegeben werden kann, lautet die Lösung wie folgt:

function assignHandler() { 
          var ele = documnet.getElementById(“somenode”); 
          var id = ele.id; 
          ele.onclick = function() { 
              console.log(id);    // 通过id值中介表面上解除了与ele的循环引用 
          }; 
          ele = null; // 手动解除引用 }
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWas ist Schließung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage