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

Auch wenn es im Internet viele schöne Definitionen von JavaScript-Schließungen gibt, versuche ich, meinem sechsjährigen Freund meine Lieblingsdefinitionen von Schließungen zu erklären, die mir geholfen haben, die Schließung viel besser zu verstehen.

Was ist eine Schließung?

Eine Closure ist eine innere Funktion, die Zugriff auf die Variablen-Umfangskette der äußeren (einschließenden) Funktion hat. Die Closure hat drei Scope-Ketten: Sie hat Zugriff auf ihren eigenen Scope (Variablen, die zwischen ihren geschweiften Klammern definiert sind), sie hat Zugriff auf die Variablen der äußeren Funktion und sie hat Zugriff auf die globalen Variablen.

Eine Closure ist die lokale Variable für eine Funktion, die auch nach der Rückkehr der Funktion erhalten bleibt.

Closures sind Funktionen, die sich auf unabhängige (freie) Variablen beziehen. Mit anderen Worten: Die in der Closure definierte Funktion "merkt" sich die Umgebung, in der sie erstellt wurde.

Closures sind eine Erweiterung des Konzepts des Geltungsbereichs. Mit Closures haben Funktionen Zugriff auf Variablen, die in dem Bereich verfügbar waren, in dem die Funktion erstellt wurde.

Eine Schließung ist ein Stack-Frame, der nicht freigegeben wird, wenn die Funktion zurückkehrt. (Als ob ein "Stack-Frame" nicht auf dem Stack, sondern in einer Malloc-Datei liegen würde!)

Sprachen wie Java bieten die Möglichkeit, Methoden als privat zu deklarieren, was bedeutet, dass sie nur von anderen Methoden der gleichen Klasse aufgerufen werden können. JavaScript bietet keine native Möglichkeit, dies zu tun, aber es ist möglich, private Methoden mit Closures zu emulieren.

Ein "Abschluss" ist ein Ausdruck (in der Regel eine Funktion), der freie Variablen zusammen mit einer Umgebung haben kann, die diese Variablen bindet (die den Ausdruck "abschließt").

Closures sind ein Abstraktionsmechanismus, der es Ihnen ermöglicht, Anliegen sehr sauber zu trennen.

Verwendungszwecke von Verschlüssen:

Closures sind nützlich, wenn es darum geht, die Implementierung von Funktionen zu verbergen und gleichzeitig die Schnittstelle zu offenbaren.

Sie können das Kapselungskonzept in JavaScript mit Closures nachbilden.

Verschlüsse werden in großem Umfang verwendet in jQuery y Node.js .

Während Objektliterale sicherlich einfach zu erstellen und praktisch für die Speicherung von Daten sind, sind Closures oft die bessere Wahl für die Erstellung statischer Singleton-Namespaces in einer großen Webanwendung.

Beispiel für Verschlüsse:

Da ich davon ausgehe, dass mein 6-jähriger Freund erst vor kurzem in der Grundschule mit der Addition vertraut gemacht wurde, hielt ich dieses Beispiel der Addition zweier Zahlen für das einfachste und geeignetste, um den Abschluss zu lernen.

Beispiel 1: Der Abschluss wird hier durch die Rückgabe einer Funktion erreicht.

