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 : [email protected]• 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/