JavaScript Advanced st edition Guide 1

/ AjaxUI Lab / Ajax UI1 /

2010 NHN CORPORATION

Part 1
1 2 3

Part2
1 2 3 [scope]

Part3 - this Part4

1 2 Activation Object Variable Object

Part5
1 2 3 4 5

Part 6
1 2

Part7
1 2 3 4 5 Class Structure Function(Class) Declare Classical Inheritance Prototypal Inheritance Object-oriented

Part I

Declare function
Function Expression Function Literals Function Constructor

Function Definition
. Object) . Function . (Activation Function

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

Compile-time & Run-time

. (JIT) . ,

Function Expression

Function Expression

function sum(x, y) { return x + y; } sum(20, 30); //return 50

Function Literals

Function Literals
var obj = new Object(); obj.sum = function(x, y) { return x + y; } obj.sum(20, 30); //return 50

Function Constructor

Function Constructor

var sum = new Function(x, y, return x + y;); sum(20, 30); //return 50

Part 2

Function Execution I
(Activation Object) length, callee arguments arguments

arguments

(Scope) . + . ,
c this

c [scope]

Function Execution II

.( .)

Function Instantiation

. .

Function Instantiation

[s ope]

Function Instantiation
function outerFunc() { var local = 3; function innerFunc() { return local++; }; return innerFunc(); } alert(outerFunc()); //4
Global function outerFunc; outerFunc;

[scope]

Activation Object for function outerFunc local = 3, function innerFunc

[scope] Activation Object for function innerFunc

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

global context

Whats [scope]?
[s ope] . . .

Part 3
this

this
keyword this this this . this . this

this
function run(n){ this.type = background; } alert(run.type); // undefined var foo = run; alert(type=+foo.color); //type=undefined

this
this
.

this

this .

Part 4

Definition
ECMA-262 . . . . (Window) , ECMAScript

Activation Object

prototype

Variable Instantiation
EMCA (Variable Object) .

. , . ,

Variable Instantiation
function outerFunc(x) { var local = 3; function innerFunc(y) { return local+y; }; return innerFunc(x); } alert(outerFunc());
outerFunc context
outerFunc Activation Object arguments callee length local innerFunc [scope]

Activation Object == Variable Object

arguments

Whats happen
activation object
assign arguments
Global function outerFunc; outerFunc; outerFunc context
outerFunc Activation Object

arguments Object

variable instantiation
local variable inner function definition

arguments local innerFunc [scope]

innerFunc function instantiation

function instantiation

assign [scope]
assign this keyword

Part 5

cope Chain

Top level Function

var x = 3, y = 4; function outerFunc(x) { var x = true; y = y + 1; alert(x); } alert(outerFunc(5));

Global x = 3; y = 4; function outerFn; outerFn;

Activation Object for function outerFn i = 5; x = true;

Scope chain at execution of outerFn(5) outerFn(5)

Scope Chain diagram

[scope]

Global

[scope]

...

[scope]

[scope]

Variable Resolution
var local = 3; function f4() { function f3() { function f2() { function f1() { return local; } return f1(); } return f2(); } return f3(); } alert(f4());
local is here f1.[scope] Global

f2.[scope]

...

f3.[scope]

f4.[scope]

Scope Chain Point

c [scope]c . c [scope] . . c[sc ope] . . , [s ope] (Function Object)

Part 6

Closure
// g var g5 = f(5); //g5 alert(g5()); 5

function f(x) { function g() { return x; } return g; }

// g var g1 = f(1); //g1 1 alert(g1());

Closure

Closure & Circular Reference

function outerFn(x){ x.func = function innerFn() { } }

...

var div = document.createElement("DIV"); outerFn(div);

Circular Reference

Garbage Collection
ECMAScript . . (closure) . . ,

Part 7

Object-oriented

, ,

Class Structure
function Constructor() { var privateMember; function privateMethod() { ... } this.privilegedMember = 'nhn'; this.privilegedMethod = function() { ... } return { closureFunction : function(){ return privateMember; } } } Constructor.prototype.SharedMethod = function(){ ... } var foo = new Constructor();

Constructor private privileged public closure

Class Declare
new Operator function Class .

Misunderstanding

function Class() { this.memeber_of_Class = this.memeberMethod = function(){ alert(this); } } Class();

d;

function Class() { this.memeber_of_Class = } var class = new Class();

d;

Understanding?
JavaScript Java public class JavaClass { public JavaClass() { function JSClass() { ... } } } ...

Class Declare

constructor prototype Function . .

Inheritance

Classical Prototypal

Classical Inheritance

. .

Prototypal Inheritance
. __proto__ . . . secret link

Prototypal Inheritance
function Parent(){ } function Child(){ } Child.prototype = new Parent;

new Child _ _proto_ _

new Parent _ _proto_ _

Prototypal Inheritance

foo foo

new Child foo _ _proto_ _ 2

new Parent foo _ _proto_ _ 1

Prototypal Inheritance

.
_ _proto_ _ new Child _ _proto_ _ new Parent _ _proto_ _

Object-oriented

. ,

new

Prototype . . . .

Object-oriented
Employee

Manager

WorkerBee

SalesPerson

Engineer

Object-oriented
JavaScript Java public class Employee { public String name; public String dept; public Employee() { this.name = ; this.dept = general; } }

function Employee() { this.name = ; this.dept = general; }

Object-oriented
JavaScript Java

public class Manager extends Employee { public Employee[] reports; function Manager() { public Manager() { this.reports = []; this.reports = new Employee[0]; } } Manager.prototype = new Employee; }

function WorkerBee() { this.projects = []; } WorkerBee.prototype = new Employee

public class WorkerBee extends Employee { public String[] projects; public WorkerBee(){ this.projects = new String[0]; } }

Object-oriented
JavaScript Java

public class SalesPerson extends WorkerBee { public double quota; function SalesPerson(){ public SalesPerson() { this.dept = sales; this.dept = sales; this.quota = 100; this.quota = 100.0; } } SalesPerson.prototype = new WorkerBee; } function Engineer() { this.dept = engineering; this.machine = ; } Engineer.prototype = new WorkerBee public class Engineer extends WorkerBee{ public String machine; public Engineer() { this.dept = engineering; this.machine = ; } }

Object-oriented
Employee
var rhio = new Employee; // rhio.name is // rhio.dept is general var kevin = new Manager; // kevin.name is // kevin.dept is general // kevin.reports is [] var jedi = new WorkerBee; // jedi.name is // jedi.dept is general // jedi.projects is [] var fred = new SalesPerson; // fred.name is // fred.dept is sales // fred.projects is [] // fred.quota is 100 var jane = new Engineer; // jane.name is // jane.dept is engineering // jane.projects is [] // jane.machine is

Manager

WorkerBee

SalesPerson

Engineer

Thank you.