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

Closures sind ein Mittel, mit dem innere Funktionen auf die Variablen in ihrer äußeren umschließenden Funktion verweisen können, nachdem ihre übergeordneten Funktionen bereits beendet wurden.

// A function that generates a new function for adding numbers.
function addGenerator( num ) {
    // Return a simple function for adding two numbers
    // with the first number borrowed from the generator
    return function( toAdd ) {
        return num + toAdd
    };
}

// addFive now contains a function that takes one argument,
// adds five to it, and returns the resulting number.
var addFive = addGenerator( 5 );
// We can see here that the result of the addFive function is 9,
// when passed an argument of 4.
alert( addFive( 4 ) == 9 );

Answer 2

Wenn man es gut versteht, kann man es einfach erklären. Und am einfachsten ist es, wenn man es aus dem Kontext herausnimmt. Code beiseite, sogar Programmierung beiseite. Ein metaphorisches Beispiel wird es besser machen.

Stellen wir uns vor, dass eine Funktion ein Raum ist, dessen Wände aus Glas bestehen, aber es ist ein spezielles Glas, wie in einem Verhörraum. Von außen sind sie undurchsichtig, von innen sind sie durchsichtig. Es können Räume in anderen Räumen sein, und die einzige Kontaktmöglichkeit ist ein Telefon.

Wenn man von außen anruft, weiß man nicht, was drin ist, aber man weiß, dass die Leute drinnen eine Aufgabe erledigen werden, wenn man ihnen bestimmte Informationen gibt. Sie können nach draußen sehen, also können sie dich nach Dingen fragen, die draußen sind, und Änderungen an diesen Dingen vornehmen, aber du kannst von außen nicht ändern, was drinnen ist, du siehst (weißt) nicht einmal, was drinnen ist. Die Menschen in dem Raum, den du anrufst, sehen, was draußen ist, aber nicht, was in den Räumen in diesem Raum ist, also interagieren sie mit ihnen so, wie du es von außen tust. Die Menschen im Inneren der innersten Räume können viele Dinge sehen, aber die Menschen im äußersten Raum wissen nicht einmal von der Existenz der innersten Räume.

Für jeden Anruf in einem inneren Raum halten die Mitarbeiter dieses Raums die Informationen über diesen speziellen Anruf fest, und sie sind so gut darin, dass sie niemals einen Anruf mit einem anderen Anruf verwechseln.

Räume sind Funktionen, Sichtbarkeit ist der Bereich, Personen, die eine Aufgabe erledigen, sind Anweisungen, Dinge sind Objekte, Telefonanrufe sind Funktionsaufrufe, Telefonanrufinformationen sind Argumente, Anrufaufzeichnungen sind Bereichsinstanzen, der äußerste Raum ist das globale Objekt.

Answer 3

Stellen Sie sich vor, in Ihrer Stadt gibt es einen großen Park, in dem ein Zauberer namens Mr. Coder mit seinem Zauberstab, genannt JavaScript, in verschiedenen Ecken des Parks Baseballspiele eröffnet.

Natürlich gelten für jedes Baseballspiel genau dieselben Regeln und jedes Spiel hat seine eigene Anzeigetafel.

Natürlich sind die Ergebnisse eines Baseballspiels völlig unabhängig von den anderen Spielen.

Ein Abschluss ist die besondere Art und Weise, in der Mr. Coder die Wertung all seiner magischen Baseballspiele getrennt hält.

Answer 4

Pinocchio: Schließungen im Jahr 1883 (über ein Jahrhundert vor JavaScript)

Ich glaube, man kann es am besten einem 6-Jährigen mit einem schönen Abenteuer erklären... Der Teil des Die Abenteuer des Pinocchio wo Pinocchio von einem übergroßen Hundehai verschluckt wird...

