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