CODEWITHSUNDEEP
javascript
LOTUSMS
LOTUSMS

Reputation: 10240

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?

Upvotes: 2

Views: 407

Answers (2)

user4639281
user4639281

Reputation:

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() {
    var world = "fubar";
    console.log(world); // "fubar";
}

console.log(world); // ReferenceError: world is not defined

The 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", "world"

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

Now, to answer your question in context:

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

The list you are seeing contains the properties of the global object, which consists 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.

Upvotes: 9

C B
C B

Reputation: 13314

These are all the functions that are part of the window object.

Think of it this way. All functions are part of an object. 'this' in running code returns the object context that the function is running in. It may be the object that the function was defined under, but 'this' can be dynamically changed in code, so more accurately its the object context that the function is running in.

window is the global object in a browser, so when you're not inside a function that is part of a sub-object to window, you are in the window object context.

for instance,

var o = { test: function(){ alert(this) } }
o.test();

will alert the o object, not window.

You can call functions directly that are in the same context, which is why you can type Infinity in the console, and it returns Infinity which is part of window.

JavaScript will also look up parent objects (window in this case) to the declared object as well, so in your browser console, this works:

var o = { test: function(){ alert(Infinity) } }
o.test();

Upvotes: -1

Related Questions