JavaScript Execution Context

JavaScript
Execution 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 prototype

var globant = {arg: 1500, uru: 150, col: 50};
var agency = {world: 1800};
agency.__proto__ = globant;
alert(agency.arg);
alert(agency.world);

What's 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));

globalVar = outerFunc(200);

Execution Context Maxims

All the JS code runs within an JS Code is encapsulated
Execution Context. within a set of Objects &
properties.

Execute code!


The default Execution Context Each function( )
is the window Object. invocation has an associated
Execution Context.


If a nested function( )is When the control returns to
called a new EC is created the original EC it is available
and the execution enters that for garbage collection except
context 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
○ Let's 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 it's 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).

Closures

If an Object (var) has no Unless... we create a closure
remaining references once
the execution ends, it gets ● A closure is the local
collected 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.

What's 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)); returns

globalVar = outerFunc(200); When we call globalVar(300)
alert(globalVar(300)); again, we still have access to local
var defined in outerFunc( )

Another Closure example

function 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 of

function 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);
});
}
});
});

JavaScript Execution Context

More Related Content

What's hot (20)

Similar to JavaScript Execution Context (20)

Recently uploaded (20)

JavaScript Execution Context