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

1. Function Works in
JavaScript

2. Funny Code
alert(run(10)); //?
var run = true;
alert(run); //?
function run(n){
return n x n;
}

3. It’s only “Hoisted”?

4. Very^32 Important
Function
• Definition(Expression, Declaration)
• Execution(invoke)
• Creation
(new) - not yet :(

5. Associated with
Function
• this
• execution context
• scope(scope chain)
• closure

6. Let’s Go!

7. Define function
• Function Expression
• Function Declaration
• Function Constructor

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. ECMA 5(13.0)
defines the syntax as
function Identifieropt(FormalParametersListopt) { FunctionBody }

10. Function Expression
anonymous function
var foo = function(x, y) {
return x + y;
}
sum(20, 30); //return 50

11. Function Expression
named function
var foo = function sum(x, y) {
return x + y;
}
sum(20, 30); //return 50

12. Function Expression
self invoking function
(function sum(x, y) {
return x + y;
})(20,30);
sum(20, 30); //return 50

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. ECMA 5(13.0)
defines the syntax as
function Identifier(FormalParametersListopt) { FunctionBody }

15. Function Declaration
named function
function sum(x, y) {
return x + y;
}
sum(20, 30); //return 50

16. Function Constructor
• When Function is called as part of a
new expression, it is a constructor
• It initialize the newly created object

17. ECMA 5(15.3)
defines the syntax as
Function(p1, p2, ... ,pn, body);

18. Function Constructor
var foo = new Function(“x”, “y”,
”return x + y;”);
foo(20, 30); //return 50

19. What’s happen?
Global
activation object function outerFunc;
assign arguments outerFunc context
outerFunc Activation Object
arguments Object
variable instantiation arguments
local variable definition local
innerFunc innerFunc
function instantiation
[scope]
function instantiation
nested function definition assign [scope]
assign this keyword

20. Function Execution
function 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. Function Execution
global context
function outerFunc() { outerFunc
var local = 3; outerFunc context
function innerFunc() { outerFunc Activation Object
local
return local++; innerFunc
}; [scope]
return innerFunc(); innerFunc Object
} innerFunc context
alert(outerFunc()); //”4” innerFunc Activation Object
[scope]

22. Function Execution
global context
function outerFunc() { outerFunc
var local = 3; outerFunc context
function innerFunc() { outerFunc Activation Object
local
return local++; innerFunc
}; [scope]
return innerFunc(); innerFunc Object
} innerFunc context
alert(outerFunc()); //”4” innerFunc Activation Object
[scope]

23. Function Execution
global context
function outerFunc() { outerFunc
var local = 3; outerFunc context
function innerFunc() { outerFunc Activation Object
local
return local++; innerFunc
}; [scope]
return innerFunc(); innerFunc Object
} innerFunc context
alert(outerFunc()); //”4” innerFunc Activation Object
[scope]

24. Function Execution
global context
function outerFunc() { outerFunc
var local = 3; outerFunc context
function innerFunc() { outerFunc Activation Object
local
return local++; innerFunc
}; [scope]
return innerFunc(); innerFunc Object
} innerFunc context
alert(outerFunc()); //”4” innerFunc Activation Object
[scope]

25. Function Execution
global context
function outerFunc() { outerFunc
var local = 3; outerFunc context
function innerFunc() { outerFunc Activation Object
local
return local++; innerFunc
}; [scope]
return innerFunc(); innerFunc Object
} innerFunc context
alert(outerFunc()); //”4” innerFunc Activation Object
[scope]

26. Function Execution
global context
function outerFunc() { outerFunc
var local = 3; outerFunc context
function innerFunc() { outerFunc Activation Object
local
return local++; innerFunc
}; [scope] = this
return innerFunc(); innerFunc Object
} innerFunc context
alert(outerFunc()); //”4” innerFunc Activation Object
[scope]

27. Function Execution
global context
function outerFunc() { outerFunc
var local = 3; outerFunc context
function innerFunc() { outerFunc Activation Object
local
return local++; innerFunc
}; [scope] = this
return innerFunc(); innerFunc Object
} innerFunc context
alert(outerFunc()); //”4” innerFunc Activation Object
[scope]

28. Function Execution
global context
function outerFunc() { outerFunc
var local = 3; outerFunc context
function innerFunc() { outerFunc Activation Object
local
return local++; innerFunc
}; [scope] = this
return innerFunc(); innerFunc Object
} innerFunc context
alert(outerFunc()); //”4” innerFunc Activation Object
[scope]

29. Function Execution
global context
function outerFunc() { outerFunc
var local = 3; outerFunc context
function innerFunc() { outerFunc Activation Object
local
return local++; innerFunc
}; [scope] = this
return innerFunc(); innerFunc Object
} innerFunc context
alert(outerFunc()); //”4” innerFunc Activation Object
[scope] = outerFunc

30. Function Execution
global context
function outerFunc() { outerFunc
var local = 3; outerFunc context
function innerFunc() { outerFunc Activation Object
local
return local++; innerFunc
}; [scope] = this
return innerFunc(); innerFunc Object
} innerFunc context
alert(outerFunc()); //”4” innerFunc Activation Object
[scope] = outerFunc

31. Function Execution
Summary I
•
• (Activation Object)
• arguments length, callee .
• arguments
arguments
• (Scope)
• .
• + ‘[scope]’
.
• ,
• ‘this’ .

32. Function Execution
Summary II
•
•
.
•
.
•
.( .)
•
•
.

33. Function Instantiation
•
•
.
•
.
•
‘[scope]’ .

34. Top level Function
var x = 3, y = 4; Global
function outerFunc(i) { x = 3; y = 4;
function outerFn;
var x = true;
y = y + i;
alert(x);
Activation Object for
} function outerFn
i = 5; x = true;
alert(outerFunc(5));
Scope chain at execution
of outerFn(5)

35. Scope Chain diagram
[scope] Global
[scope] ...
[scope] [scope]

36. Variable Resolution
var 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. Scope Chain Point
• (Function Object) ‘[scope]‘
.
• ‘[scope]’ .
• , ‘[scope]’
‘ ’ .
• .
• ‘[scope]’
.