function makeAdder(x) {
    return function(y) {
        return x + y;
    };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

Beispiel 2: Der Abschluss wird hier durch die Rückgabe eines Objektliterales erreicht.

function makeAdder(x) {
    return {
        add: function(y){
            return x + y;
        }
    }
}

var add5 = makeAdder(5);
console.log(add5.add(2));//7

var add10 = makeAdder(10);
console.log(add10.add(2));//12

Beispiel 3: Schließungen in jQuery

$(function(){
    var name="Closure is easy";
    $('div').click(function(){
        $('p').text(name);
    });
});

Nützliche Links:

• Schließungen (Mozilla-Entwickler-Netzwerk)
• JavaScript-Schließungen mühelos verstehen

Vielen Dank für die oben genannten Links, die mir helfen, den Abschluss besser zu verstehen und zu erklären.

Answer 2

Eine Funktion wird im Bereich des Objekts/der Funktion ausgeführt, in dem sie definiert ist. Die besagte Funktion kann während ihrer Ausführung auf die Variablen zugreifen, die in dem Objekt/der Funktion definiert wurden, in dem/der sie definiert wurde.

Und nehmen Sie es einfach wörtlich.... wie der Code geschrieben ist :P

Answer 3

Von einem persönlichen Blogbeitrag :

Standardmäßig kennt JavaScript zwei Arten von Geltungsbereichen: global und lokal.

var a = 1;

function b(x) {
    var c = 2;
    return x * c;
}

Im obigen Code sind die Variable a und die Funktion b an jeder Stelle des Codes (d. h. global) verfügbar. Variable c ist nur innerhalb der b Funktionsumfang (d.h. lokal). Die meisten Softwareentwickler werden mit dieser mangelnden Flexibilität des Funktionsumfangs nicht glücklich sein, insbesondere bei großen Programmen.

JavaScript-Closures helfen bei der Lösung dieses Problems, indem sie eine Funktion an einen Kontext binden:

function a(x) {
    return function b(y) {
        return x + y;
    }
}

Hier wird die Funktion a gibt eine Funktion namens b . Seit b ist definiert in a hat er automatisch Zugriff auf alle Definitionen in a das heißt, x in diesem Beispiel. Aus diesem Grund b kann zurückkehren x + y ohne zu erklären x .

var c = a(3);

Variabel c wird das Ergebnis eines Aufrufs von a mit Parameter 3 zugewiesen. Das heißt, eine Instanz der Funktion b donde x = 3. mit anderen Worten, c ist jetzt eine Funktion, die äquivalent ist zu:

var c = function b(y) {
    return 3 + y;
}

Funktion b erinnert sich, dass x = 3 in seinem Kontext. Deshalb:

var d = c(4);

wird der Wert 3 + 4 zugewiesen d ist das 7.

Bemerkung : Wenn jemand den Wert von x (sagen x = 22) nach der Instanz der Funktion b erstellt worden ist, wird dies in b auch. Daher ein späterer Anruf bei c (4) würde 22 + 4 ergeben, also 26.

Closures können auch verwendet werden, um den Geltungsbereich von global deklarierten Variablen und Methoden zu begrenzen:

(function () {
    var f = "Some message";
    alert(f);
})();

Das obige Beispiel ist eine Schließung, bei der die Funktion keinen Namen und kein Argument hat und sofort aufgerufen wird. Der hervorgehobene Code, der eine globale Variable deklariert f schränkt den Geltungsbereich von f zum Abschluss.

Jetzt gibt es eine gemeinsame JavaScript-Caveat, wo Schließungen helfen können:

var a = new Array();

for (var i=0; i<2; i++) {
    a[i]= function(x) { return x + i ; }
}

Aus den obigen Ausführungen würden die meisten annehmen, dass Array a würde wie folgt initialisiert werden:

a[0] = function (x) { return x + 0 ; }
a[1] = function (x) { return x + 1 ; }
a[2] = function (x) { return x + 2 ; }

In Wirklichkeit wird a auf diese Weise initialisiert, da der letzte Wert von i in diesem Zusammenhang ist 2:

a[0] = function (x) { return x + 2 ; }
a[1] = function (x) { return x + 2 ; }
a[2] = function (x) { return x + 2 ; }

Die Lösung ist:

var a = new Array();

for (var i=0; i<2; i++) {
    a[i]= function(tmp) {
        return function (x) { return x + tmp ; }
    } (i);
}

Das Argument/Variable tmp enthält eine lokale Kopie des sich ändernden Wertes von i bei der Erstellung von Funktionsinstanzen.

Answer 4

Das folgende Beispiel ist eine einfache Illustration einer JavaScript-Schließung. Dies ist die Closure-Funktion, die eine Funktion mit Zugriff auf ihre lokale Variable x zurückgibt,

function outer(x){
     return function inner(y){
         return x+y;
     }
}

Rufen Sie die Funktion wie folgt auf:

var add10 = outer(10);
add10(20); // The result will be 30
add10(40); // The result will be 50

var add20 = outer(20);
add20(20); // The result will be 40
add20(40); // The result will be 60

Answer 5

Vielleicht sollten Sie eine objektorientierte Struktur anstelle von inneren Funktionen in Betracht ziehen. Zum Beispiel:

    var calculate = {
        number: 0,
        init: function (num) {
            this.number = num;
        },
        add: function (val) {
            this.number += val;
        },
        rem: function (val) {
            this.number -= val;
        }
    };

Und lesen Sie das Ergebnis aus der Variable calculate.number, wer braucht schon "return".

//Addition
First think about scope which defines what variable you have to access to (In Javascript);

//there are two kinds of scope
Global Scope which include variable declared outside function or curly brace

let globalVariable = "foo";

Wenn Sie eine globale Variable deklariert haben, können Sie sie überall in Ihrem Code verwenden, auch in Funktionen;

Lokale Bereiche, die Variablen enthalten, die nur in einem bestimmten Teil Ihres Codes verwendet werden können:

Wenn Sie eine Variable in einer Funktion deklarieren, können Sie nur innerhalb der Funktion auf die Variable zugreifen.

function User(){
    let name = "foo";
    alert(name);
}
alert(name);//error

//Block scope is when you declare a variable within a block then you can  access that variable only within a block 
{
    let user = "foo";
    alert(user);
}
alert(user);
//Uncaught ReferenceError: user is not defined at.....

//A Closure

function User(fname){
    return function(lname){
        return fname + " " lname;
    }
}
let names = User("foo");
alert(names("bar"));

//When you create a function within a function you've created a closure, in our example above since the outer function is returned the inner function got access to outer function's scope