var tellStoryOfPinocchio = function(original) {

  // Prepare for exciting things to happen
  var pinocchioFindsMisterGeppetto;
  var happyEnding;

  // The story starts where Pinocchio searches for his 'father'
  var pinocchio = {
    name: 'Pinocchio',
    location: 'in the sea',
    noseLength: 2
  };

  // Is it a dog... is it a fish...
  // The dogfish appears, however there is no such concept as the belly
  // of the monster, there is just a monster...
  var terribleDogfish = {
    swallowWhole: function(snack) {
      // The swallowing of Pinocchio introduces a new environment (for the
      // things happening inside it)...
      // The BELLY closure... with all of its guts and attributes
      var mysteriousLightLocation = 'at Gepetto\'s ship';

      // Yes: in my version of the story the monsters mouth is directly
      // connected to its belly... This might explain the low ratings
      // I had for biology...
      var mouthLocation = 'in the monsters mouth and then outside';

      var puppet = snack;

      puppet.location = 'inside the belly';
      alert(snack.name + ' is swallowed by the terrible dogfish...');

      // Being inside the belly, Pinocchio can now experience new adventures inside it
      pinocchioFindsMisterGeppetto = function() {
        // The event of Pinocchio finding Mister Geppetto happens inside the
        // belly and so it makes sence that it refers to the things inside
        // the belly (closure) like the mysterious light and of course the
        // hero Pinocchio himself!
        alert(puppet.name + ' sees a mysterious light (also in the belly of the dogfish) in the distance and swims to it to find Mister Geppetto! He survived on ship supplies for two years after being swallowed himself. ');
        puppet.location = mysteriousLightLocation;

        alert(puppet.name + ' tells Mister Geppetto he missed him every single day! ');
        puppet.noseLength++;
      }

      happyEnding = function() {
        // The escape of Pinocchio and Mister Geppetto happens inside the belly:
        // it refers to Pinocchio and the mouth of the beast.
        alert('After finding Mister Gepetto, ' + puppet.name + ' and Mister Gepetto travel to the mouth of the monster.');
        alert('The monster sleeps with its mouth open above the surface of the water. They escape through its mouth. ');
        puppet.location = mouthLocation;
        if (original) {
          alert(puppet.name + ' is eventually hanged for his innumerable faults. ');
        } else {
          alert(puppet.name + ' is eventually turned into a real boy and they all lived happily ever after...');
        }
      }
    }
  }

  alert('Once upon a time...');
  alert('Fast forward to the moment that Pinocchio is searching for his \'father\'...');
  alert('Pinocchio is ' + pinocchio.location + '.');
  terribleDogfish.swallowWhole(pinocchio);
  alert('Pinocchio is ' + pinocchio.location + '.');
  pinocchioFindsMisterGeppetto();
  alert('Pinocchio is ' + pinocchio.location + '.');
  happyEnding();
  alert('Pinocchio is ' + pinocchio.location + '.');

  if (pinocchio.noseLength > 2)
    console.log('Hmmm... apparently a little white lie was told. ');
}

tellStoryOfPinocchio(false);

Answer 5

Eine Closure ist eine Funktion, die Zugriff auf den übergeordneten Bereich hat, auch nachdem die übergeordnete Funktion geschlossen wurde.

var add = (function() {
  var counter = 0;
  return function() {
    return counter += 1;
  }
})();

add();
add();
add();
// The counter is now 3

Beispiel erklärt:

• Die Variable add wird der Rückgabewert einer selbstaufrufenden Funktion zugewiesen.
• Die sich selbst aufrufende Funktion wird nur einmal ausgeführt. Sie setzt den Zähler auf Null (0) und gibt einen Funktionsausdruck zurück.
• Auf diese Weise wird add zu einer Funktion. Der "wunderbare" Teil ist, dass es auf den Zähler im übergeordneten Bereich zugreifen kann.
• Dies wird als JavaScript-Schließung bezeichnet. Er ermöglicht es einer Funktion, "private" Variablen zu haben.
• Der Zähler ist durch den Anwendungsbereich der anonymen Funktion geschützt und kann nur mit der Funktion add geändert werden.

Quelle