Diese Woche möchte ich euch erklären was sich hinter den Javascript „Closures“ verbirgt. In Wirklichkeit ist dieses Thema gar nicht so schwierig, wie einen die Theorie vielleicht vermuten lässt… Und mit Beispielen ist das ganze direkt viel einfacher zu verstehen 🙂

Erst die Theorie

Sobald ihr eine verschachtelte Funktion vor euch seht, kann die innere Funktion auf die Variablen der äußeren zugreifen – this und arguments bilden dabei die Ausnahme… Bei diesem Kontext-übergreifenden Konstrukt spricht man bereits von Closures. „Kontext-übergreifende Variablen“ klingen vielleicht etwas abstrakt oder gar unlogisch, aber so funktioniert Javascript.
Die Nutzung von this ist übrigens nicht weniger verwirrend – aber darauf komme ich ein anderes mal!

Dann die Praxis

Den theoretischen Teil finde ich persönlich etwas schwierig nachzuvollziehen – ich bin eher ein Mensch der sich solche Dinge anhand von Quellcode aneignet. Und für den Fall das euch sowas auch leichter fällt habe ich hier ein relativ simples Beispiel vorbereitet:

// Closure example
var dog = function (name) {
   return {
      get_name:function () {
         return name;
      },
      speak:function () {
         return name + ' barks!';
      }
   }
};

var my_dog = dog('Hasso');

my_dog.get_name(); // returns "Hasso"
my_dog.speak(); // returns "Hasso barks!"
my_dog.name; // returns undefined

In meinem Beispiel passiert folgendes:
Wir rufen die Funktion dog auf und übergeben einen Namen als Parameter – dieser ist nun im Kontext der inneren und äußeren Funktion verfügbar. Als Rückgabe bekommen wir ein Objekt mit zwei Methoden welche auf den Namen (aus dem übergeordneten Kontext) zugreifen.

Das besondere: Die name Variable ist im Kontext verfügbar, obwohl dieser zur Laufzeit nicht mehr existieren dürfte – Schließlich arbeiten wir bei my_dog mit der Rückgabe der dog Funktion.
Daher ist es uns nicht möglich gewesen via my_dog.name auf das Attribut zuzugreifen! …Skurril, oder?

Es ist übrigens durchaus gängig diese Technik zu verwenden um private Attribute und Methoden zu simulieren!

Probiert gerne mal eigene Variationen aus und lest euch weitere Informationen (z.B. auf stackoverflow.com und Wikipedia) durch. Nächste Woche möchte dann mal etwas genauer auf das Thema this in Javascript eingehen 😉

Bis dahin wünsche ich euch eine angenehme Woche und natürlich Happy Coding!