Advanced JavaScript

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

About the presenter

Yahoo! performance team member

YSlow 2.0 architect, dev

Book author, open-source contributor

Blog: http:// phpied.com

Before we start… Firebug console

Firebug console is a learning tool

Firebug console…

Inspect the contents of objects by clicking on them

Tab auto-complete, a.k.a cheatsheet

Arrows ↑ and↓

Fiddle with any page

Any page…

Fiddle…

Objects

JavaScript data types

primitive and objects

number

string

boolean

undefined

null

What’s an object?

a hash of key => value pairs

if a key ( property ) happens to be a function, we can call it a method

What’s an object?

var obj = {

shiny: true ,

isShiny: function () {

return this .shiny;

}

} ;

obj.isShiny(); // true

Object literal notation

{ Wrapped in curly braces }

, -delimited properties

key : value pairs

var obj = {a: 1, "b c d": 2};

Arrays

arrays are also objects

auto-incremented properties

Arrays

>>> var a = [1,3,2];

>>> a[0]

1

>>> typeof a

"object"

Arrays

array objects also get some cool properties...

>>> a. length

3

...and methods

>>> a. sort ()

>>> a. join ( ' < ' )

"1 < 2 < 3"

Array literal notation

var array = [

"Square" , "brackets" ,

"wrap" , "the" ,

"comma-delimited" ,

"elements"

];

JSON

JavaScript Object Notation

Uses object and array literals

Quotes required for properties

{"num": 1 , "str": "abc" , "arr": [ 1 , 2 , 3 ]}

Functions

functions are objects

they have properties

they have methods

can de copied, deleted, augmented...

special feature: invokable

Functions

function boo(what) {

return what;

}

or

var boo = function (what) {

return what;

} ;

Functions

function boo(what) {

return what;

}

or

var boo = function bootoo (what) {

return what;

} ;

Functions are objects

>>> boo.length

1

>>> boo.name

"bootoo"

Functions are objects

>>> var foo = boo;

>>> foo( "doodles" )

"doodles"

>>> foo. call ( null , "moo!" );

"moo!"

Return value

all functions return a value

if they don't explicitly, they return undefined implicitly

functions can return other functions

Constructors

when invoked with new , functions return an object known as this

you have a chance of modifying this before it's returned

you can also return some other object

Constructor functions

var Person = function (name) {

this .name = name;

this .speaks = 'fr' ;

this .say = function() {

return "Je m'appelle " + this .name;

};

};

An object created with constructor

>>> var julien = new Person( "Julien" );

>>> julien.say();

"Je m'appelle Julien"

Constructor’s return value

var Person = function (){

this .first = "Bruce" ;

return {last: "Wayne" };

};

>>> typeof new Person().first

"undefined"

>>> new Person().last

"Wayne"

Constructor’s return value

var Person = function (){

this .first = "Bruce" ;

return "Batman" ;

};

>>> new Person().first

"Bruce"

Naming convention

M yConstructor

m yFunction

constructor property

>>> function Person(){};

>>> var jo = new Person();

>>> jo. constructor === Person

true

constructor property

>>> var o = {};

>>> o. constructor === Object

true

>>> [1,2]. constructor === Array

true

Built-in constructor functions

Object

Array

Function

RegExp

Number

String

Boolean

Date

Error, SyntaxError, ReferenceError…

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

>>> typeof new Number ( 1 )

"object"

>>> typeof 1

"number"

Primitives can act as objects

>>> "test" . length

4

>>> ( 123.456 ). toFixed ( 2 )

"123.46"

Prototype

prototype

a property of the function objects

>>> var boo = function (){};

>>> typeof boo. prototype

"object"

Prototypes can be augmented

>>> boo. prototype .a = 1 ;

>>> boo. prototype .sayAh = function (){};

Prototypes can be overwritten

>>> boo. prototype = {a: 1 , b: 2 };

How is the prototype used?

when a function is invoked as a constructor

var Person = function (name) {

this .name = name;

};

Person. prototype .say = function () {

return this .name;

}

