1

Advanced JavaScriptAdvanced JavaScript

Alex Cheng (CHENG Fu)

2

About Me

• Front-end engineer• Web 2.0 enthusiast

• Located in Beijing, China

• My personal website (Chinese)– http://www.cheng-fu.com

• Email : alexcheng1982@gmail.com• Twitter : alexcheng1982

3

Those NOT Included

• Document Object Model

• Browser Object Model

• JavaScript Libraries

• Built-in Objects– Array, Date, RegExp

4

How the value of obj.myVar get resolved?

5

Prototype Chain

• Each object has a special property called prototype.

• Value of this property is an object reference points to another object.– The second object can has its prototype point

s to another object.

• A prototype chain is formed in this way.• An identifier is resolved by searching upwa

rds in the prototype chain.

6

Search for an Identifier

Find the propertyin current object

Return the value

Value of current object's prototype is not null

Return undefined

Set current object tothe value of its prototype

Y

Y

N

N

The search process

7

More about Prototype Chain

• Long prototype chain can harm performance.– Use local variables for long property access e

xpressions.• Be ware of accidental property hiding caus

ed by prototype chain.• An object's properties can be enumerated

using for..in expression. – Properties from other objects in prototype chai

n are also included.• Use hasOwnProperty to filter out these properties.

8

What can JavaScript do for OO enthusiasts?

9

• No Classes in JavaScript.• Just Objects.

• But you can see this kind of code in JavaScript.

It looks like we have classes in JavaScript, just like Java.

10

Prototype-based Inheritance

• We can use prototype chain and new operator to implement pesudo-inheritance.– The formal name is prototype-based inherit

ance.

• It's not the classical inheritance we can do in Java.– State is also inherited in JavaScript.

11

Inheritance in JavaScript

• The main reason we need inheritance is to reuse code.– Instances of sub-classes can use attributes a

nd methods from super-classes.

• Inheritance in JavaScript is easy.– Just make sure the super-class appears in the

sub-class's prototype chain.– Instances of sub-class can search upwards its

prototype chain to find attributes and methods in super-class and use them.

Note: The underlined words are for understanding the concept only.

12

• Use new operator to create a new object from another object. – The object can be used to create another object is cal

led a constructor.– Every object created by a constructor has an implicit r

eference (called the object’s prototype) to the value of its constructor’s prototype property.

new Operator

user object has a references to its constructor User's prototype. So the property sa

yHi can be found.

13

Classical Inheritance Sample

• Person is the super-class.• Student is the sub-class.• Student class inherites getNa

me function from Person and declares its own function getEmail.

14

aStudent Student

prototype object

PersonaPerson

prototypeobject

getEmail getName

new new

Student.prototype = new Person();

Search path of aStudent.getName

Student's prototype object -> Person's prototype objectConstructor's prototype

Constructor

Objects created by new operator

Implicit references to constructor's prototype

Note: aPerson doesn't exist in the code.

Properties

15

• Be careful when using objects from prototype chain– All the objects created from the same constructor sha

re the same prototype object.• This is error prone for object references.

Shared Objects

emails is shared by user1 and user2.

The correct way

16

Composition

• Another way to enable reuse is to use object composition.– Each object provides a small set of functions

and maintain its internal states.– Favor immutable objects and functional style.

• This kind of objects can be composed or mixed into other objects.

• Use a factory to encapsulate the composition and produce well-behaved objects.

17

Duck Typing

• Inheritance is used to express is-a relationship.• JavaScript provides instanceof operator to check

whether an object is constructed by another object.– But the better way is not to check the type.

• Categorize objects by their behaviors, not their inheritance hierarchy.– "when I see a bird that walks like a duck and swims lik

e a duck and quacks like a duck, I call that bird a duck." http://en.wikipedia.org/wiki/Duck_typing

18

Duck Typing cont.

• Duck typing is very natural in JavaScript.

• An object's behavior can be determined by the functions it has, including those from its prototype chain.

• If an object provides all the functions that a type requires, we can say this object is an instance of that type.

19

A Duck Typing Sample

• Function sayHiForMe only requires the object any contains a function sayHi.

• It doesn't check the type of object any.

20

What happends when I invoke myFunc()?

21

Execution Context

• All JavaScript code is executed in certain execution context (EC).

• When a function is invoked in current EC, the execution flow enters a new EC.

• When the function is returned, the execution flow returns to the caller EC.

• A EC stack is formed in this way.

22

Scope Chain

• Each execution context is associated with a scope chain.

• The scope chain is used to resolving identifiers at runtime.– The scope chain is a chain of objects.– Identifier resolving starts from the first object a

