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)); alert(globalVar(300));

globalVar = outerFunc(200);alert(globalVar(300));

Execution Context Maxims

All the JS code runs within an Execution Context.

JS Code is encapsulated within a set of Objects & properties.

code!Execute

Execution Context Maxims

The default Execution Context is the window Object.

Each function( ) invocation has an associated Execution Context.

Execution Context Maxims

If a nested function( )is called a new EC is created and the execution enters that context until the function( ) returns.

When the control returns to the original EC it is available for garbage collection except when we create a closure.

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 remaining references once the execution ends, it gets collected by the garbage collector

Unless... we create a closure

● A closure is the local variables for a function - kept alive after the function has returned.

● A closure is an Execution Context which is not de-allocated when the function returns.

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

What's going on here? Closure!

outerFunc( ) returns a reference to innerFunc( )

We declare a var that runs & holds whatever outerFunc( ) returns

When we call 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"

$(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); }); } });});

Closures in jQuery