Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript global object, execution contexts & closures


Published on

JavaScript global object, execution contexts & closures (also includes a couple of notes about this)

Published in: Software, Technology
  • Be the first to comment

JavaScript global object, execution contexts & closures

  1. 1. The global object, execution contexts & closures in JavaScript © Hans de Rooij
  2. 2. 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 (
  3. 3. 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
  4. 4. 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
  5. 5. JavaScript global object ● 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
  6. 6. JavaScript global object ● 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)
  7. 7. 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
  8. 8. JavaScript execution context ● Elements of a JavaScript program runtime
  9. 9. JavaScript execution context ● 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
  10. 10. JavaScript execution context ● 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
  11. 11. JavaScript EC stack ● JavaScript program runtime can be visualized as an execution context stack ● The top of the stack is the active context
  12. 12. JavaScript EC stack ● Program runtime immediately before function invocation
  13. 13. JavaScript EC stack ● Program runtime while processing the code of function f
  14. 14. 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
  15. 15. JavaScript scope chain ● Resolving variable b in function f
  16. 16. JavaScript scope chain ● Resolving variable a in function f
  17. 17. 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
  18. 18. JavaScript closures
  19. 19. JavaScript closures
  20. 20. JavaScript closures
  21. 21. JavaScript closures
  22. 22. JavaScript closures
  23. 23. JavaScript closures
  24. 24. 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
  25. 25. 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
  26. 26. 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; //5, Object obj_2
  27. 27. 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