JavaScript-Schließungen im Vergleich zu anonymen Funktionen

In einer nussschale Javascript Closures ermöglichen, eine Funktion zu Zugriff auf eine variableerklärt in einem lexikalisch-der übergeordneten Funktion.

Let ' s finden Sie eine ausführlichere Erklärung.
Um zu verstehen, Verschlüsse ist es wichtig zu verstehen, wie JavaScript-Bereiche von Variablen.

Bereiche

In JavaScript-Bereiche definiert und mit Funktionen.
Jede Funktion definiert einen neuen Bereich.

Betrachten Sie das folgende Beispiel;

function f()
{//begin of scope f
  var foo='hello'; //foo is declared in scope f
  for(var i=0;i<2;i++){//i is declared in scope f
     //the for loop is not a function, therefore we are still in scope f
     var bar = 'Am I accessible?';//bar is declared in scope f
     console.log(foo);
  }
  console.log(i);
  console.log(bar);
}//end of scope f

Aufruf f druckt

hello
hello
2
Am I Accessible?

Lassen Sie uns nun betrachten wir den Fall, wir haben eine Funktion g definiert, die innerhalb einer anderen Funktion f.

function f()
{//begin of scope f
  function g()
  {//being of scope g
    /*...*/
  }//end of scope g
  /*...*/
}//end of scope f

Nennen wir f die lexikalische Eltern von g.
Wie bereits erläutert, haben wir nun 2 Bereiche; der Bereich f und den Umfang g.

Aber ein Bereich ist "innerhalb" der andere Bereich, so ist der Umfang der untergeordneten Funktion Teil des Umfangs der übergeordneten Funktion? Was passiert mit den Variablen, die im Rahmen der übergeordneten Funktion; werde ich in der Lage sein Zugriff auf diese aus dem Anwendungsbereich des Kindes-Funktion?
Das ist genau das, wo Verschlüsse Schritt.

Verschlüsse

In JavaScript die Funktion g können nicht nur Zugriff auf alle Variablen, die im Rahmen g aber auch Zugriff auf alle Variablen, die im Rahmen der übergeordneten Funktion f.

Erwägen;

function f()//lexical parent function
{//begin of scope f
  var foo='hello'; //foo declared in scope f
  function g()
  {//being of scope g
    var bar='bla'; //bar declared in scope g
    console.log(foo);
  }//end of scope g
  g();
  console.log(bar);
}//end of scope f

Aufruf f druckt

hello
undefined

Schauen wir uns die Zeile console.log(foo);. An diesem Punkt sind wir im Rahmen g und wir versuchen, den Zugriff auf die variable foo erklärt wird im Rahmen f. Aber wie gesagt, bevor wir Zugriff auf jede variable, die deklariert, in einem lexikalischen übergeordnete Funktion, das ist hier der Fall; g ist die lexikalische übergeordnete f. Daher hello gedruckt wird.

Lassen Sie uns nun einen Blick auf die Linie console.log(bar);. An diesem Punkt sind wir im Rahmen f und wir versuchen, den Zugriff auf die variable bar erklärt wird im Rahmen g. bar ist nicht deklariert in den aktuellen Bereich und die Funktion g ist nicht die Muttergesellschaft von f daher bar undefined

Eigentlich können wir auch den Zugriff auf die Variablen, die in den Geltungsbereich eines lexikalischen "grand parent" - Funktion. Daher gäbe es eine Funktion h definiert, innerhalb dessen die Funktion g

function f()
{//begin of scope f
  function g()
  {//being of scope g
    function h()
    {//being of scope h
      /*...*/
    }//end of scope h
    /*...*/
  }//end of scope g
  /*...*/
}//end of scope f

dann h wäre in der Lage, Zugriff auf alle Variablen im Gültigkeitsbereich der Funktion hgund f. Dies geschieht mit Verschlüsse. In JavaScript Verschlüsse ermöglicht uns den Zugriff auf alle Variablen deklariert, die in der lexikalischen übergeordnete Funktion, die in der lexikalischen grand übergeordnete Funktion, die in der lexikalischen grand-grand-parent-Funktion, etc.
Dies kann gesehen werden als eine scope-chain; scope of current function -> scope of lexical parent function -> scope of lexical grand parent function -> ... bis zur letzten übergeordneten Funktion, keine lexikalische Eltern.

