Why does the "window" object have so many nested "window" objects?

Question

For example, you could use the window object to call the alert function:

window.alert("Hello World!");

You could also use the window object within the window object:

window.window.alert("Hello World!");

Heck, you could even do this:

window.window.window.window.window.window.window.window.window.window.window.window.window.alert("Hello World!");

I know this is ridiculous and no sane developer would do this in real life but why is this possible?

Why are there so many nested window objects?

Uh, rather than "nested" it seems they are all links to the same object. Or rather a single link that you go over many times. — VLAZ, Apr 06 '19 at 06:03
Possible duplicate of [window.window in JavaScript](https://stackoverflow.com/questions/35788475/window-window-in-javascript) — adiga, Apr 06 '19 at 06:06

score 7 · Accepted Answer · answered Apr 06 '19 at 06:03

Every global variable is a property of the global object. window is global, therefore window.window must exist and reference itself:

console.log(window.window === window)

but why is this possible?

It's just a cyclic reference. The value of the property is the object itself. Simple example:

var foo = {
  bar: 42
};
foo.foo = foo;
console.log(foo.bar);
console.log(foo.foo.bar);
console.log(foo.foo.foo.bar);

You have cyclic references in the DOM as well:

var body = document.body;
console.log(body.parentNode.children[1] === body);

score 2 · Answer 2 · answered Apr 06 '19 at 06:05

They're not nested objects - they're just all the exact same object. It is (kind of) a property of itself (because all global objects are properties of the window object, and window is global...):

var myGlobal = "Hello!";
console.log(window.myGlobal == window.window.myGlobal);
console.log(window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.window.myGlobal == myGlobal);

It's called cyclic because it's infinitely nested - here's essentially how it looks:

window = {
    //All the globals and other stuff
    window: {
        //All the globals and other stuff
        window: {
            //All the globals and other stuff
            //...
        }
    }
};

Murtaza Hussain · Answer 3 · 2019-04-06T07:07:17.903

The point of having the window property refer to the object itself, was likely to make it easy to refer to the global object. Otherwise, you'd have to do a manual var window = this; assignment at the top of your script.

as describe here: window.window

The window property of a Window object points to the window object itself. Thus, the following expressions all return the same window object:

window.window
window.window.window
window.window.window.window
// ...

To create your own nested object:

myObject = {}
myObject.myObject = myObject

Why does the "window" object have so many nested "window" objects?

3 Answers3