JavaScript Execution Context
-
Upload
juan-medina -
Category
Technology
-
view
1.049 -
download
0
description
Transcript of JavaScript Execution Context
![Page 1: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/1.jpg)
JavaScript
Execution Context (EC)Closures
"this" keyword...and other demons
![Page 2: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/2.jpg)
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);
![Page 3: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/3.jpg)
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));
![Page 4: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/4.jpg)
Execution Context Maxims
All the JS code runs within an Execution Context.
JS Code is encapsulated within a set of Objects & properties.
code!Execute
![Page 5: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/5.jpg)
Execution Context Maxims
The default Execution Context is the window Object.
Each function( ) invocation has an associated Execution Context.
![Page 6: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/6.jpg)
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
![Page 7: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/7.jpg)
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
![Page 8: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/8.jpg)
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...
![Page 9: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/9.jpg)
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
![Page 10: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/10.jpg)
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
![Page 11: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/11.jpg)
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).
![Page 12: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/12.jpg)
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.
![Page 13: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/13.jpg)
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( )
![Page 14: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/14.jpg)
Another Closure example
function say778() { var num = 777; var sayAlert = function() { alert(num); } num++; return sayAlert;} var sayNumber = say778();sayNumber();
alert(sayNumber);
![Page 15: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/15.jpg)
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"
![Page 16: JavaScript Execution Context](https://reader034.fdocuments.us/reader034/viewer/2022052622/5597faa11a28ab8c238b4631/html5/thumbnails/16.jpg)
$(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