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:
var myvar = 'my value'; alert(myvar); // my value
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.
var myvar = 'my value'; (function() { alert(myvar); // my value })();
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.
var myvar = 'my value'; (function() { alert(myvar); // undefined var myvar = 'local value'; })();
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
var joe; // the declaration
Initialisierung
joe = 'plumber'; // the initialization
Jetzt, da wir die Begrifflichkeiten verstehen, können wir leichter begreifen, was unter der Haube passiert. Schaue dir diese erfundene Funktion an.
(function() { var a = 'a'; // lines of code var b = 'b'; // more lines of code var c= 'c'; // antipattern // final lines of scripting })();
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:
(function() { var a, b, c; // variables declared a = 'a'; // lines of code b = 'b'; // initialized // more lines of code c= 'c'; // initialized // final lines of scripting })();
Aha-Moment
Wenn wir uns jetzt noch einmal diesen verwirrenden undefined
Code-Schnipsel von weiter oben anschauen:
var myvar = 'my value'; (function() { alert(myvar); // undefined var myvar = 'local value'; })();
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
.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post