Beginning Object-Oriented JavaScript

Object-Oriented JavaScript Stoyan Stefanov, Yahoo! Inc. Beijing, Dec 6 th , 2008

About the presenter Yahoo! Performance YSlow 2.0 smush.it tool phpied.com blog

First off… the Firebug console

Firebug console as a learning tool

Console features Inspect the contents of objects by clicking on them Tab auto-complete, a.k.a cheatsheet Arrows ↑ and ↓ Fiddle with any page

JavaScript !== Java C-like syntax  Classes 

Data types A. Primitive: number – 1 , 3 , 1001 , 11.12 , 2e+3 string – "a" , "stoyan" , "0" boolean – true | false null undefined B. Objects everything else…

Objects hash tables key: value

A simple object var obj = {}; obj.name = 'my object' ; obj.shiny = true ;

A simple object var obj = { shiny: true , isShiny: function () { return this .shiny; } } ; obj.isShiny(); // true

Methods When a property is a function we can call it a method

Object literal notation Key-value pairs Comma-delimited Wrapped in curly braces {a: 1, b: "test"}

Arrays Arrays are objects too Auto-increment properties Some useful methods

Arrays >>> var a = [1,3,2]; >>> a[0] 1 >>> typeof a "object"

Array literal notation var array = [ "Square" , "brackets" , "wrap" , "the" , "comma-delimited" , "elements" ];

JSON Object literals + array literals JavaScript Object Notation {"num": 1 , "str": "abc" , "arr": [ 1 , 2 , 3 ]}

Functions functions are objects they have properties they have methods can be copied, deleted, augmented... special feature: invokable

Function function say(what) { return what; }

Function var say = function (what) { return what; } ;

Function var say = function say (what) { return what; } ;

Functions are objects >>> say.length 1 >>> say.name "boo"

Functions are objects >>> var tell = say; >>> tell( "doodles" ) "doodles" >>> tell. call ( null , "moo!" ); "moo!"

Return values All functions always return a value

Return values If a function doesn’t return a value explicitly, it returns undefined

Return values Functions can return objects, including other functions

Constructor functions when invoked with new , functions return an object known as this you can modify this before it’s returned

Constructor functions var Person = function (name) { this .name = name; this .getName = function() { return this .name; }; };

Using the constructor var me = new Person( "Stoyan" ); me.getName(); // "Stoyan"

Constructors… … are just functions

A 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 constructors Object Array Function RegExp Number String Boolean Date Error, SyntaxError, ReferenceError…

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

Prototype… … is a property of the function objects

Prototype >>> var boo = function (){}; >>> typeof boo. prototype "object"

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

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

Use of the prototype The prototype is used when a function is called as a constructor

Prototype usage var Person = function (name) { this .name = name; }; Person. prototype .say = function (){ return this .name; };

Prototype usage >>> var dude = new Person( 'dude' ); >>> dude.name; "dude" >>> dude.say(); "dude"

Prototype usage 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__ The objects have a secret link to the prototype of the constructor that created them __proto__ is not directly exposed in all browsers

__proto__ >>> dude.__proto__. hasOwnProperty ( 'say' ) true >>> dude. prototype ??? // Trick question >>> dude.__proto__.__proto__. hasOwnProperty ( 'toString' ) true

It’s a live chain >>> typeof dude.numlegs "undefined" >>> Person. prototype .numlegs = 2 ; >>> dude.numlegs 2

Parent constructor function NormalObject() { this .name = 'normal' ; this .getName = function () { return this .name; }; }

Child constructor function PreciousObject(){ this .shiny = true ; this .round = true ; }

The inheritance PreciousObject. prototype = new NormalObject();

A child object var crystal_ball = new PreciousObject(); crystal_ball.name = 'Crystal Ball.' ; crystal_ball.round; // true crystal_ball.getName(); // "Crystal Ball."

Two objects var shiny = { shiny: true , round: true }; var normal = { name: 'name me' , getName: function () { return this .name; } };

extend() function extend(parent, child) { for ( var i in parent) { child[i] = parent[i]; } }

Inheritance extend(normal, shiny); shiny.getName(); // "name me"

Beget object function object(o) { function F(){} F. prototype = o; return new F(); }

Beget object >>> var parent = {a: 1 }; >>> var child = object(parent); >>> child.a; 1 >>> child. hasOwnProperty (a); false

Objects Everything is an object (except a few primitive types) Objects are hashes Arrays are objects

Functions Functions are objects Only invokable Methods: call(), apply() Properties: length, name, prototype

Prototype Property of the function objects It’s 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 Class ical Prototypal By copying … and many other variants

Stoyan Stefanov, http://phpied.com [email_address]

Beginning Object-Oriented JavaScript

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Beginning Object-Oriented JavaScript (20)

More from Stoyan Stefanov (20)

Recently uploaded (20)

Beginning Object-Oriented JavaScript