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

Question

Hi,

I'm a bit confused by JavaScript's window object. For starters, consider the following two declarations:

var imglobal = "I'm Global";

window.imglobal = "I'm Global";

As far as I understand it, this would be exactly the same (is it?) It can be accessed as "imglobal" or "window.imglobal" in both cases. I don't understand why, var declares local variables, the following doesn't work:

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

So why does the following?

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

I stumbled across this when using GWT; it appears one always has to refer to the window object ($wnd there) explicitly there, probably because it's not the "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

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

The last scope in the scope chain of each function is the window object. Therefore every property of the window object is available in any function without referencing window explicitly.

Update:

I don't understand why, var declares local variables, the following doesn't 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 the function. imavar is a property of the activation object, that gets created upon execution of the function and is the "first scope" in the scope chain. You cannot access it directly.

Answer 2

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

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

The differnt between your three functions is that only the third can called before the declaration in the code, the others are only available till the assigned to variable, cause they are nameless Function Expressions.

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/

Answer 3

About your observation:

I stumbled across this when using GWT; it appears one always has to refer to the window object ($wnd there) explicitly there, probably because it's not the "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 ensure that you are accessing the variable from the window scope (host page). This is because JSNI is run inside an iframe, hence any variable without the $wnd qualifier would resolve within the scope of the iframe and not the window scope, which you intended.