JavaScript Execution Context
Upcoming SlideShare
Loading in...5
×
 

JavaScript Execution Context

on

  • 1,415 views

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.

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.

Statistics

Views

Total Views
1,415
Views on SlideShare
1,299
Embed Views
116

Actions

Likes
0
Downloads
11
Comments
1

5 Embeds 116

http://jdmedina.com 53
http://localhost 46
http://www.jdmedina.com 10
http://192.168.0.2 4
https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript Execution Context JavaScript Execution Context Presentation Transcript

    • 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-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);
    • 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));
    • Execution Context MaximsAll the JS code runs within an JS Code is encapsulatedExecution Context. within a set of Objects & properties. Execute code!
    • Execution Context MaximsThe default Execution Context Each function( )is the window Object. invocation has an associated Execution Context.
    • 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
    • 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
    • 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...
    • 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
    • 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
    • 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).
    • 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.
    • 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( )
    • Another Closure examplefunction say778() { var num = 777; var sayAlert = function() { alert(num); } num++; return sayAlert;}var sayNumber = say778();sayNumber();alert(sayNumber);
    • 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"
    • 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); }); } });});