We want to make this open-source project available for people all around the world. Please help us to translate the content of this tutorial to the language you know
alert("Hello");

// the same as
window.alert("Hello");

The same applies to other built-ins. E.g. we can use window.Array instead of Array.

  • Provides access to global Function Declarations and var variables. We can read and write them using its properties, for instance:

    var phrase = "Hello";
    
    function sayHi() {
      alert(phrase);
    }
    
    // can read from window
    alert( window.phrase ); // Hello (global var)
    alert( window.sayHi ); // function (global function declaration)
    
    // can write to window (creates a new global variable)
    window.test = 5;
    
    alert(test); // 5
  • …But the global object does not have variables declared with let/const!

    let user = "John";
    alert(user); // John
    
    alert(window.user); // undefined, don't have let
    alert("user" in window); // false
    The global object is not a global Environment Record

    In versions of ECMAScript prior to ES-2015, there were no let/const variables, only var. And global object was used as a global Environment Record (wordings were a bit different, but that’s the gist).

    But starting from ES-2015, these entities are split apart. There’s a global Lexical Environment with its Environment Record. And there’s a global object that provides some of the global variables.

    As a practical difference, global let/const variables are definitively properties of the global Environment Record, but they do not exist in the global object.

    Naturally, that’s because the idea of a global object as a way to access “all global things” comes from ancient times. Nowadays is not considered to be a good thing. Modern language features like let/const do not make friends with it, but old ones are still compatible.

    Uses of “window”

    In server-side environments like Node.JS, the global object is used exceptionally rarely. Probably it would be fair to say “never”.

    In-browser window is sometimes used though.

    Usually, it’s not a good idea to use it, but here are some examples you can meet.

    1. To access exactly the global variable if the function has the local one with the same name.

      var user = "Global";
      
      function sayHi() {
        var user = "Local";
      
        alert(window.user); // Global
      }
      
      sayHi();

      Such use is a workaround. Would be better to name variables differently, that won’t require use to write the code it this way. And please note "var" before user. The trick doesn’t work with let variables.

    2. To check if a certain global variable or a builtin exists.

      For instance, we want to check whether a global function XMLHttpRequest exists.

      We can’t write if (XMLHttpRequest), because if there’s no XMLHttpRequest, there will be an error (variable not defined).

      But we can read it from window.XMLHttpRequest:

      if (window.XMLHttpRequest) {
        alert('XMLHttpRequest exists!')
      }

      If there is no such global function then window.XMLHttpRequest is just a non-existing object property. That’s undefined, no error, so it works.

      We can also write the test without window:

      if (typeof XMLHttpRequest == 'function') {
        /* is there a function XMLHttpRequest? */
      }

      This doesn’t use window, but is (theoretically) less reliable, because typeof may use a local XMLHttpRequest, and we want the global one.

    3. To take the variable from the right window. That’s probably the most valid use case.

      A browser may open multiple windows and tabs. A window may also embed another one in <iframe>. Every browser window has its own window object and global variables. JavaScript allows windows that come from the same site (same protocol, host, port) to access variables from each other.

      That use is a little bit beyond our scope for now, but it looks like:

      <iframe src="/" id="iframe"></iframe>
      
      <script>
        alert( innerWidth ); // get innerWidth property of the current window (browser only)
        alert( Array ); // get Array of the current window (javascript core builtin)
      
        // when the iframe loads...
        iframe.onload = function() {
          // get width of the iframe window
          alert( iframe.contentWindow.innerWidth );
          // get the builtin Array from the iframe window
          alert( iframe.contentWindow.Array );
        };
      </script>

      Here, first two alerts use the current window, and the latter two take variables from iframe window. Can be any variables if iframe originates from the same protocol/host/port.

    “this” and global object

    Sometimes, the value of this is exactly the global object. That’s rarely used, but some scripts rely on that.

    1. In the browser, the value of this in the global area is window:

      // outside of functions
      alert( this === window ); // true

      Other, non-browser environments, may use another value for this in such cases.

    2. When a function with this is called in non-strict mode, it gets the global object as this:

      // not in strict mode (!)
      function f() {
        alert(this); // [object Window]
      }
      
      f(); // called without an object

      By specification, this in this case must be the global object, even in non-browser environments like Node.JS. That’s for compatibility with old scripts, in strict mode this would be undefined.

    Tutorial map

    江苏快三基本走势图带连线_江苏快3走势图

    read this before commenting…
    • You're welcome to post additions, questions to the articles and answers to them.
    • To insert a few words of code, use the <code> tag, for several lines – use <pre>, for more than 10 lines – use a sandbox (plnkr, JSBin, codepen…)
    • If you can't understand something in the article – please elaborate.