Advanced JavaScript

Advanced JavaScript: closures, prototypes, inheritance Stoyan Stefanov Ajax Experience, Boston 2008

About the presenter ,[object Object],[object Object],[object Object],[object Object]

Before we start… Firebug console

Firebug console is a learning tool

Firebug console… ,[object Object],[object Object],[object Object],[object Object]

JavaScript data types ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

What’s an object? ,[object Object],[object Object]

What’s an object? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Object literal notation ,[object Object],[object Object],[object Object],[object Object]

Arrays ,[object Object],[object Object]

Arrays ,[object Object],[object Object],[object Object],[object Object],[object Object]

Arrays ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Array literal notation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JSON ,[object Object],[object Object],[object Object],[object Object]

Functions ,[object Object],[object Object],[object Object],[object Object],[object Object]

Functions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Functions are objects ,[object Object],[object Object],[object Object],[object Object]

Functions are objects ,[object Object],[object Object],[object Object],[object Object],[object Object]

Return value ,[object Object],[object Object],[object Object]

Constructors ,[object Object],[object Object],[object Object]

Constructor functions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

An object created with constructor ,[object Object],[object Object],[object Object]

Constructor’s return value ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Constructor’s return value ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Naming convention ,[object Object],[object Object]

constructor property ,[object Object],[object Object],[object Object],[object Object]

constructor property ,[object Object],[object Object],[object Object],[object Object],[object Object]

Built-in constructor functions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

var fn = new Function( 'a, b','return a+b'); var fn = function(a, b){ return a + b; } var re = new RegExp( '[a-z]', 'gmi'); var re = /[a-z]/gmi; var a = new Array(); var a = []; var o = new Object(); var o = {}; Not that Use this

Wrapper objects vs. primitive ,[object Object],[object Object],[object Object],[object Object]

Primitives can act as objects ,[object Object],[object Object],[object Object],[object Object]

prototype ,[object Object],[object Object],[object Object],[object Object]

Prototypes can be augmented ,[object Object],[object Object]

Prototypes can be overwritten ,[object Object]

How is the prototype used? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],How is the prototype used?

[object Object],[object Object],[object Object],How is the prototype used?

Own properties vs. prototype’s ,[object Object],[object Object],[object Object],[object Object]

isPrototypeOf() ,[object Object],[object Object],[object Object],[object Object]

__proto__ ,[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],__proto__

It’s alive! ,[object Object],[object Object],[object Object],[object Object],[object Object]

Inheritance via the prototype ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Inherit one more time ,[object Object],[object Object],[object Object],[object Object],[object Object]

Inheritance… ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Inheritance… ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Side effect… ,[object Object],[object Object],[object Object],[object Object]

Side effect… easy to solve ,[object Object],[object Object],[object Object]

isPrototypeOf ,[object Object],[object Object],[object Object],[object Object]

instanceof ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Classes? ,[object Object],[object Object],[object Object]

Classical inheritance ,[object Object],[object Object],[object Object],[object Object]

Option 1 ,[object Object],[object Object],[object Object]

Option 2 ,[object Object],[object Object],[object Object]

Option 3 ,[object Object],[object Object],[object Object],[object Object],[object Object]

Option 3 + super ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Option 3 + super + constructor reset ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Inheritance by copying properties ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Inheritance by copying… ,[object Object],[object Object],[object Object],[object Object]

Inheritance by copying… ,[object Object],[object Object],[object Object]

Prototypal inheritance ,[object Object],[object Object],[object Object],[object Object]

Prototypal inheritance ,[object Object],[object Object],[object Object],[object Object],[object Object]

Prototypal inheritance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

No block scope ,[object Object],[object Object],[object Object]

Function scope ,[object Object],[object Object],[object Object]

Global namespace ,[object Object],[object Object],[object Object]

Self-executable functions for one-off tasks ,[object Object],[object Object],[object Object],[object Object],[object Object]

Closure example #1 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

example #1… ,[object Object],[object Object],[object Object]

Closure example #2 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

example #2… ,[object Object],[object Object],[object Object],[object Object],[object Object]

Closure example #3 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

example #3… ,[object Object],[object Object],[object Object]

Closure #4 – in a loop ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Closure #4 test - oops ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Closure #4 – corrected ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Getter/Setter ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],// usage >>> getValue() 0 >>> setValue( 123 ) >>> getValue() 123

Iterator ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Iterator usage ,[object Object],[object Object],[object Object],[object Object],[object Object]

Loop through DOM elements - wrong ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Loop through DOM elements - correct ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Wrapping up… ,[object Object],[object Object]

>>> typeof variable ,[object Object],[object Object],[object Object],[object Object],[object Object]

typeof ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

>>> obj instanceof MyConstructor ,[object Object],[object Object],[object Object]

>>> obj. constructor ,[object Object]

>>> obj. isPrototypeOf (child_obj) ,[object Object]

>>> obj. hasOwnProperty ( "prop" ) ,[object Object]

obj. propertyIsEnumerable ( "prop" ) ,[object Object],[object Object]

Wrapping up… ,[object Object]

Objects ,[object Object],[object Object],[object Object]

Functions ,[object Object],[object Object],[object Object]

Prototype ,[object Object],[object Object]

Constructor ,[object Object],[object Object]

Inheritance ,[object Object],[object Object],[object Object]

Thank you! ,[object Object],[object Object]

Advanced JavaScript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to Advanced JavaScript

Similar to Advanced JavaScript (20)

More from Stoyan Stefanov

More from Stoyan Stefanov (20)

Recently uploaded

Recently uploaded (20)

Advanced JavaScript