Function Works in    JavaScript
Funny Codealert(run(10)); //?var run = true;alert(run);        //?function run(n){  return n x n;}
It’s only “Hoisted”?
Very^32 Important       Function• Definition(Expression, Declaration)• Execution(invoke)• Creation         (new) - not yet :(
Associated with        Function• this• execution context• scope(scope chain)• closure
Let’s Go!
Define function• Function Expression• Function Declaration• Function Constructor
Function Expression• Function Expression defines a function  as a part of a large expression syntax• Functions defined via F...
ECMA 5(13.0)               defines the syntax asfunction Identifieropt(FormalParametersListopt) { FunctionBody }
Function Expression       anonymous function  var foo = function(x, y) {     return x + y;  }  sum(20, 30); //return 50
Function Expression         named function  var foo = function sum(x, y) {     return x + y;  }  sum(20, 30); //return 50
Function Expression       self invoking function  (function sum(x, y) {     return x + y;  })(20,30);  sum(20, 30); //retu...
Function Declaration• Function Declaration defines a named function  variable without requiring variable assignment• Functi...
ECMA 5(13.0)               defines the syntax asfunction Identifier(FormalParametersListopt) { FunctionBody }
Function Declaration         named function  function sum(x, y) {     return x + y;  }  sum(20, 30); //return 50
Function Constructor• When Function is called as part of a  new expression, it is a constructor• It initialize the newly c...
ECMA 5(15.3)defines the syntax asFunction(p1, p2, ... ,pn, body);
Function Constructorvar foo = new Function(“x”, “y”,”return x + y;”);foo(20, 30); //return 50
What’s happen?                                                                        Globalactivation object             ...
Function Executionfunction outerFunc() {             Global  var local = 3;            function outerFunc;  function inner...
Function Execution                                 global contextfunction outerFunc() {                outerFunc  var loca...
Function Execution                                 global contextfunction outerFunc() {                outerFunc  var loca...
Function Execution                                 global contextfunction outerFunc() {                outerFunc  var loca...
Function Execution                                 global contextfunction outerFunc() {                outerFunc  var loca...
Function Execution                                 global contextfunction outerFunc() {                outerFunc  var loca...
Function Execution                                 global contextfunction outerFunc() {                outerFunc  var loca...
Function Execution                                 global contextfunction outerFunc() {                outerFunc  var loca...
Function Execution                                 global contextfunction outerFunc() {                outerFunc  var loca...
Function Execution                                 global contextfunction outerFunc() {                outerFunc  var loca...
Function Execution                                 global contextfunction outerFunc() {                outerFunc  var loca...
Function Execution        Summary I•    •           (Activation Object)    •   arguments         length, callee           ...
Function Execution           Summary II•    •            .    •                      .    •            .(            .)•  ...
Function Instantiation•    •        .    •              .    •            ‘[scope]’   .
Top level Functionvar x = 3, y = 4;                Globalfunction outerFunc(x) {       x = 3; y = 4;                      ...
Scope Chain diagram   [scope]                         Global      [scope]                ...             [scope]   [scope]
Variable Resolutionvar local = 3;function f4() {  function f3() {                                 local is                ...
Scope Chain Point•               (Function Object)                ‘[scope]‘                                         .•   ‘...
Upcoming SlideShare
Loading in …5
×

Function work in JavaScript

3,344 views

Published on

Explain Function Work in JavaScript
It's very Important
this, execution context, scope chain, closure

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,344
On SlideShare
0
From Embeds
0
Number of Embeds
2,139
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Function work in JavaScript

  1. 1. Function Works in JavaScript
  2. 2. Funny Codealert(run(10)); //?var run = true;alert(run); //?function run(n){ return n x n;}
  3. 3. It’s only “Hoisted”?
  4. 4. Very^32 Important Function• Definition(Expression, Declaration)• Execution(invoke)• Creation (new) - not yet :(
  5. 5. Associated with Function• this• execution context• scope(scope chain)• closure
  6. 6. Let’s Go!
  7. 7. Define function• Function Expression• Function Declaration• Function Constructor
  8. 8. Function Expression• Function Expression defines a function as a part of a large expression syntax• Functions defined via Functions Expressions can be named or anonymous• Function Expressions must not start with “function”
  9. 9. ECMA 5(13.0) defines the syntax asfunction Identifieropt(FormalParametersListopt) { FunctionBody }
  10. 10. Function Expression anonymous function var foo = function(x, y) { return x + y; } sum(20, 30); //return 50
  11. 11. Function Expression named function var foo = function sum(x, y) { return x + y; } sum(20, 30); //return 50
  12. 12. Function Expression self invoking function (function sum(x, y) { return x + y; })(20,30); sum(20, 30); //return 50
  13. 13. Function Declaration• Function Declaration defines a named function variable without requiring variable assignment• Function Declarations occur as standalone constructs and cannot be nested within non- function blocks• Just as Variable Declarations must start with “var”, Function Declarations must begin with “function”
  14. 14. ECMA 5(13.0) defines the syntax asfunction Identifier(FormalParametersListopt) { FunctionBody }
  15. 15. Function Declaration named function function sum(x, y) { return x + y; } sum(20, 30); //return 50
  16. 16. Function Constructor• When Function is called as part of a new expression, it is a constructor• It initialize the newly created object
  17. 17. ECMA 5(15.3)defines the syntax asFunction(p1, p2, ... ,pn, body);
  18. 18. Function Constructorvar foo = new Function(“x”, “y”,”return x + y;”);foo(20, 30); //return 50
  19. 19. What’s happen? Globalactivation object function outerFunc; assign arguments outerFunc context outerFunc Activation Object arguments Objectvariable instantiation arguments local variable definition local innerFunc innerFunc function instantiation [scope]function instantiation nested function definition assign [scope] assign this keyword
  20. 20. Function Executionfunction outerFunc() { Global var local = 3; function outerFunc; function innerFunc() { [scope] return local++; Activation Object for function outerFunc }; local = 3, function innerFunc return innerFunc();} [scope]alert(outerFunc()); //”4” Activation Object for function innerFunc
  21. 21. Function Execution global contextfunction outerFunc() { outerFunc var local = 3; outerFunc context function innerFunc() { outerFunc Activation Object local return local++; innerFunc }; [scope] return innerFunc(); innerFunc Object} innerFunc contextalert(outerFunc()); //”4” innerFunc Activation Object [scope]
  22. 22. Function Execution global contextfunction outerFunc() { outerFunc var local = 3; outerFunc context function innerFunc() { outerFunc Activation Object local return local++; innerFunc }; [scope] return innerFunc(); innerFunc Object} innerFunc contextalert(outerFunc()); //”4” innerFunc Activation Object [scope]
  23. 23. Function Execution global contextfunction outerFunc() { outerFunc var local = 3; outerFunc context function innerFunc() { outerFunc Activation Object local return local++; innerFunc }; [scope] return innerFunc(); innerFunc Object} innerFunc contextalert(outerFunc()); //”4” innerFunc Activation Object [scope]
  24. 24. Function Execution global contextfunction outerFunc() { outerFunc var local = 3; outerFunc context function innerFunc() { outerFunc Activation Object local return local++; innerFunc }; [scope] return innerFunc(); innerFunc Object} innerFunc contextalert(outerFunc()); //”4” innerFunc Activation Object [scope]
  25. 25. Function Execution global contextfunction outerFunc() { outerFunc var local = 3; outerFunc context function innerFunc() { outerFunc Activation Object local return local++; innerFunc }; [scope] return innerFunc(); innerFunc Object} innerFunc contextalert(outerFunc()); //”4” innerFunc Activation Object [scope]
  26. 26. Function Execution global contextfunction outerFunc() { outerFunc var local = 3; outerFunc context function innerFunc() { outerFunc Activation Object local return local++; innerFunc }; [scope] return innerFunc(); innerFunc Object} innerFunc contextalert(outerFunc()); //”4” innerFunc Activation Object [scope]
  27. 27. Function Execution global contextfunction outerFunc() { outerFunc var local = 3; outerFunc context function innerFunc() { outerFunc Activation Object local return local++; innerFunc }; [scope] return innerFunc(); innerFunc Object} innerFunc contextalert(outerFunc()); //”4” innerFunc Activation Object [scope]
  28. 28. Function Execution global contextfunction outerFunc() { outerFunc var local = 3; outerFunc context function innerFunc() { outerFunc Activation Object local return local++; innerFunc }; [scope] = this return innerFunc(); innerFunc Object} innerFunc contextalert(outerFunc()); //”4” innerFunc Activation Object [scope]
  29. 29. Function Execution global contextfunction outerFunc() { outerFunc var local = 3; outerFunc context function innerFunc() { outerFunc Activation Object local return local++; innerFunc }; [scope] = this return innerFunc(); innerFunc Object} innerFunc contextalert(outerFunc()); //”4” innerFunc Activation Object [scope] = outerFunc
  30. 30. Function Execution global contextfunction outerFunc() { outerFunc var local = 3; outerFunc context function innerFunc() { outerFunc Activation Object local return local++; innerFunc }; [scope] = this return innerFunc(); innerFunc Object} innerFunc contextalert(outerFunc()); //”4” innerFunc Activation Object [scope] = outerFunc
  31. 31. Function Execution Summary I• • (Activation Object) • arguments length, callee . • arguments arguments • (Scope) • . • + ‘[scope]’ . • ,
  32. 32. Function Execution Summary II• • . • . • .( .)• • .
  33. 33. Function Instantiation• • . • . • ‘[scope]’ .
  34. 34. Top level Functionvar x = 3, y = 4; Globalfunction outerFunc(x) { x = 3; y = 4; function outerFn; var x = true; y = y + 1; alert(x); Activation Object for} function outerFn i = 5; x = true;alert(outerFunc(5)); Scope chain at execution of outerFn(5)
  35. 35. Scope Chain diagram [scope] Global [scope] ... [scope] [scope]
  36. 36. Variable Resolutionvar local = 3;function f4() { function f3() { local is here function f2() { function f1() { f1.[scope] Global return local; } return f1(); f2.[scope] ... } return f2(); } return f3(); f3.[scope] f4.[scope]}alert(f4());
  37. 37. Scope Chain Point• (Function Object) ‘[scope]‘ .• ‘[scope]’ .• , ‘[scope]’ ‘ ’ .• .• ‘[scope]’ .

×