What is the difference between global variables and window object attributes?

Question

I am a bit confused by the JavaScript window object. To get started, consider the following two declarations:

var imglobal = "I'm Global"; window.imglobal = "I'm Global"; 

As I understand it, that would be exactly the same (right?). In both cases, it may be available as "imglobal" or "window.imglobal". I do not understand why var declares local variables, the following does not work:

 function imafunc() { var imavar = "I'm a variable"; window.alert(imafunc.imavar); } 

So why the following?

 var imavar = "I'm a variable"; window.alert(window.imavar); 

I came across this while using GWT; it seems that you always need to explicitly refer to the window object ($ wnd there) there, probably because it is not a "real" window object, but some kind of sandbox.

It gets even more confusing with functions, I know three ways to declare them:

 var myfunc = function() { window.alert("Hello, World!"); } window.myfunc = function() { window.alert("Hello, World!"); } function myfunc() { window.alert("Hello, World!"); } 

Is there any technical difference between these three approaches?

Answer 1

About your observation:

I came across this while using GWT; it seems that you always need to explicitly refer to the window object ($ wnd there) there, probably because it is not a "real" window object, but some kind of sandbox.

The reason you will always need to prefix your variables and functions with $ wnd in GWT JSNI is to provide access to the variable from the window area (main page). This is because JSNI runs inside the iframe, so any variable without the $ wnd qualifier will be resolved within the iframe area, not the window area that you intended.

Answer 2

There are no differences between global variables and window properties (at least not so much;))

The final scope of the scope chain for each function is the window object. Therefore, each property of the window object is available in any function without directly specifying window .

Update:

I do not understand why var declares local variables, the following does not work:

  function imafunc() { var imavar = "I'm a variable"; window.alert(imafunc.imavar); } 

You cannot access imafunc.imavar because it is not a property of a function. imavar is a property of the activation object that is created after the function is executed and is the "first scope" in the scope chain. You cannot access it directly.

Answer 3

Btw, for your function to work, you must make imavar a property of the function:

 function imafunc() { this.imavar = "I'm a variable"; window.alert(imafunc.imavar); } 

The difference between your three functions is that only the third can call before the declaration in the code, the rest are available only up to the assigned variable, since they are nameless expressions of functions.

 myfunc1() and myfunc2() //throws an error cause it isn't declared right now myfunc3()//will alert(Hello, World!) var myfunc1 = function() { window.alert("Hello, World!"); } window.myfunc2 = function() { window.alert("Hello, World!"); } function myfunc3() { window.alert("Hello, World!"); } myfunc1()//will alert(Hello, World!) myfunc2()//will alert(Hello, World!) 

http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/