Wie funktionieren die JavaScript-Schließungen?

Question

Wie würden Sie JavaScript-Schließungen jemandem erklären, der zwar die Konzepte kennt, aus denen sie bestehen (z. B. Funktionen, Variablen und Ähnliches), aber die Schließungen selbst nicht versteht?

Ich habe gesehen das Beispiel Schema auf Wikipedia angegeben, aber leider hat es nicht geholfen.

Answer 1

Die Kinder werden sich immer an die Geheimnisse erinnern, die sie mit ihren Eltern geteilt haben, auch wenn die Eltern nicht mehr da sind. weg sind. Das ist es, was Abschlüsse für Funktionen sind.

Die Geheimnisse der JavaScript-Funktionen sind die privaten Variablen

var parent = function() {
 var name = "Mary"; // secret
}

Jedes Mal, wenn Sie es aufrufen, wird die lokale Variable "name" erstellt und erhält den Namen "Mary". Und jedes Mal, wenn die Funktion beendet wird, geht die Variable verloren und der Name wird vergessen.

Da die Variablen bei jedem Funktionsaufruf neu erstellt werden und niemand sonst sie kennt, muss es einen geheimen Ort geben, an dem sie gespeichert werden. Er könnte heißen Die Kammer des Schreckens o Stapel o lokaler Geltungsbereich aber das spielt eigentlich keine Rolle. Wir wissen, dass sie da sind, irgendwo, versteckt in der Erinnerung.

Aber in JavaScript gibt es die Besonderheit, dass Funktionen, die innerhalb anderer Funktionen erstellt werden, auch die lokalen Variablen ihrer Eltern kennen und sie behalten können, solange sie leben.

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    // I can also see that "name" is "Mary"
  }
}

Solange wir uns also in der übergeordneten Funktion befinden, kann diese eine oder mehrere untergeordnete Funktionen erstellen, die die geheimen Variablen des geheimen Ortes gemeinsam nutzen.

Das Traurige ist jedoch, dass, wenn das Kind auch eine private Variable seiner übergeordneten Funktion ist, es auch sterben würde, wenn die übergeordnete Funktion endet, und die Geheimnisse würden mit ihnen sterben.

Um zu überleben, muss das Kind gehen, bevor es zu spät ist.

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    return "My name is " + childName  +", child of " + name; 
  }
  return child; // child leaves the parent ->
}
var child = parent(); // < - and here it is outside 

Und jetzt, obwohl Mary nicht mehr läuft", ist die Erinnerung an sie nicht verloren und ihr Kind wird sich immer an ihren Namen und andere Geheimnisse erinnern, die sie während ihrer gemeinsamen Zeit teilten.

Wenn Sie also das Kind "Alice" nennen, wird es antworten

child("Alice") => "My name is Alice, child of Mary"

Das ist alles, was es zu erzählen gibt.

Answer 2

Ich habe ein interaktives JavaScript-Tutorial zusammengestellt, um zu erklären, wie Schließungen funktionieren. Was ist eine Schließung?

Hier ist eines der Beispiele:

var create = function (x) {
    var f = function () {
        return x; // We can refer to x here!
    };
    return f;
};
// 'create' takes one argument, creates a function

var g = create(42);
// g is a function that takes no arguments now

var y = g();
// y is 42 here

Answer 3

Ich verstehe nicht, warum die Antworten hier so komplex sind.

Hier ist ein Abschluss:

var a = 42;

function b() { return a; }

Ja, das benutzen Sie wahrscheinlich mehrmals am Tag.

Es gibt keinen Grund zu der Annahme, dass Verschlüsse ein komplexer Design-Hack sind, um bestimmte Probleme zu lösen. Nein, bei Closures geht es nur darum, eine Variable zu verwenden, die aus einem höheren Bereich stammt aus der Perspektive, wo die Funktion deklariert (nicht ausgeführt) wurde .

Was es nun ermöglicht Sie zu tun, kann spektakulärer sein, siehe andere Antworten.

Answer 4

Eine Schließung liegt vor, wenn eine innere Funktion Zugriff auf Variablen in ihrer äußeren Funktion hat. Das ist wahrscheinlich die einfachste einzeilige Erklärung, die man für Closures bekommen kann.

Answer 5

Beispiel für den ersten Punkt von dlaliberte:

Ein Abschluss wird nicht nur erstellt, wenn Sie eine innere Funktion zurückgeben. Tatsächlich muss die einschließende Funktion überhaupt nicht zurückkehren. Stattdessen können Sie Ihre innere Funktion einer Variablen in einem äußeren Bereich zuweisen oder sie als Argument an eine andere Funktion übergeben, wo sie sofort verwendet werden kann. Daher existiert die Schließung der umschließenden Funktion wahrscheinlich bereits zu dem Zeitpunkt, zu dem die umschließende Funktion aufgerufen wurde, da jede innere Funktion Zugriff darauf hat, sobald sie aufgerufen wird.

var i;
function foo(x) {
    var tmp = 3;
    i = function (y) {
        console.log(x + y + (++tmp));
    }
}
foo(2);
i(3);