>>> var dude = new Person( 'dude' );

>>> dude.name;

"dude"

>>> dude.say();

"dude"

say() is a property of the prototype object

but it behaves as if it's a property of the dude object

can we tell the difference?

Own properties vs. prototype’s

>>> dude. hasOwnProperty ( 'name' );

true

>>> dude. hasOwnProperty ( 'say' );

false

isPrototypeOf()

>>> Person. prototype . isPrototypeOf (dude);

true

>>> Object . prototype . isPrototypeOf (dude);

true

__proto__

I, the dude , have a secret link to the prototype of the constructor that created me

__proto__ is not directly exposed in all browsers

>>> dude. __proto__ . hasOwnProperty ( 'say' )

true

>>> dude. prototype

??? // Trick question

>>> dude. __proto__ . __proto__ . hasOwnProperty ( 'toString' )

true

__proto__

The prototype chain

It’s alive!

>>> typeof dude.numlegs

"undefined"

>>> Person. prototype .numlegs = 2 ;

>>> dude.numlegs

2

Inheritance

Inheritance via the prototype

>>> var Dad = function (){ this .family = "Stefanov" ;};

>>> var Kid = function (){};

>>> Kid. prototype = new Dad();

>>> var billy = new Kid();

>>> billy.family

"Stefanov"

Inherit one more time

>>> var GrandKid = function (){};

>>> GrandKid. prototype = billy;

>>> var jill = new GrandKid();

>>> jill.family

"Stefanov"

Inheritance…

>>> jill. hasOwnProperty ( 'family' )

false

>>> jill. __proto__ . hasOwnProperty ( 'family' )

false

>>> jill. __proto__ . __proto__ . hasOwnProperty ( 'family' )

true

Inheritance…

>>> billy.family = 'Idol' ;

>>> jill.family;

'Idol'

>>> jill. __proto__ . hasOwnProperty ( 'family' );

true

>>> delete billy.family;

>>> jill.family;

'Stefanov'

Side effect…

>>> billy. constructor === Kid

false

>>> billy. constructor === Dad

true

Side effect… easy to solve

reset after inheritance

>>> Kid. prototype . constructor = Kid;

>>> GrandKid. prototype . constructor = GrandKid;

isPrototypeOf

>>> billy. isPrototypeOf (jill)

true

>>> Kid. prototype . isPrototypeOf (jill)

true

instanceof

>>> jill instanceof GrandKid

true

>>> jill instanceof Kid

true

>>> jill instanceof Dad

true

Classes?

There are no classes in JavaScript

Objects inherit from objects

class ical inheritance is when we think of constructors as if they were classes

Classical inheritance

function Parent(){ this .name = 'parent' ;}

Parent. prototype .getName = function (){ return this .name; };

function Child(){}

inherit(Child, Parent);

Option 1

function inherit(C, P) {

C. prototype = new P();

}

Option 2

C. prototype = P. prototype ;

}

Option 3

var F = function (){};

F. prototype = P. prototype ;

C. prototype = new F();

}

Option 3 + super

C.uber = P. prototype ;

}

Option 3 + super + constructor reset

C.uber = P. prototype ; // super

C. prototype . constructor = C; // reset

}

Inheritance by copying properties

After all, inheritance is all about code reuse

function extend(parent) {

var i, child = {};

for (i in parent) {

child[i] = parent[i];

}

return child;

}

Inheritance by copying…

>>> var parent = {a: 1 };

>>> var child = extend(parent);

>>> child.a

1

Inheritance by copying…

This was a shallow copy

you can make a deep copy using recursion

mixins / multiple inheritance

Prototypal inheritance

as suggested by Douglas Crockford

no class-like constructors involved

objects inherit from objects

via the prototype

function object(o) {

function F(){}

F. prototype = o;

return new F();

}

>>> var parent = {a: 1 };

>>> var child = object(parent);

>>> child.a;

1

>>> child. hasOwnProperty (a);

false

Scope

No block scope

>>> if ( true ) { var inside_block = 1 ;}

