javascript global object, execution contexts & closures

The global object, execution contexts &closuresinJavaScript

Hans de Rooijhdr.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 SoshnikovRead 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

JavaScript closures

JavaScript closures

JavaScript closures

JavaScript closures

JavaScript closures

JavaScript closures

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 processi.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 objectobj_1.f(); //4, Object obj_1func.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

Software