JavaScript Closures leicht und klar erklärt

Mit der Kategorie “LUKE” – “leicht und klar erklärt” möchte ich eine neue Serie starten, in der ich einige Dinge beschreibe / erkläre. Im Gegensatz zu den meisten online Ressourcen werde ich es aber immer möglichst leicht halten und möchte klar und eingehend erklären, was Sache ist. Man könnte sagen, ich versuche es mit dem Wortschatz eines Anfängers und nicht mit dem eines Profis zu erklären. Wörter, die eventuell trotzdem unklar sein könnten, versuche ich möglichst immer mit einem Link zu hinterlegen, der diesen Begriff dann näher erklärt. Häufig findet man hinter Begriffen in Klammern “()” auch den Fachbegriff.

Als Eröffnungsthema der Kategorie nehme ich die Closures. Ein Closure (engl. Abschluss) ist in JavaScript ein Rückgabewert einer Funktion. Dieser Rückgabewert wiederum ist auch eine Funktion. Ein Closure ist also eine Funktion, die von einer Funktion zurückgegeben wird. Das besondere an dieser Funktion ist, dass sie quasi die Zeit einfrieren kann. Sie merkt sich ihre Umgebung (Context) zum Erstellungszeitpunkt und kann auf diese später wieder zugreifen, obwohl die Umgebung eigentlich nicht mehr existiert.  Wenn eine Funktion ihr Ende erreicht hat wird alles von ihr bekannte durch den Müllsammler (Garbage Collector) weggeräumt. Seht euch folgendes Beispiel an:

var noClosure = function () {
    var a = a || 1;
    var b = b || 2;
    b = b + 1;
    return a + b;
}
console.log(noClosure());
console.log(noClosure());
console.log(noClosure());
console.log(noClosure());
 
= 4
= 4
= 4
= 4

Wenn die Funktion “noClosure” aufgerufen wurde, gibt sie am Ende das Ergebnis von “a + b” zurück. Nachdem sie das getan hat, existieren die Variablen im Programm nicht mehr, weil Sie für den Müllsammler freigegeben wurden.* So können wir also auch nie wieder auf einen Wert, der in der Funktion lebte zurückgreifen. Die Variablen “a” und “b” müssen immer neu belegt werden, da der return aus “a + b” sonst schief gehen würde. Im Context existieren a und b somit nicht. Würde der Inhalt der Funktion noch existieren, würde durch “a || 1″ a zu a zugewiesen und nicht 1.**

Schauen wir uns dagegen folgendes an:

var closure = (function() {
    var a = 1;
    var b = 2;
 
    return function () {
        b = b + 1;
        return a + b;
    }
})();
console.log(closure());
console.log(closure());
console.log(closure());
console.log(closure());
 
= 4
= 5
= 6
= 7

Hier wird der Inhalt nicht jedes mal neu erstellt. Die Variable “b” hat nach jedem Aufruf einen um 1 erhöhten Wert zugewiesen. Wir konservieren also die Werte der Variable “a” und “b” anstelle sie jedes mal neu zu erstellen.

Closures sind ne tolle Sache, damit kann man vieles wirklich wirklich gutes und nützliches machen. Zum Beispiel Caching, Module-Patterns, private Werte usw. Ich bin mir abschließend aber noch nicht ganz sicher, ob man in JS wirklich soetwas wie “private” benötigt.

* Der Garbage Collector sammelt alle Dinge auf (und gibt den davon belegten Speicher wieder frei), die nicht mehr zu erreichen sind. Nicht mehr zu erreichen sind sie, wenn sie außerhalb der Sichtweite / des Anwendungsbereichs (Scope) sind.

** Der || Operator gibt den linken Wert zurück, wenn dieser truthy ist, also zum Beispiel NICHT false, undefined, null. Aufgrund des Hoistings existiert a nie in dieser Methode. Wäre die Methode aber konserviert, würde nicht jedes mal der Kontext zurück gesetzt werden, ein Hoisting müsste ebenfalls nicht stattfinden und a würde somit existieren.

One thought on “JavaScript Closures leicht und klar erklärt

  1. Pingback: (HTML5 Canvas-)Bilder hochauflösend (Retina) darstellen | bennybennet

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>