Hoisting

Mit Hoisting (engl., Hochziehen) bezeichnet man das Verhalten des JavaScript-Interpreters bei der Deklaration von Variablen und Funktionen in Funktionen.

Stößt der JavaScript-Interpreter auf eine Funktion, so überprüft er zunächst in der gesamten Funktion, welche Variablen im lokalen Gültigkeitsbereich der Funktion definiert werden und welche global definiert wurden. Werden Variablendefinitionen mit lokalem Gültigkeitsbereich gefunden, so werden diese gleich deklariert, nicht aber initialisiert. Der JavaScript-Interpreter „zieht“ also sämtliche Deklarationen von Variablen im Funktionsrumpf gleich unterhalb des Kopfes der Funktion hoch (Hoisting). Die Zuweisung findet aber erst an jenen Stellen statt, wo die Variablen definiert sind.

var s = "hallo";    // globale Variable
function foo() {
    document.write(s);   // ergibt "undefined" und nicht "hallo"
    var s = "test";      // Initialisierung von 's'
    document.write(s);   // ergibt "test"
}
foo();

Der obenstehende Code wird vom JavaScript-Interpreter so ausgeführt, als wäre Untenstehendes definiert worden:

var s = "hallo";    // globale Variable
function foo() {
    var s;               // Hoisting von s, das global definierte s wird damit überdeckt
    document.write(s);   // ergibt "undefined" - jetzt wird auch klar, warum!
    s = "test";          // Zuweisung
    document.write(s);   // ergibt "test"
}
foo();

Ebenso werden die Deklaration von Funktionen nach vorne gezogen, wie das untenstehende Beispiel zeigt. Der Javascript-Interpreter schiebt die Deklaration und Implementierung(!) der Funktionsdefinition von foo ganz an den Anfang, sodass foo() sogar aufgerufen werden kann! Die Deklaration von bar wird ebenso an den Anfang verschoben, nicht hingegen die Implementierung der anonymen Funktion. Daher löst bar() einen Fehler aus.

document.write(typeof foo); // ergibt "function"
foo();                      // wird daher ausgeführt
document.write(typeof bar); // ergibt wieder "undefined" - siehe obiges Beispiel!
bar();                      // löst daher einen Fehler aus
function foo() {};          // Funktionsdefinition - Hoisting von Deklaration und Implementierung
var bar = function () {};   // literale Definition - nur Hoisting der Deklaration

Diesen Umstand kann man bei der Aufnahme von Unterfunktionen nutzen, indem man diese unterhalb der abschließenden return-Anweisung definiert.

function f(x) {
  var y = foo(x);                 // Hoisting von foo
  return y;                       // abschließendes return
  function foo(z) {return z*z};   // Funktionsdefinition unterhalb von return
}

f(2);  // ergibt 4

Hoisting tritt nicht nur innerhalb von Funktionen, sondern auch im globalen Kontext auf, jedoch sollte man die globale Definition von Variablen vermeiden.

Literatur

• Zachary Kessin: Programming HTML5 Applications Building Powerful Cross-platform Environments in JavaScript. Verlag O’Reilly Media, Sebastopol, CA 2011, ISBN 978-1-4493-9908-5.