Fork me on GitHub

Web Development

Ein Lehrbuch für das Informatik oder Medien-Informatik Studium.

Javascript baut nicht nur auf die Traditionen der objektorientierten Programmierung auf, sondern auch auf die der Funktionalen Programmierung.

In diesem Kapitel lernen wir die Besonderheiten von Funktionen in Javascript kennen, darunter auch Closures .

Funktionen und Lebenszeit von Variablen

Nach dem Aufruf einer Funktion verschwinden ihre lokalen Variablen, bei einem neuen Aufruf sind die vorhergehenden Werte nicht mehr vorhanden:

Javascript Code Lebenszeit einer Variable in einer Funktionen

  function g( x ) {
    var b;
    console.log("beim Einstieg in g ist b = " + b );
    b = x;
    console.log("beim Ausstieg aus g ist b = " + b );
  }
  g(10);
  g(20);

  // output:
  // beim Einstieg in g ist b = undefined
  // beim Ausstieg aus g ist b = 10
  // beim Einstieg in g ist b = undefined
  // beim Ausstieg aus g ist b = 20

Die Lebenszeit einer Variable kann aber verlängert werden, wenn sie in einer inneren Funktion verwendet wird. Das nennt man eine Closure (deutsch: “Funktionsabschluss”).

Javascript Code Closure verlängert die Lebenszeit einer Variable in einer Funktionen

  function g( x ) {
    var b = x;
    return function() {
      console.log("ich bin eine Funktion und verwende b = " + b );
    }
  }
  f = g(10);
  f();
  // output: ich bin eine Funktion und verwende b = 10
  h = g(20);
  h();
  // output: ich bin eine Funktion und verwende b = 20
  f();
  // output: ich bin eine Funktion und verwende b = 10

Die Funktion f hat also immer noch zugriff auf die “alte” Variable b!

Closure kann man zum Beispiel verwenden um einen Countdown zu erzeugen:

Javascript Code Erzeuge eine Countdown-Funktion

  function create_countdown( max ) {
    var i = max+1;
    return function() {
      i--;
      return i;
    }
  } 
  top10 = create_countdown(10);
  while( i = top10() ) {
    console.log("und auf Platz " + i + " .... ");
  }