nd iterate over the whole chain until a property is found or meets the last object.

– The prototype chain of an object in scope chain is used when searching for a property.

23

EB CA D

B1 C1

A2

A1 D1 E1

C2

Scope Chain

Prototype Chain

Search path: A -> A1 -> A2 -> B -> B1 -> C -> C1 -> C2 -> D -> D1 -> E -> E1

24

When Entering an EC

• Create the Activation object– It has the property arguments which contains actual parameters.

• Create the scope chain– Create a scope chain

• For function declaration and expression, the scope chain is the same as that associated with current EC.

• For Function constructor, the scope chain always contains global object only.

– Put Activation object to the head of the chain.

• Initialize variables– Formal parameters, local variables and inner functions are intiali

zed as properties of the Activation object

Note: All these steps are done BEFORE the function body is executed.

25

A Quiz

This quiz is based on http://ejohn.org/apps/learn/#8

Function getSOSNumber is initialized when entering the EC. So it can be invoked even its body appears after

a return statement.

getSOSNumber is a local variable which is undefined when entering the EC. It's initialized when executi

ng the assign operator.

Function declarationv.s.

Function expression

26

Scope Chain Augmentation

• Scope chain can be augmented during function execution using with statement and catch clause.– The object declared will be put to the head of

the scope chain.– It affects the behavior of identifier resolving.

• Properties in the object will be searched first.

• Scope chain will be restored after existing the code block.

27

A with Sample

objGlobalObject

name

Scope chain

• obj is put to the head of scope chain.• name property in obj is found first.

28

Why can you use alert() everywhere?

29

Global Object

• Although usage of global object is generally considered as a bad practice, it exists in JavaScript and plays an important role in identifier resolving.

• Global object is provided by host environment.– In browser, it's the window object.

• The global object contains many properties that you use in everyday coding.– NaN, undefined, Math, Array, Date, parseInt, parseFlo

at, etc.

30

Global Object cont.

• Global object is the last object in a scope chain.– It's the last chance an identifier got resolved.

• It has performance penalty if a property can only be found until we reach the global object.

31

From jQuery Source Code

• Above code is taken from jQuery's source code.• It makes undefined a local variable instead of a

property in the global object.– Faster due to shorter search path for this property

32

arguments

• arguments is an array-like object that contains actual parameters when a function is invoked.– arguments.length, arguments[0]– Use Array.prototype.slice.apply(arguments) to convert

it to a true array.

• Use arguments to simulate function overloading.– Apply different behaviors according to number and typ

es of parameters.

• arguments.callee refers to the caller function, can be used to invoke an anonymous function recursively.

33

this

• this is a JavaScript keyword, points to another object.– Can be used in function body. Placed before an identifier.

– Resolving of this identifier starts from the object referenced by this.

• The value of this depends on how the function is invoked.– As an object's property, e.g. myObj.myFunc()

• this refers to the object, e.g. myObj

– Not as an object's property, e.g. myFunc()• this refers to the global object

– After new operator, e.g. new User()• this refers to the newly created object

– Use apply and call specify a value • this refers to that value

34

Closure? What is it?

35

Closure

• Closure is an expression, typically a function.• It has free variables and an execution environme

nt to close the expression. – The execution environment is responsible for resolvin

g value of variables.

• Closure is easy to create, intentionally or accidentally– Return the reference of an inner function.– Inner function still can be invoked even after the outer

function exits.

36

Understand Closure

• The key to understand how closure works is Scope Chain.

• The execution environment maintains a function's scope chain.– The scope chain is still accessible even thoug

h the outer function exits.– The objects in the scope chain retain their stat

es when the outer function exits.

37

A Closure Example

• Outer function addBy returns a reference of its inner function add.

• When function add is invoked, it still has access to other objects in its scope chain.

ActivationObject(add)

ActivationObject

(addBy)

GlobalObject

firstsecond

Scope chain when add is invoked

38

Closure and Encapsulation

• Use closure to create private properties.• Private properties enable encapsulation.• Closure can be used to protect internal states an

d guard against malicious actions.

• Use an anonymous function to create a closure.• Property currentId is encapsulatedin this closure.

39

Use closure is a challenge to code readability. Be prepared.

40

References

• ECMAScript 3rd specification

• JavaScript : The Good Parts

• Learning Advanced JavaScript

• JavaScript Closures

• JavaScript技巧与高级特性

41

Creative Commons Images Used

• myklroventine/3261364899/

• yhancik/354788792/

• trashit_t-shirt/2171336265/

• huge09/4276632202/

• brianarn/265152959/

• carlosporto/775089650/

All available at http://www.flickr.com/photos/