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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (14)

Similaire à Advanced JavaScript

Similaire à Advanced JavaScript (20)

Plus de Stoyan Stefanov

Plus de Stoyan Stefanov (20)

Dernier

Dernier (20)

Advanced JavaScript