Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why do we write window.?

While adding some initialisation code to a webpage, I found myself writing window.onload = ... for the umptieth time, when a thought hit me.

The window. isn't necessary, because window is the current object. So it's optional!
But nobody writes just onload = ... and I wonder why that is.

I mean, we have no qualms about writing other things, say alert without the window. qualifier.

window.onload = function() {
  alert('Your window has loaded');
};

while in reality, alert is just as much a method of the window object as the onload is.
So, why the difference? Why do even formal websites like the W3C do this?

like image 396
Mr Lister Avatar asked Oct 23 '15 15:10

Mr Lister


People also ask

Why do we use window in JavaScript?

A global variable, window , representing the window in which the script is running, is exposed to JavaScript code. The Window interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window.

What is the use of window object?

The window object represents an open window in a browser. If a document contain frames (<iframe> tags), the browser creates one window object for the HTML document, and one additional window object for each frame.

What is DOM and window?

The window object is simply like the root of them all to which document and screen are properties of. The screen is just the user display area, document is the DOM containing all html elements, their classes and attributes. So, the window is the parent object while they are children objects.

What is $( window?

Definition of jQuery window. jQuery window object represents an open window in the browser. The window object is automatically created by the browser. Suppose our documents contain multiple frames, then the browser creates one window object for the HTML document and creates additional window objects for each frame.


3 Answers

We write window. when we want to be explicit about it. There are basically two cases when this is good form to use it:

  • properties and methods of the window object - everything that is part of the Window interface. The .onload listener you've mentioned is an example of this, things like window.scrollY, window.status, window.parent, window.open(), window.focus(), window.removeEventListener() are others.
  • creation of global properties. Assigning to window.myGlobalVar from any scope is a common JS idiom to create a global "variable". Admittedly, it is still better practise to explicitly declare it with var.

While we could "optionally" omit the window. part here, it's uncommon. Especially creation of implicitly global variables through assignment is despised, and usually seen as a mistake. So if you do it on purpose, you declare your intention by using window..

However, the first case is not always well-defined. We often do omit the window. part when the property we want to use is essentially a static, global variable, and not necessarily related to the window object even when it is formally specified on it. You seldom see anybody using document, atob(), Worker, setTimeout() or fetch() with the window. prefix, just as you don't use window.JSON.parse or window.Array for the built-in objects (although it would be valid).

For some other properties like navigator, location or alert() it is not always clear, and those are used maybe fifty-fifty without or not.

like image 140
Bergi Avatar answered Oct 19 '22 00:10

Bergi


I see following reasons:

  1. Reduce searching up the scope-chain will improve the performance slightly. This is also seen in the IIFE where window is sent as parameter to the function and inside it the local reference to the window is used.
  2. If the function/member defined on window globally is overriden in the scope, then it'll not work as expected, so referencing explicitly makes it refer to the correct function/member. This is useful to create the function/member with the same name as the global one and still able to access the global member from shadowed scope.
like image 28
Tushar Avatar answered Oct 18 '22 22:10

Tushar


Because .onload isn't exclusive to window. It can also be used, for example, as document.onload. So you define it depending on when you want your script to be executed.

like image 1
Andre Felipe Avatar answered Oct 19 '22 00:10

Andre Felipe