JavaScript global object, execution contexts & closures

The global object,
execution contexts &
closures
in
JavaScript
© Hans de Rooij
hdr.is-a-geek.com

Introduction
● Even after studying JavaScript for quite some
time three subjects remained elusive;
– the global object
– execution contexts &
– closures
● Then I happened to stumble upon a great
article by Dmitry Soshnikov
– Read the full article (http://bit.ly/1jDSFBh)

Why these slides?
● Dmitri's article is great but, in my modest
opinion, can be challenging because of the
high information density
● Furthermore, although the article contains
illustrations, I wanted more visual aides to
help me understand the concepts at hand
● So this presentation is all about how I read
the article and the Visio diagrams I created
to help me understand the JavaScript global
object, execution contexts and closures

JavaScript global object
● Dimitri provides the following definition for the
JavaScript global object;
The global object is the object which is created
before entering any execution context; this object
exists in a single copy, its properties are
accessible from any place in the program and the
life cycle of the global object ends when the
program ends

● Global object build-ins;
– global properties like undefined, Infinity and NaN
– global functions like isNaN(), parseInt() and eval()
– constructor functions like Object(), Array(), ...
– global singleton objects like Math and JSON
● The properties of the global object are not
reserved words but deserve to be treated as
such

● To retrieve a reference to the global object it's
always possible to use;
var global = (function() {return this;})();
● In browsers the object reference window is
the global object's delegate
● The following is true in the global context;
– isNaN === global.isNaN; (only after above assignment)
– isNaN === window.isNaN; (when run in a browser)
– isNaN === this.isNaN; (more on this, pun intended, later)

JavaScript execution context
● Every bit of JavaScript code is evaluated in an
execution context (EC for short)
● When the JS engine begins executing code, it
first enters the global execution context
● An EC has a set of properties to facilitate the
processing of its associated code

● Elements of a JavaScript program runtime

● Program runtime in case a function f() is
declared besides variable a
● Please note that, in this example, function f()
is not invoked!
* For more on function
declaration click here

● There are two main types of JavaScript code;
– global code
– function code
● There is only one global context and may be
many instances of function contexts
● Every function invocation creates a separate
function execution context

JavaScript EC stack
● JavaScript program runtime can be visualized
as an execution context stack
● The top of the stack is the active context

JavaScript EC stack
● Program runtime immediately before function
invocation

JavaScript EC stack
● Program runtime while processing the code of
function f

JavaScript scope chain
● A scope chain is a list of objects which is
searched for identifiers that appear in code
● A variable object is a container of data
associated with the execution context
● In the global context the variable object is the
global object
● An activation object is created every time a
function is invoked
● The activation object is then used as the
variable object of the function context

● Resolving variable b in function f

● Resolving variable a in function f

JavaScript closures
● Closures are functions that have access to
variables from another function's scope
● In JavaScript closures are most often created
using nested functions
● If a nested function (example ret_f) is returned
from another function (example times_x) and
references variables from the parent context
(example var x) then this function retains a
reference to the parent's scope as it was at
the moment of instantiation of the function

Addendum: this
● The value of this is a property of the
execution context
● The value of this is set when entering an
execution context and cannot be changed
● The value of this never participates in the
identifier resolution process
– i.e. a this reference in JS code is immediately
resolved as a property of the active execution
context without a scope chain lookup

Addendum: this
● In the global context this refers to the global
object
● In a function context;
– the this value may be different with every single
function call
– the this value of an EC depends on the form of
the call expression
– In strict mode functions invoked as functions
(rather than as methods) always have a this
value of undefined

Addendum: this
var global = (function() {return this;})();
var a = 3;
var obj_1 = {a: 4, f: func};
var obj_2 = {a: 5};
function sThis(tp) {
if(tp === global) {return "Global object";}
else if(tp === obj_1) {return "Object obj_1";}
else if(tp === obj_2) {return "Object obj_2";}
else {return "Hmmm ... ";}
}
function func() {
alert(this.a + ", " + sThis(this));
}
func(); //3, Global object
obj_1.f(); //4, Object obj_1
func.call(obj_2); //5, Object obj_2

Conclusion
● I highly recommend reading Dmitry Soshnikov
article on the global object, execution contexts,
closures and this
● This article helped me understand these
concepts and, as a result, improved my
JavaScript skills in general
● I hope this presentation and the included Visio
diagrams help you with your study of the above
mentioned topics
© Hans de Rooij hdr.is-a-geek.com

JavaScript global object, execution contexts & closures

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to JavaScript global object, execution contexts & closures

Similar to JavaScript global object, execution contexts & closures (20)

Recently uploaded

Recently uploaded (20)

JavaScript global object, execution contexts & closures