Das window-Objekt

Eigentlich die Kette hört nicht auf das Letzte übergeordnete Funktion. Es gibt noch eine Besondere Bedeutung; die globalen Bereich. Alle Variablen sind nicht deklariert in einer Funktion berücksichtigt werden, die im globalen Gültigkeitsbereich deklariert. Die Globale Reichweite hat zwei Spezialitäten;

• alle Variablen im globalen Gültigkeitsbereich deklariert ist, zugänglich überall
• die deklarierten Variablen in den globalen Gültigkeitsbereich entsprechen die Eigenschaften der window Objekt.

Daher gibt es genau zwei Möglichkeiten, eine variable deklarieren foo im globalen Bereich; entweder, indem Sie nicht deklarieren, es in eine Funktion oder durch das setzen der Eigenschaft foo des window-Objekts.

Beide versuche verwendet Verschlüsse

Nun, da Sie haben Lesen Sie eine genauere Erklärung, vielleicht ist es nun ersichtlich, dass beide Lösungen verwendet Verschlüsse.
Aber um sicher zu sein, lassen Sie uns einen Beweis.

Erstellen wir eine neue Programmiersprache; JavaScript-Keine-Verschluss.
Wie der name schon andeutet, JavaScript-Keine-Verschluss ist identisch mit JavaScript, außer dass es keine Unterstützung Verschlüsse.

In anderen Worten;

var foo = 'hello';
function f(){console.log(foo)};
f();
//JavaScript-No-Closure prints undefined
//JavaSript prints hello

Okay, mal sehen, was passiert mit der ersten Lösung mit JavaScript-Keine-Verschluss;

for(var i = 0; i < 10; i++) {
  (function(){
    var i2 = i;
    setTimeout(function(){
        console.log(i2); //i2 is undefined in JavaScript-No-Closure 
    }, 1000)
  })();
}

da das drucken undefined 10 mal in der JavaScript-Keine-Verschluss.

Daher die erste Lösung verwendet Schließung.

Schauen wir uns die zweite Lösung;

for(var i = 0; i < 10; i++) {
  setTimeout((function(i2){
    return function() {
        console.log(i2); //i2 is undefined in JavaScript-No-Closure
    }
  })(i), 1000);
}

da das drucken undefined 10 mal in der JavaScript-Keine-Verschluss.

Beide Lösungen verwendet Verschlüsse.

Edit: Es wird davon ausgegangen, dass die 3 code-snippets sind nicht definiert in den globalen Gültigkeitsbereich. Ansonsten werden die Variablen foo und i wäre die Bindung zu der window Objekt und damit zugänglich durch die window Objekt sowohl in JavaScript und JavaScript-Keine-Verschluss.

InformationsquelleAutor der Antwort

Sind Sie beide Verschlüsse.

Ich 'm gehen mit der Wikipedia-definition hier:

In der informatik, eine Schließung (auch lexikalische closure oder Funktion
Verschluss) ist eine Funktion oder eine Referenz auf eine Funktion zusammen mit einer
verweisen auf Umwelt—eine Tabelle speichern einer Referenz zu jedem der
nicht-lokale Variablen (auch als freie Variablen) der Funktion.
Eine Schließung—im Gegensatz zu einfachen Funktion Zeiger: ermöglicht es, eine Funktion zugreifen
diese nicht-lokalen Variablen, auch wenn Sie angerufen werden, außerhalb der unmittelbaren
lexikalischen scope.

Dein Freund Versuch deutlich wird, der diese variable idas ist nicht lokal, indem Sie seinen Wert ein und machen Sie eine Kopie speichern in die lokale i2.

Ihren eigenen Versuch geht i (die auf der call-Seite ist im Umfang), um eine anonyme Funktion, die als argument. Dies ist nicht eine Schließung, so weit, aber dann, die Funktion gibt eine weitere Funktion, die auf die gleiche i2. Da im inneren die innere anonyme Funktion i2 ist nicht eine lokale, schafft dies eine Schließung.

InformationsquelleAutor der Antwort Jon

Schließung

