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

Ein Closure ist etwas, das viele JavaScript-Entwickler ständig verwenden, aber wir halten es für selbstverständlich. Dabei ist die Funktionsweise gar nicht so kompliziert. Verstehen, wie man sie zielgerichtet einsetzt ist komplex.

In ihrer einfachsten Definition (wie bereits in anderen Antworten erwähnt) ist eine Closure im Grunde eine Funktion, die innerhalb einer anderen Funktion definiert ist. Und diese innere Funktion hat Zugriff auf Variablen, die im Bereich der äußeren Funktion definiert sind. Die häufigste Praxis bei der Verwendung von Closures ist die Definition von Variablen und Funktionen im globalen Bereich und der Zugriff auf diese Variablen im Funktionsbereich dieser Funktion.

var x = 1;
function myFN() {
  alert(x); //1, as opposed to undefined.
}
// Or
function a() {
   var x = 1;
   function b() {
       alert(x); //1, as opposed to undefined.
   }
   b();
}

Na und?

Eine Closure ist für einen JavaScript-Benutzer nichts Besonderes, bis man darüber nachdenkt, wie das Leben ohne sie aussehen würde. In anderen Sprachen werden Variablen, die in einer Funktion verwendet werden, aufgeräumt, wenn die Funktion zurückkehrt. Im obigen Beispiel wäre x ein "Null-Zeiger" gewesen, und Sie hätten einen Getter und Setter einrichten und Referenzen übergeben müssen. Hört sich nicht nach JavaScript an, oder? Danken Sie dem mächtigen Closure.

Warum sollte mich das interessieren?

Man muss nicht unbedingt über Verschlüsse Bescheid wissen, um sie zu benutzen. Aber wie andere auch schon gesagt haben, können sie gehebelt um fiktive private Variablen zu erstellen. Bis Sie private Variablen benötigen, verwenden Sie sie einfach wie bisher.

Answer 2

Ich fand Kapitel 8, Abschnitt 6, "Verschlüsse", sehr klar JavaScript: Der endgültige Leitfaden von David Flanagan, 6. Auflage, O'Reilly, 2011. Ich werde versuchen, es zu paraphrasieren.

1. Wenn eine Funktion aufgerufen wird, wird ein neues Objekt erstellt, das die lokalen Variablen für diesen Aufruf enthält.

2. Der Geltungsbereich einer Funktion hängt von ihrem Deklarationsort ab, nicht von ihrem Ausführungsort.

Nehmen wir nun eine innere Funktion an, die innerhalb einer äußeren Funktion deklariert ist und sich auf Variablen dieser äußeren Funktion bezieht. Nehmen wir weiter an, dass die äußere Funktion die innere Funktion als Funktion zurückgibt. Nun gibt es einen externen Verweis auf die Werte, die sich im Geltungsbereich der inneren Funktion befanden (was nach unseren Annahmen Werte der äußeren Funktion einschließt).

JavaScript behält diese Werte bei, da sie dank der Übergabe aus der abgeschlossenen äußeren Funktion im Geltungsbereich der aktuellen Ausführung geblieben sind. Alle Funktionen sind Abschlüsse, aber die Abschlüsse von Interesse sind die inneren Funktionen, die in unserem angenommenen Szenario die Werte der äußeren Funktionen innerhalb ihres "Gehäuses" (ich hoffe, ich verwende die Sprache hier richtig) bewahren, wenn sie (die inneren Funktionen) von den äußeren Funktionen zurückgegeben werden. Ich weiß, dass dies nicht der sechsjährigen Anforderung entspricht, aber ich hoffe, es ist trotzdem hilfreich.

Answer 3

Wenn Sie das einem sechsjährigen Kind erklären wollen, dann müssen Sie etwas sehr viel Einfacheres und KEINEN Code finden.

Sagen Sie dem Kind einfach, dass es "offen" ist, was bedeutet, dass es in der Lage ist, Beziehungen zu anderen, seinen Freunden, zu haben. Zu einem bestimmten Zeitpunkt hat er bestimmte Freunde (wir können die Namen seiner Freunde kennen), das ist ein Abschluss. Wenn man ein Bild von ihm und seinen Freunden macht, dann ist er "geschlossen" in Bezug auf seine Freundschaftsfähigkeit. Aber im Allgemeinen ist er "offen". Während seines ganzen Lebens wird er viele verschiedene Freundeskreise haben. Eine dieser Gruppen ist eine geschlossene Gruppe.

Answer 4

Ich bin mir sicher, Einstein Ich habe das nicht mit der direkten Erwartung gesagt, dass wir uns irgendwelche esoterischen Ideengeber aussuchen und Sechsjährige mit vergeblichen Versuchen überrennen, diese "verrückten" (und was für sie noch schlimmer ist - langweiligen) Dinge in ihre kindlichen Köpfe zu bekommen :) Wenn ich sechs Jahre alt wäre, würde ich solche Eltern nicht haben wollen oder keine Freundschaft mit solchen langweiligen Philanthropen schließen, sorry :)

Wie auch immer, für Babys, Verschluss ist einfach ein Umarmung Ich schätze, egal wie man es zu erklären versucht :) Und wenn man einen Freund oder eine Freundin umarmt, dann teilt man sozusagen alles, was man im Moment hat. Es ist ein Initiationsritus: Wenn du jemanden umarmst, zeigst du ihr Vertrauen und die Bereitschaft, sie viele Dinge mit dir machen zu lassen, die du nicht erlaubst und vor anderen verbergen würdest. Es ist ein Akt der Freundschaft :).

Ich weiß wirklich nicht, wie ich das einem 5-6 Jahre alten Baby erklären soll. Ich glaube auch nicht, dass sie irgendwelche JavaScript-Code-Schnipsel wie schätzen werden:

function Baby(){
    this.iTrustYou = true;
}

Baby.prototype.hug = function (baby) {
    var smiles = 0;

    if (baby.iTrustYou) {
        return function() {
            smiles++;
            alert(smiles);
        };
    }
};

var
   arman = new Baby("Arman"),
   morgan = new Baby("Morgana");

var hug = arman.hug(morgan);
hug();
hug();

Nur für Kinder:

Schließung es Umarmung

Fehler es Fliege

KISS es Knutschen! :)

Answer 5

Nachdem eine Funktion aufgerufen wurde, geht sie aus dem Geltungsbereich heraus. Wenn diese Funktion etwas wie eine Callback-Funktion enthält, dann ist diese Callback-Funktion noch im Geltungsbereich. Wenn die Callback-Funktion auf eine lokale Variable in der unmittelbaren Umgebung der übergeordneten Funktion verweist, dann erwartet man natürlich, dass diese Variable für die Callback-Funktion unzugänglich ist und undefiniert zurückgibt.

Closures stellen sicher, dass jede Eigenschaft, die von der Callback-Funktion referenziert wird, für die Verwendung durch diese Funktion zur Verfügung steht, auch wenn die übergeordnete Funktion aus dem Geltungsbereich herausgegangen sein kann.