What’s the difference between Window and Document?
When JavaScript is executed inside the browser, the window object is the JavaScript Global object. The document object is a property of the window object.
The window object represents the browser window.
The document object represents the HTML document loaded in that window.
The window object has many useful properties like the location object and the setTimeout function.
Since the window object is the Global object, ergo, it is the end of all scope chains, you don’t have to explicitly specify it when accessing its properties…
Instead of window.setTimeout, you can just write setTimeout
Same goes with document… instead of window.document, you can just write document…
No the window object is NOT the Global object.
When JavaScript is run in a browser all variables and functions you create are properties and methods of the window object.
You can access but not change any of the properties and methods of the Global object and you can override them be defining a similarly named property or method on the window object but they are still two entirely separate objects.
window is a property of the Global object when you run JavaScript in a web browser.
True, the window object and the global object are two separate objects.
But this confuses me…
Quote from this web-page:
The global object itself can be accessed by this in the global scope.
So, at top-level, outside of any function, the this keyword references the global object.
Now, if window is not the global object, why is it then that the parseInt function (for instance) is a member of the window object rather then the global object…
This works…
var x = window.parseInt(“123”, 10);
alert(x); // alerts 123
This does not work…
var y = this.parseInt(“123”, 10); // throws a TypeError
alert(y);
Why is that?
According to the ECMAScript specification, the parseInt function is a function property of the global object.
But in the browser, parseInt is a property of the window object, and not the object referenced by the this keyword.
It’s worth mentioning that the document doesn’t refer to the <html> element, rather, it is like an outer wrapper that contains <html> The <html> tag can be accessed via document.documentElement.
The Mozilla reference states that the window object is “a global object”… Well, it doesn’t say that window is “the” global object", which makes the whole issue even more confusing.
But the window object contains the properties of the ECMAScript’s global object (for instance, parseInt), and the “original global object” (the one behind the “this” keyword) does not contain those properties…
http://javascript.crockford.com/survey.html
Even after reading that, it’s still a bit nebulous. I’d like to know in what cases “this” points to the Global Object and when not. And more than anything, if it was actually designed this way, or it just “happened” by accident.
The way it is worded makes it obvious that Douglas is not making a distinction between the window object and the Global object in that discussion and is using the term global in most cases to refer to the window object so as to keep things simple for beginners.
Since JavaScript doesn’t allow you to specify the object when referencing global properties and methods and since the window object itself is actually a method of the Global object any attempts at overriding Global properties and methods just results in a new property or method being added to the window object and you end up losing control over when the Global version and when the window version of the property or method will be used.
this does refer to the window object in certain circumstances but to the best of my knowledge can never refer to the Global object since providing a way to access the Global object that way would allow those constants defined as Global properties to be overridden and then the entire language could break since it relies on those properties remaining constant. Even creating window properties with the same names as the Global ones can potentially break the processing but at least there you have a way to revert the values back by either deleting the window version or setting its value back to match the Global version.
Nicholas Zakas has a really good description of the difference between window and Global properties in his book “JavaScript for Web Developers” (WROX).