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

Funktionen, die keine freien Variablen enthalten, werden als reine Funktionen bezeichnet.

Funktionen, die eine oder mehrere freie Variablen enthalten, werden als Abschlüsse bezeichnet.

var pure = function pure(x){
  return x 
  // only own environment is used
}

var foo = "bar"

var closure = function closure(){
  return foo
  // foo is free variable from the outer environment
}

src: https://leanpub.com/javascriptallongesix/read#leanpub-auto-if-functions-without-free-variables-are-pure-are-closures-impure

Answer 2

MDN erklärt es meiner Meinung nach am besten:

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.

Ein Abschluss hat immer eine äußere Funktion und eine innere Funktion. Die innere Funktion ist der Ort, an dem die gesamte Arbeit stattfindet, und die äußere Funktion ist nur die Umgebung, die den Bereich bewahrt, in dem die innere Funktion erstellt wurde. Auf diese Weise "merkt" sich die innere Funktion einer Closure die Umgebung/den Bereich, in dem sie erstellt wurde. Das klassischste Beispiel ist eine Zählerfunktion:

var closure = function() {
  var count = 0;
  return function() {
    count++;
    console.log(count);
  };
};

var counter = closure();

counter() // returns 1
counter() // returns 2
counter() // returns 3

Im obigen Code, count wird von der äußeren Funktion (Umgebungsfunktion) beibehalten, so dass jedes Mal, wenn Sie die counter() kann die innere Funktion (Arbeitsfunktion) diesen Wert erhöhen.

Answer 3

Mir gefällt Kyle Simpsons Definition eines Abschlusses:

Schließung bedeutet, dass sich eine Funktion an ihren lexikalischen Bereich zugreifen kann, auch wenn die Funktion außerhalb ihres lexikalischen Bereichs ausgeführt wird.

Lexikalischer Bereich bedeutet, dass ein innerer Bereich auf seinen äußeren Bereich zugreifen kann.

Hier ist ein abgewandeltes Beispiel, das er in seiner Buchreihe "You Don't Know JS: Scopes & Closures" liefert.

function foo() {
  var a = 2;

  function bar() {
    console.log( a );
  }
  return bar;
}

function test() {
  var bz = foo();
  bz();
}

// prints 2. Here function bar referred by var bz is outside 
// its lexical scope but it can still access it
test();

Answer 4

Ein Abschluss ist, wenn eine Funktion geschlossen in der Weise, dass sie in einem Namespace definiert wurde, der zum Zeitpunkt des Funktionsaufrufs unveränderlich ist.

In JavaScript geschieht dies, wenn Sie:

• Definieren Sie eine Funktion innerhalb einer anderen Funktion

• Die innere Funktion wird aufgerufen, nachdem die äußere Funktion zurückgekehrt ist

  // 'name' is resolved in the namespace created for one invocation of bindMessage // the processor cannot enter this namespace by the time displayMessage is called function bindMessage(name, div) {

  function displayMessage() {
      alert('This is ' + name);
  }
  
  $(div).click(displayMessage);

  }

Answer 5

Für einen Sechsjährigen ...

Wissen Sie, was Objekte sind?

Objekte sind Dinge, die Eigenschaften haben und Dinge tun.

Eine der wichtigsten Eigenschaften von Closures ist, dass man mit ihnen Objekte in JavaScript erstellen kann. Objekte in JavaScript sind nur Funktionen und Closures, mit denen JavaScript den Wert der Eigenschaft für das Objekt speichern kann, sobald es erstellt wurde.

Die Objekte sind sehr nützlich und halten alles schön geordnet. Verschiedene Objekte können verschiedene Aufgaben erfüllen, und wenn sie zusammenarbeiten, können sie komplizierte Dinge tun.

Zum Glück gibt es in JavaScript Closures für die Erstellung von Objekten, sonst würde alles zu einem chaotischen Albtraum werden.