>>> inside_block

1

Function scope

function boo() {

var inboo = true ;

}

Global namespace

every variable is global unless it's in a function and is declared with var

global namespace should be kept clean to avoid naming collisions

function scope can help

Self-executable functions for one-off tasks

( function (){

var a = 1 ;

var b = 2 ;

alert (a + b);

} )()

Closures

Photo credit: NASA

Closure example #1

function outer(){

var local = 1 ;

return function (){

return local;

};

}

example #1…

>>> var inner = outer()

>>> inner()

1

Closure example #2

var inner;

function outer(){

var local = 1 ;

inner = function (){

return local;

};

}

example #2…

>>> typeof inner

"undefined"

>>> outer()

>>> inner()

1

Closure example #3

function makePlus(arg) {

var n = function (){

return arg;

};

arg++;

return n;

}

example #3…

>>> var getValue = makePlus( 1234 );

>>> getValue()

1235

Closure #4 – in a loop

function make() {

var i, a = [];

for (i = 0 ; i < 3 ; i++) {

a[i] = function (){

return i;

}

}

return a;

}

Closure #4 test - oops

>>> var funcs = make();

>>> funcs[ 0 ]();

3

>>> funcs[ 1 ]();

3

>>> funcs[ 2 ]();

3

Closure #4 – corrected

function make() {

var i, a = [];

for (i = 0 ; i < 3 ; i++) {

a[i] = ( function (local){

return function (){ return local;}

})(i)

}

return a;

}

Getter/Setter

var getValue, setValue;

( function () {

var secret = 0 ;

getValue = function (){

return secret;

};

setValue = function (v){

secret = v;

};

})()

// usage >>> getValue() 0 >>> setValue( 123 ) >>> getValue() 123

Iterator

function setup(x) {

var i = 0 ;

return function (){

return x[i++];

};

}

Iterator usage

>>> var next = setup([ 'a' , 'b' , 'c' ]);

>>> next()

'a'

>>> next()

'b'

Loop through DOM elements - wrong

// all elements will alert 5

for (var i = 1; i < 5; i++ ){

document.getElementById('btn'+i).onclick =

function(){

alert(i);

};

}

Loop through DOM elements - correct

// first element alerts 1, second 2,...

for (var i = 1; i < 5; i++ ){

document.getElementById('btn'+i).onclick =

( function( i ){

return function(){ alert(i); };

} )(i)

}

Wrapping up…

How to tell what’s going on?

typeof, instanceof, isPrototypeOf()…

>>> typeof variable

typeof is an operator, not a function

Not typeof(variable) even if it works

Returns a string, one of:

"string", "number", "boolean",

"undefined", "object", "function"

typeof

if ( typeof whatever === "undefined") {

// whatever is not defined

}

if (whatever == undefined) {

// hmm, not so sure

}

>>> obj instanceof MyConstructor

Not instanceof()

Returns true | false

true for all constructors up the chain

>>> obj. constructor

Points to the constructor function used to create this obj

>>> obj. isPrototypeOf (child_obj)

Respects the prototype chain

>>> obj. hasOwnProperty ( "prop" )

Own properties vs. properties of the prototype

obj. propertyIsEnumerable ( "prop" )

Will it show up in a for-in loop

Caution: enumerable properties of the prototype will return false but still show up in the for-in loop

Wrapping up…

What did we learn today?

Objects

JavaScript has a few primitive types, everything else is an object

Objects are hashes

Arrays are objects

Functions

Functions are objects, only invokable

call() and apply() methods

prototype property

Prototype

Functions have a prototype property which is an object

Useful with Constructor functions

Constructor

A function meant to be called with new

Returns an object

Class

No such thing in JavaScript

Inheritance

Prototypal

Class ical

… and approximately 101 other ways and variations

Scope

Lexical function scope

Closure

When a variable leaves its function scope

Thank you!

Stoyan Stefanov

http://www.phpied.com

Advanced JavaScript

2 comments

Notes on slide 1

8 Favorites