Function work in JavaScript

1.
Function Works in JavaScript

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

3.
It’s only “Hoisted”?

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

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

6.
Let’s Go!

7.
Deﬁne function • FunctionExpression • Function Declaration • Function Constructor

8.
Function Expression • FunctionExpression deﬁnes a function as a part of a large expression syntax • Functions deﬁned via Functions Expressions can be named or anonymous • Function Expressions must not start with “function”

9.
ECMA 5(13.0) deﬁnes the syntax as function Identiﬁeropt(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 • FunctionDeclaration deﬁnes 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) deﬁnes the syntax as function Identiﬁer(FormalParametersListopt) { FunctionBody }

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

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

17.
ECMA 5(15.3) deﬁnes thesyntax 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 deﬁnition local innerFunc innerFunc function instantiation [scope] function instantiation nested function deﬁnition 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.

23.

24.

25.

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.

28.

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 varx = 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]’ .

Function work in JavaScript

More Related Content

What's hot

Similar to Function work in JavaScript

More from Rhio Kim

Recently uploaded

Function work in JavaScript