Date post: | 04-Jul-2015 |
Category: |
Technology |
Upload: | juan-medina |
View: | 1,045 times |
Download: | 0 times |
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