JavaScript Thinking Global

The more time I spend working with JavaScript the more I’m continually surprised at it’s robustness as well as it’s many peculiarities.  In an effort not to re-think down the same paths again and again I thought it would be good to document some of my discoveries.  So this is the first in what I hope will be many JavaScript explorations.  Many will be highly academic (like this one), but will hopefully lead to better understanding of how the language works and can be put to very practical uses.

So to get the ball rolling… I’ve recently discovered that (in a browser host) the pre-defined window object and the unnamed global object are the same thing:

alert(this === window); // alerts: true

So global context code that sets values on this is at the same time setting the same value on the window object:

this.x = 1024;
alert(window.x); // alerts: 1024
alert(x); // alerts: 1024

As you can see in the above example, in addition to this (the global object) and window being the same thing, unqualified top-level variables are also scoped in the global object.

Another point to be made here is that window is actually a property on the global object that references the global object itself. Consider the following:

x = 1024;
alert(window.x); // alerts: 1024
alert(this.x); // alerts: 1024
alert(this.window.window.window.window.x); // alerts: 1024

So I thought I was understanding all of this until I attempted the following:

alert(this.window === window); // alerts: false in IE

I felt certain these would be the exact same object reference, but apparently not. Along the same lines I currently am not understanding the different behavior in these lines of code:

this.x; // no error
window.x; // no error
x; // ReferenceError: x is not defined

What is the difference between this.x being undefined (no error) and unqualified x being undefined? I plan to investigate and hopefully follow-up with a better explanation in a future posting. Any ideas out there?

Edit: The question about this.window not being strictly equal to window was somewhat addressed here: http://stackoverflow.com/questions/4180013/javascript-this-window-not-equal-to-window.  This turns out to be an Internet Explorer peculiarity.  In FireFox and Chrome this.window === window is true.

Edit: The question of the undeclared variable is given a little attention in this post: http://stackoverflow.com/questions/2543698/undefined-vs-window-undefined-in-javascript. Basically, x is a global var, it just happens that any global var can be accessed as though it were a property of window. Accessing an undefined property of an object returns the value of undefined, attempting to access an undeclared global variable generates an error.

Edit 6/20/11: I think a more accurate explanation for the behavior of x; versus this.x; is that when specifying the window or global (this) object we are terminating the identifier resolution process. Without the qualification the identifier resolution process continues until the scope chain is exhausted.

Advertisements
This entry was posted in development and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s