Webmaster Forum / HTML, CSS, Scripts / JavaScript / January 2007

That's correct, |window| is the global object, so all global
variables/functions are properties on |window| and vice versa.

Assigning to window.prop specifically can be useful when you want to
dynamically create a global variable/function.

Or if you have a local variable with the same name, hiding the global
variable, accessing the global can be done via |window|.

Nickolay

I see no refactoring here because onloadListeners is not an intrinsic
event listener (window.onload is)  Someone is just making a friendly
onload dispatcher - when several functions have to be called on the
same event in some pre-defined order.

I'm not the author so I can only guess: it is a personal preference
matter I say. It would use var onloadListeners=new Array(); but nothing
criminal in the way above.

For the majority of cases you can consider it as true - because either
window.a and a will act the same.
In the reality window is a separate host object placed before Global,
where Global is always at the end of the scope chain. Of course in case
of window-less context window host object is not presented at all.
Again, for the majority of cases you may disregard this detail. It gets
very important though in some particular circumstances, say when you
want to protect your script from Greasemonkey-like programs and overall
to ensure de-maskoned environment.
<http://groups.google.com/group/comp.lang.javascript/msg/65a858c19f383df0>

P.S. I neither support nor fight Greasemonkey, magicFunction and
similar run-time content refactoring tools. Sometimes though it is
important to ensure that everything will work and look exactly as it
was intended or better do not work at all.

My saying about this matter is that, overloading the window object
with global properties is plain stupid. Even if window.aFunc is the
same as var aFunc (or function aFunc), the point is not really there ;
any implementation should be placed in their own namespace (or class).
For example, an event handler system should be implemented in a class
Object like Event, then have all properties and functions attached
directly to it.

Of course, Event would be a property of the window object, but that
ressemblance would stop there, as other attributes and properties
would all be in a specific classification. (Hence the name 'class'.)
Javascript might be an interpreted language, but it is also an object
oriented one ; programmers should think like so and stop writing
programs like if it were procedural (like BASIC).

This technique not only ensure having a better readable code (where
everything is not piled up at the same place, but in a human
comprehensive way, or hierarchy), but it also ensure expandable code
that will not break down due tu variable / function conflicts with
other third party scripts or libraries. Even if it's only for a small
project, reusable code concept save time, creates good coding habbits,
make the code well structured, etc.

Now, to come back to the original matter, you should read about
"variable context" in Javascript ; you'll notice that "var a" is not
always the same thing as "this.a", or in other words, "var
onloadListeners=new Array();" is not always the same thing as
"window.onloadListeners=new Array();" (I would personally prefer this
syntax : "window.onloadListeners=[];"). (see http://devedge-
temp.mozilla.org/library/manuals/2000/javascript/1.5/reference/
stmt.html#1066604).

If you are outside a function (or class), "var a = 1;" is the same as
"a = 1;" (hence the same as "window.a = 1;").

Inside a function, "var a = 1;" is called a local variable. Executing
only "a = 1;" inside a function will throw a warning saying that "a"
hasn't been declared. Unlike Java, accessing a class variable requires
the "this" keyword".

Here's an example script that illustrate the fonctionality :

     var test = 1;
     alert( test );   // 1

     window.test++;
     alert( test );   // 2

     this.test++;
     alert( test );   // 3

     // this is the same as var Test = function() ...
     //               or   this.Test = function() ...
     function Test() {
       this.test = 100;  // class variable
     }

     Test.prototype = {

       // this is the same as Test.prototype.printTest =
function()...
       printTest: function() {
         alert( test );    // undefined
         test++;
         alert( test );    // NaN (should be accessed with this.test)

         var test = 1;    // local variable

         alert( test );   // 1
         test++;
         alert( test );   // 2

         this.test++;
         alert( this.test );  // 101
       }
     };

     var test = new Test();
     test.printTest();

So, I hope that you see the idea behind having your functions and
methods well structured. Please code responsibly :)

-Yanick