2014-07-01 17 views
10

Ich habe eine HTML-Seite mit dem folgenden JavaScript angehängt.JavaScript Variable undefined vs nicht definiert

alert(box); 
box = "Thinking outside the box"; 

In der Konsole I "Uncaught Reference: Box nicht definiert ist"

, wenn ich es zu ändern:

alert(box); 
var box = "Thinking outside the box"; 

Der Alarm wird aufgerufen und zeigt nicht definiert. Ich muss das erklären können, ich habe eine vage Vorstellung davon, warum das passiert. Ich weiß, dass JavaScript, wenn ich var benutze, weiß, dass die Variable dort ist, bevor die Warnung ausgeführt wird, aber ihr nicht unbedingt einen Wert zugewiesen hat ?? Bin ich weit weg? Brauchen Sie Hilfe, um dies zu verstehen.

+4

Lesen Sie über "hissen" – elclanrs

+0

Aufruf-Box, bevor Sie das Feld definiert haben, existiert es nicht, es existiert nur, wenn Sie es definieren, ob 'es' einen Wert hat oder nicht. – saj

+0

Ihr Verständnis ist ziemlich viel :) –

Antwort

9

Wenn Sie eine Variable mit var definieren, wird die Deklaration der Variablen an den Anfang des Bereichs gehisst, und somit wird die Variable für den gesamten Bereich definiert. Die Initialisierung der Variablen (Zuweisung des Anfangswerts) bleibt an der gleichen Stelle im Code.

Also, in Ihrem zweiten Beispiel, wenn Sie alert(box) tun, wurde die Variable box bereits wegen der gehobenen var Erklärung erklärt. Ihr zweites Beispiel:

alert(box); 
var box = "Thinking outside the box"; 

ist im Grunde entspricht dies (die Erklärung der box Variable an die Spitze des Anwendungsbereichs gehisst):

var box; 
alert(box); 
box = "Thinking outside the box"; 

Dies macht die box Variable deklariert (wenn auch nicht initialisiert) vor Ihrer alert(box) Aussage und damit Sie ein Ergebnis bekommen, die konsistent ist mit der Variable deklariert wird, aber noch keinen Wert (die alert() Berichte undefined das ist, was passiert, wenn die Variable existiert, wird aber noch nicht initialisiert).

Ihr erstes Beispiel nicht var verwenden und somit gibt es keine Hebe so an dem Punkt, wo Sie alert(box) tun, gibt es keine Variable überhaupt genannt box ist und somit erhalten Sie die uncaught reference error.

Es gibt viele, viele Beiträge hier auf, so dass die Details von Hebes beschreiben. Sie können eine lange Liste von ihnen hier sehen: https://stackoverflow.com/search?q=javascript+variable+hoisting wo Sie weitere Erklärungen zum variablen Heben finden.

Hinweis: Funktionsdeklarationen werden auch so einige der Beiträge werden Sie über Funktionsdeklarationen statt Variablendeklarationen finden gehisst, obwohl das Konzept ziemlich gleich ist.

+0

Ill überprüfen Sie diese Antwort als richtig in 3 Minuten. lol Danke, ich schätze die Erklärung. –

+1

Ich vermute, der Grund, warum ich Schwierigkeiten hatte, einen anderen Posten zu finden, war, weil ich den Begriff Heben nicht verstand. Jetzt finde ich viele Fragen. –

+2

@EricB - yep, manchmal müssen Sie nur das operative Suchwort kennen. – jfriend00

2

Dies hat mit variablen Hub zu tun. Das bedeutet, dass Variablendeklarationen (und allgemein Deklarationen) vor der Ausführung eines Codes verarbeitet werden. Die Deklaration einer Variablen an einer beliebigen Stelle im Code entspricht der Deklaration an oberster Stelle. Dies bedeutet auch, dass eine Variable verwendet werden kann, bevor sie deklariert wird.

Wenn Sie wie folgt vor:

alert(box) 
var box = "Thinking outside the box" 

Dies wird implizit verstanden als:

var box; 
alert(box); 
box = "Thinking outside the box" 

In Ihrem ersten Fall haben Sie keine Variablendeklarationen und daher nicht hochgezogen wird, um auf die Punktkasten ist undefined

Warum passiert das?

Als Stoyan Stefanov erklärt in seinem Buch "JavaScript Patterns", Hebe ist ein Ergebnis der Umsetzung des JavaScript-Interpreter:

For completeness, let’s mention that actually at the implementation level things are a little more complex. There are two stages of the code handling, where variables, function declarations, and formal parameters are created at the first stage, which is the stage of parsing and entering the context. In the second stage, the stage of runtime code execution, function expressions and unqualified identifiers (undeclared variables) are created. But for practical purposes, we can adopt the concept of hoisting, which is actually not defined by ECMAScript standard but is commonly used to describe the behaviour.

- Stoyan Stefanov, "JavaScript Patterns"

Als Seite zu lesen, die Verknüpfung this Artikel aus sicherer Shepherd.

+0

Dies ist eine weitere tolle Antwort und ich möchte Ihnen dafür danken, dass Sie sich die Zeit genommen haben und auf dieses großartige Buch verwiesen haben. Ich habe von dem JavaScript Patterns-Buch von Stoyan gehört und es ist auf meinem Radar, als ich mehr über JavaScript lerne. Danke für die Antwort, ich habe jfriend bereits als korrekt markiert, aber ich werde deine Antwort aufheben und nochmals danke dafür! –