object oriented javascript

Object Oriented JavaScriptMike Girouard — AJAXWorld 2009

Mike Girouard — AJAXWorld 2009

Today’s Agenda

JavaScript Object ModelTypes, Constructors, Inheritance

“Missing” FeaturesNamespaces, Visibility, Polymorphism

Useful Design PatternsFactories, Singletons, Modules


The JavaScript Object Model


Boolean

Object

Number String Array Date

RegExp Function Math Error EvalError

RangeError ReferenceError SyntaxError TypeError URIError

Primitive Types


Creating Custom Types

Object constructors are functions

Defining a new type is as simple as defining a function

Creating a new instance is simply invoking a function with the new prefix


// Define the constructorvar Timestamp = function () { this.value = new Date().getTime();};

// Instantiatevar ts = new Timestamp;

// Read instance variableconsole.log(ts.value);

Creating Custom Types


Instance Members

Instance members are defined in a constructor’s prototype object

New instances will have access to prototype members

Prototypes may be modified at runtime


var Timestamp = function () { this.value = new Date().getTime();};

Timestamp.prototype.getValue = function () { return this.value;};

var ts = new Timestamp;console.log(ts.getValue());

Instance Members


var Timestamp = function () { this.value = new Date().getTime();};

var ts = new Timestamp;

Timestamp.prototype.getValue = function () { return this.value;};

console.log(ts.getValue()); // Still works

Instance Members


Inheritance


Prototypal Inheritance

Completely eliminates the need for classes

Objects inherit directly from other objects (prototypes)

Incredibly efficient, ridiculously strange


var Foo = function () {}; // Foo Constructorvar Bar = function () {}; // Bar ConstructorBar.prototype = new Foo; // Bar extends Foo

var f = new Foo(); // Foo instancevar b = new Bar(); // Bar instance

console.log(f instanceof Foo); // trueconsole.log(f instanceof Bar); // falseconsole.log(b instanceof Foo); // trueconsole.log(b instanceof Bar); // true

Prototypal Inheritance


Classical Inheritance

JavaScript has no native support for classical inheritance

Many libraries support class-like structures

Rolling your own is quite trivial


var Foo = classFactory({ __construct: function () { this.identify(); },

identify: function () { console.log(‘Foo’); }});



var Bar = Foo.extend({ identify: function () { console.log(‘Bar’); }});



var classFactory = function (obj, extends) { if (extends) for (var i in extends) if (!obj[i]) obj[i] = extends[i];

if (obj.__construct) obj.__construct.call(obj); obj.extend = function (subclass) { return classFactory(subclass, obj); };

return obj;};



“Missing” Features


Namespaces


Why bother?

JavaScript has implied global scope

Global variables are only for selfish people

Raise your hand if you use these variable names:

id, element, name, value, target…


Implementing namespaces

Use an object… any object

Remember:Objects can store any kind of value

Everything is an object

This means anything [mutable] can be a namespace


var mikeg = { name : ‘Mike G’, location : ‘NYC’,

getName : function () { return this.name; }, getLocation : function () { return location; }};

Namespace Objects


var getXHR = function () { if (!getXHR.enabled) return null; var xhr = new XMLHttpRequest; getXHR.registry.push(xhr);

return xhr;};

getXHR.registry = [];getXHR.enabled = true;

Namespace Functions


Visibility


Data Hiding in JS

There is no concept of public, private, or protected in JavaScript

Closures allow values to be remembered in a function, even after it terminates


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

this.setName = function (newName) { return name = newName; };};

Data Hiding in JS


// Assume: Person

var mike = new Person(‘Mike G.’);var alex = new Person(‘Alex H.’);

console.log(mike.name); // undefinedconsole.log(alex.name); // undefined

console.log(mike.getName()); // Mike G.console.log(alex.getName()); // Alex H.

Data Hiding in JS


Polymorphism


Easier than you think…

Because JavaScript is a dynamic language, polymorphism is quite easy and very common.

Two common types of polymorphism:1. Runtime Replacement

2. Loadtime Branching


Useful Design Patterns


Factories


You Need Factories

Forgetting the new keyword will break your application.

The issue comes down to the implied global scope

Using new, context = the instance

Forgetting new, context = window


var DocumentCreator = function (document) { // What does ‘this’ refer to? this.document = document;};

new DocumentCreator(‘foo.txt’); // InstanceDocumentCreator(‘foo.txt’); // window

Brittle Constructor


var DocumentCreator = function (document) { // Yes, constructors can have return values :) return DocumentCreator.factory(document);};

DocumentCreator.factory = function (document) { return new DocumentCreator(document);};

new DocumentCreator(‘foo.txt’); // InstanceDocumentCreator(‘foo.txt’); // Instance

A Simple Factory


Singletons


Singletons are Easy Too

Nothing more than a simple object literal

Objects are always passed by reference and values are static

Very useful for grouping items together, even if they exist in other objects


var myHttpLibrary = { newXHR : function (params) { ... }, parseQueryString : function (qs) { ... }, createQueryString : function (qs) { ... }};

Singletons


The Module


A Visibility Pattern

Original pattern discovered by Douglas Crockford

Simplifies private data in JS


var config = function () { var data = {}; return { get : function (name) { return data[name]; }, set : function (name, value) { data[name] = value; return this.get(name); } };}();

A Simple Module


// Assume: config

config.set(‘name’, ‘Mike G.’);

console.log(config.data.name); // undefinedconsole.log(config.get(‘name’)); // Mike G.

A Simple Module


var module = function () { var app, util, service;

app = {};

util = {};

return service = {};}();

Modules for Organization


var module = function () { var app, util, service;

app = { init : function () { ... } };

util = {};

return service = { init : app.init };}();

Modules for Organization


Any questions so far?


Miscellaneous…

Everything in JavaScript is an object

All objects can be enumerated via for…in

The for…in construct sees all the way up the prototype chain

myObject.hasOwnProperty(‘foo’) is gross but necessary


Miscellaneous…

Most primitives have literals

Primitive constructors aren’t called in literals (IE: no prototype features added)

Please don’t go modifying primitive prototypes


Miscellaneous…

Forgetting to use the new keyword in some cases will break your app.

The typeof operator is useful, but lies

The instanceof operator is more accurate


Miscellaneous…

The use of this tempting, but introduces ambiguity into your program

In most cases its not necessary and can be avoided


Miscellaneous…

Most of JavaScript’s OO features are clever functional programming patterns

Studying functional programming languages will make you a better JavaScript programmer

Thank [email protected]

object oriented javascript

Technology

return function

strangemike girouard

worksmike girouard ajaxworld

targetmike girouard

runtimemike girouard

truemike girouard ajaxworld

trivialmike girouard

function obj