JavaScriptExecution Context (EC)        Closures     "this" keyword ...and other demons
Some key concepts● JS is a high-level programming language● Executed at runtime● Weakly typed● Prototype-based   ○ Class-l...
Whats going on here?function outerFunc(externalArg) {    var localVar = 100;    function innerFunc(innerArg) {        loca...
Execution Context MaximsAll the JS code runs within an   JS Code is encapsulatedExecution Context.               within a ...
Execution Context MaximsThe default Execution Context   Each function( )is the window Object.           invocation has an ...
Execution Context MaximsIf a nested function( )is       When the control returns tocalled a new EC is created      the ori...
Activation Object● Execution Context creates an : Activation Object  ○ Behaves as an JS Object with properties  ○ But has ...
Variable Instantiation● Prepare the var, function(arg)declarations and  arguments to be accessible during execution   ○ va...
The Scope● Each Execution Context has a Scope● A Scope is an Activation Object   ○ Part of the var Object● Scopes can be c...
Variable Resolution● Every time a var is called the interpreter will try to resolve it● It resolves it against the Scope o...
Textbook definition of Closures        A "closure" is an expression (typically a        function) that can have free varia...
ClosuresIf an Object (var) has no     Unless... we create a closureremaining references oncethe execution ends, it gets   ...
Whats going on here? Closure!function outerFunc(externalArg) {    var localVar = 100;    function innerFunc(innerArg) {   ...
Another Closure examplefunction say778() {    var num = 777;    var sayAlert = function() {        alert(num);    }    num...
The "this" keyword● Gets assigned along every new Execution Context● It always refers to the Object that the containing fu...
Closures in jQuery$(function() {    var anchors = $(a);    anchors.each(function(i, e) {        var self = $(this);       ...
Upcoming SlideShare
Loading in …5
×

JavaScript Execution Context

2,424 views

Published on

Every bit of JavaScript code runs inside an Execution Context. This key principle is the base of the closures. Mastering closures is key when writing JS code and apps.

Published in: Technology

JavaScript Execution Context

  1. 1. JavaScriptExecution Context (EC) Closures "this" keyword ...and other demons
  2. 2. Some key concepts● JS is a high-level programming language● Executed at runtime● Weakly typed● Prototype-based ○ Class-less ○ Inheritance through cloning of objects then... ○ Delegation from the prototypevar globant = {arg: 1500, uru: 150, col: 50};var agency = {world: 1800};agency.__proto__ = globant;alert(agency.arg);alert(agency.world);
  3. 3. Whats going on here?function outerFunc(externalArg) { var localVar = 100; function innerFunc(innerArg) { localVar += 100; return (externalArg + innerArg + localVar); } return innerFunc;}var globalVar = outerFunc(200);alert(globalVar(300));alert(globalVar(300));globalVar = outerFunc(200);alert(globalVar(300));
  4. 4. Execution Context MaximsAll the JS code runs within an JS Code is encapsulatedExecution Context. within a set of Objects & properties. Execute code!
  5. 5. Execution Context MaximsThe default Execution Context Each function( )is the window Object. invocation has an associated Execution Context.
  6. 6. Execution Context MaximsIf a nested function( )is When the control returns tocalled a new EC is created the original EC it is availableand the execution enters that for garbage collection exceptcontext until the when we create a closure.function( ) returns. Thus, running JavaScript code generates a: Stack of Execution Contexts
  7. 7. Activation Object● Execution Context creates an : Activation Object ○ Behaves as an JS Object with properties ○ But has NO prototype and cannot be referenced ○ Serves to store call( )arguments & var declarations ○ Lets not care about this Okay
  8. 8. Variable Instantiation● Prepare the var, function(arg)declarations and arguments to be accessible during execution ○ var globant; ○ var rock = function(arg){ alert(rock)};● Initially assigned null properties or undefined values● They become named properties of the var (Activation) Object● The instantiated var will be interpreted against the scope of the current Execution Context Scope? Wait for it...
  9. 9. The Scope● Each Execution Context has a Scope● A Scope is an Activation Object ○ Part of the var Object● Scopes can be chained by the JS interpreter● The Scope chain is a native property of every function( )declaration
  10. 10. Variable Resolution● Every time a var is called the interpreter will try to resolve it● It resolves it against the Scope of the current EC● It will continue upwards to the next EC until the window● If its not found it will return undefined● This is also a Scope chain
  11. 11. Textbook definition of Closures A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).
  12. 12. ClosuresIf an Object (var) has no Unless... we create a closureremaining references oncethe execution ends, it gets ● A closure is the localcollected by the garbage variables for a function -collector kept alive after the function has returned. ● A closure is an Execution Context which is not de- allocated when the function returns.
  13. 13. Whats going on here? Closure!function outerFunc(externalArg) { var localVar = 100; function innerFunc(innerArg) { localVar += 100; return (externalArg + innerArg + localVar); } return innerFunc;} outerFunc( ) returns a reference to innerFunc( )var globalVar = outerFunc(200); We declare a var that runs &alert(globalVar(300)); holds whatever outerFunc( )alert(globalVar(300)); returnsglobalVar = outerFunc(200); When we call globalVar(300)alert(globalVar(300)); again, we still have access to local var defined in outerFunc( )
  14. 14. Another Closure examplefunction say778() { var num = 777; var sayAlert = function() { alert(num); } num++; return sayAlert;}var sayNumber = say778();sayNumber();alert(sayNumber);
  15. 15. The "this" keyword● Gets assigned along every new Execution Context● It always refers to the Object that the containing function( ) is a method offunction redColor() { this.color = red;}redColor();alert(redColor.color); //shows "undefined"alert(window.color); //shows "red"
  16. 16. Closures in jQuery$(function() { var anchors = $(a); anchors.each(function(i, e) { var self = $(this); if($(this).text() !== Contact me) { $(this).click(function(e) { var that = $(this); that.css({textDecoration : underline}); self.css({color : red}); setTimeout(function(e) { anchors that.css({color : blue}); }, 1000); }); } });});

×