LOTUSMS LOTUSMS - 8 days ago 5
Javascript Question

What does the window object contain?

I was exploring the

this
keyword in the global scope, and discovered that
this
in that context refers to the window.

I logged the value of
this
to the console, and saw a huge list shown in the image below.

What does the list I'm seeing contain, and how is it populated?


Answer

First, a brief definition for readers of what a lexical environment is, as well as how it relates to the global environment, and in turn how the global environment relates to the global object.


A lexical environment consists of:

  • an environment record, which stores the identifier bindings created within the scope of the environment,
  • a reference to an outer environment, and
  • references to any environments contained within.

Lexical environments inherit variable definitions declared in the environments they are contained within, and are created each time a function declaration, a block statement, or a catch clause of a try statement is evaluated. Variable definitions are not accessible outside the lexical environment they were defined in.

The following example:

  • defines a global variable using a var declaration, initialized to a function expression, which creates a new lexical environment,
  • defines a variable in the new environment, again using a var declaration, this time initialized to a string value, and
  • demonstrates that the variable is not accessible outside of the environment it is defined in:
var hello = function() {
    world = "fubar";
    console.log(world); // "fubar";
}

console.log(world); // undefined;

A global environment is a lexical environment whose outer environment reference is null, and which includes an associated global object whose properties provide some of the global environment's identifier bindings, specifically excluding variables defined using let or const declarations, as well as other possible exclusions.

var hello = "world";
console.log(hello, !!window.hello); // "world", true

let foo = "bar";
console.log(foo, !!window.foo) // "bar", false

Now, to answer your question in context:

What are these exactly? Is this a reference of all functions that can be interpreted by the browser? Like a library or documentation of functions available to me?

The properties you are seeing consist of:

  • prepopulated identifier bindings supplied by the browser - some of which are standard, others are specific to the JavaScript engine or browser implementation -
  • global variables set by scripts running on the current page, or
  • global variables set by browser extensions you may have installed.

The information contained in this answer should conform to the ECMAScript 2015 Language Specification, which also contains definitions for most of the terms used here, and I strongly encourage you to skim over that document any time you're in the mood for some light reading.

If you find a discrepancy between this answer and the ECMAScript Language Specification, please feel free to edit this answer to conform.

Comments