Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

JavaScript Hoisting erklärt

by
Difficulty:BeginnerLength:ShortLanguages:

German (Deutsch) translation by Denise Thieme (you can also view the original English article)

Das heutige Kurzvideo dient als Antwort auf eine auf Twitter gestellte Frage, die sich um das Thema JavaScript "Hoisting" dreht. Was ist das? Wie funktioniert es? Was muss ich darüber wissen? All das wird in diesem Basis-Kurs für Anfänger besprochen.


Kompletter Screencast

 

"Hoisting" erklärt

Schaue dir den folgenden Code an:

Okay, natürlich wird der Alert "my value" anzeigen. Das ist offensichtlich; aber bleib' noch ein bisschen dran. Lass' uns als Nächstes eine Funktion erstellen, die denselben Wert anzeigt.

Okay, okay. Immer noch offensichtlich, ich weiß. Jetzt lass' uns mal ein bisschen Sand ins Getriebe schütten und in dieser anonymen Funktion eine lokale Variable mit demselben Namen erstellen.

Hm? Warum zeigt der Alert jetzt undefined an? Obwohl wir eine neue Variable deklariert haben, befindet sie sich immer noch unter dem Alert; deswegen sollte das keinen Effekt haben, richtig? Falsch.


Variablendeklarationen werden "gehoisted", also wie eine Fahne nach oben gehisst.

Innerhalb ihres aktuellen Scopes wird die Variable im Hintergrund nach oben gezogen, unabhängig davon, wo sie deklariert worden ist. Jedoch wird nur die Deklaration gehoisted. Wenn die Variable auch noch initialisiert wurde, wird der aktuelle Wert an oberster Stelle des Scopes initial auf undefined gesetzt.

Okay, lass' uns den Unterschied zwischen den beiden Begriffen Deklaration und Initialisierung näher erläutern. Setze folgende Zeile voraus: var joe = 'Klempner';

Deklaration
Initialisierung

Jetzt, da wir die Begrifflichkeiten verstehen, können wir leichter begreifen, was unter der Haube passiert. Schaue dir diese erfundene Funktion an.

Deklariere alle Variablen zu Beginn.

Denk daran, dass das oben gezeigte Beispiel keine gute Praxis ist. Nichtsdestotrotz werden all diese Variablendeklarationen im Hintergrund - egal wo sie im Scope der Funktion auftauchen - an oberste Stelle gehoisted, in etwa so:


Aha-Moment

Wenn wir uns jetzt noch einmal diesen verwirrenden undefined Code-Schnipsel von weiter oben anschauen:

Sollte es jetzt einen Sinn ergeben, warum myvar undefined anzeigt. Wie wir gelernt haben, wurde die lokale Variable myvar automatisch an oberste Stelle des Scopes der Funktion  - über den Alert - gehoisted, sobald sie deklariert wurde. Das bedeutet, dass die Variable schon deklariert worden ist bevor der Alert angezeigt wurde; da Initialisierungen hingegen nicht gehoisted werden, ist der Wert der Variable: undefined.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.