Verschluss ist nicht eine Funktion, und nicht ein Ausdruck. Es muss gesehen werden als eine Art 'Schnappschuss' von den verwendeten Variablen außerhalb der functionscope und innerhalb der Funktion verwendet wird. Grammatikalisch sollte man sagen: "nehmen Sie die Schließung der Variablen'.

Wieder, in anderen Worten: Eine closure ist eine Kopie von den relevanten Kontext der Variablen, auf denen die Funktion abhängt.

Einmal mehr (kehren naive): Eine Schließung ist mit Zugriff auf Variablen, die nicht als parameter übergeben.

Beachten Sie, dass diese funktionale Konzepte hängt stark von der Programmiersprache /- Umgebung Sie verwenden. In JavaScript, die Schließung hängt von lexikalischen scoping (was wahr ist in den meisten c-Sprachen).

So, die RÜCKFÜHRUNG einer Funktion ist meist der Rückkehr eine anonyme /Unbenannte Funktion. Wenn die Funktion auf Variablen zuzugreifen, die nicht als parameter übergeben und innerhalb der (lexikalischen) Umfang, einen Verschluss getroffen wurde.

So, in Bezug auf Ihre Beispiele:

//1
for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i); //closure, only when loop finishes within 1000 ms,
    }, 1000);           //i = 10 for all functions
}
//2
for(var i = 0; i < 10; i++) {
    (function(){
        var i2 = i; //closure of i (lexical scope: for-loop)
        setTimeout(function(){
            console.log(i2); //closure of i2 (lexical scope:outer function)
        }, 1000)
    })();
}
//3
for(var i = 0; i < 10; i++) {
    setTimeout((function(i2){
        return function() {
            console.log(i2); //closure of i2 (outer scope)

        }
    })(i), 1000); //param access i (no closure)
}

Alle Verschlüsse. Verwechseln Sie nicht die Punkt-Ausführung mit Verschlüssen. Wenn die 'Momentaufnahme' der Verschlüsse auf der falschen moment, können die Werte unerwartete, aber sicherlich ein Verschluss genommen!

InformationsquelleAutor der Antwort Andries

Ich schrieb vor einer Weile, mich daran zu erinnern, was für ein Verschluss ist und wie es funktioniert in JS.

Eine closure ist eine Funktion, die, wenn Sie aufgerufen wird, verwendet der Bereich, in dem es deklariert wurde, wird nicht der Umfang, in dem es aufgerufen wurde. In javaScript sind alle Funktionen Verhalten sich wie diese. Variable Werte in einem Umfang bestehen, solange es eine Funktion gibt, die noch Punkte. Die Ausnahme von der Regel ist 'dies' bezieht sich auf das Objekt, dass die Funktion im inneren, wenn es aufgerufen wird.

var z = 1;
function x(){
    var z = 2; 
    y(function(){
      alert(z);
    });
}
function y(f){
    var z = 3;
    f();
}
x(); //alerts '2' 

InformationsquelleAutor der Antwort Nat Darke

Ich würde gerne meine Beispiel und eine Erklärung über Verschlüsse. Ich machte ein python-Beispiel, und zwei Figuren, um zu demonstrieren, stack-Staaten.

def maker(a, b, n):
    margin_top = 2
    padding = 4
    def message(msg):
        print('\n’ * margin_top, a * n, 
            ' ‘ * padding, msg, ' ‘ * padding, b * n)
    return message

f = maker('*', '#', 5)
g = maker('', '♥’, 3)
…
f('hello')
g(‘good bye!')

Die Ausgabe dieses Codes würde wie folgt Aussehen:

*****      hello      #####

      good bye!    ♥♥♥

Hier sind zwei zahlen, um zu zeigen, stacks und der Verschluss angebracht, um den function-Objekt.

wenn die Funktion zurückgibt maker

wenn die Funktion aufgerufen wird später

Wenn die Funktion aufgerufen wird durch einen parameter oder eine nichtlokale variable, der code muss lokale Variablen wie margin_top, Polsterung sowie eine, b, n. Um sicherzustellen, dass die Funktion code zu arbeiten, der stack-frame der maker-Funktion, die war fortgegangen, vor langer Zeit zugänglich sein sollte, was ist gesichert in der Schließung können wir, zusammen mit der Funktion message-Objekt.

InformationsquelleAutor der Antwort Eunjung Lee