Object Oriented JavaScript

Object Oriented JavaScript Mike Girouard — AJAXWorld 2009

Today’s Agenda JavaScript Object Model Types, Constructors, Inheritance “Missing” Features Namespaces,Visibility, Polymorphism Useful Design Patterns Factories, Singletons, Modules Mike Girouard — AJAXWorld 2009

The JavaScript Object Model Mike Girouard — AJAXWorld 2009

Primitive Types Object Boolean Number String Array Date RegExp Function Math Error EvalError RangeError ReferenceError SyntaxError TypeError URIError Mike Girouard — AJAXWorld 2009

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 Mike Girouard — AJAXWorld 2009

Creating Custom Types // Define the constructor var Timestamp = function () { this.value = new Date().getTime(); }; // Instantiate var ts = new Timestamp; // Read instance variable console.log(ts.value); Mike Girouard — AJAXWorld 2009

Instance Members Instance members are deﬁned in a constructor’s prototype object New instances will have access to prototype members Prototypes may be modiﬁed at runtime Mike Girouard — AJAXWorld 2009

Instance Members var Timestamp = function () { this.value = new Date().getTime(); }; Timestamp.prototype.getValue = function () { return this.value; }; var ts = new Timestamp; console.log(ts.getValue()); Mike Girouard — AJAXWorld 2009

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 Mike Girouard — AJAXWorld 2009

Inheritance Mike Girouard — AJAXWorld 2009

Prototypal Inheritance Completely eliminates the need for classes Objects inherit directly from other objects (prototypes) Incredibly efﬁcient, ridiculously strange Mike Girouard — AJAXWorld 2009

Prototypal Inheritance var Foo = function () {}; // Foo Constructor var Bar = function () {}; // Bar Constructor Bar.prototype = new Foo; // Bar extends Foo var f = new Foo(); // Foo instance var b = new Bar(); // Bar instance console.log(f instanceof Foo); // true console.log(f instanceof Bar); // false console.log(b instanceof Foo); // true console.log(b instanceof Bar); // true Mike Girouard — AJAXWorld 2009

Classical Inheritance JavaScript has no native support for classical inheritance Many libraries support class-like structures Rolling your own is quite trivial Mike Girouard — AJAXWorld 2009

Classical Inheritance var Foo = classFactory({ __construct: function () { this.identify(); }, identify: function () { console.log(‘Foo’); } }); Mike Girouard — AJAXWorld 2009

Classical Inheritance var Bar = Foo.extend({ identify: function () { console.log(‘Bar’); } }); Mike Girouard — AJAXWorld 2009

Classical Inheritance 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; }; Mike Girouard — AJAXWorld 2009

“Missing” Features Mike Girouard — AJAXWorld 2009

Namespaces Mike Girouard — AJAXWorld 2009

Why bother? JavaScript has implied global scope Global variables are only for selﬁsh people Raise your hand if you use these variable names: id, element, name, value, target… Mike Girouard — AJAXWorld 2009

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 Mike Girouard — AJAXWorld 2009

Namespace Objects var mikeg = { name : ‘Mike G’, location : ‘NYC’, getName : function () { return this.name; }, getLocation : function () { return location; } }; Mike Girouard — AJAXWorld 2009

Namespace Functions var getXHR = function () { if (!getXHR.enabled) return null; var xhr = new XMLHttpRequest; getXHR.registry.push(xhr); return xhr; }; getXHR.registry = []; getXHR.enabled = true; Mike Girouard — AJAXWorld 2009

Visibility Mike Girouard — AJAXWorld 2009

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 Mike Girouard — AJAXWorld 2009

Data Hiding in JS var Person = function (name) { this.getName = function () { return name; }; this.setName = function (newName) { return name = newName; }; }; Mike Girouard — AJAXWorld 2009

Data Hiding in JS // Assume: Person var mike = new Person(‘Mike G.’); var alex = new Person(‘Alex H.’); console.log(mike.name); // undefined console.log(alex.name); // undefined console.log(mike.getName()); // Mike G. console.log(alex.getName()); // Alex H. Mike Girouard — AJAXWorld 2009

Polymorphism Mike Girouard — AJAXWorld 2009

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 Mike Girouard — AJAXWorld 2009

Loadtime Branching var getXHR = function () { if (window.XMLHttpRequest) { return function () { // Return a standard XHR instance }; } else { return function () { // Return an Explorer XHR instance }; } }(); // Note: parens trigger self-invocation Mike Girouard — AJAXWorld 2009

Runtime Replacement var documentListFactory = function () { var out = []; // Just a simple array // Override the default .push() method out.push = function (document) { Array.prototype.push.call(out, { document : document, timespamp : new Date().getTime() }); }; return out; }; Mike Girouard — AJAXWorld 2009

Useful Design Patterns Mike Girouard — AJAXWorld 2009

Factories Mike Girouard — AJAXWorld 2009

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 Mike Girouard — AJAXWorld 2009

Brittle Constructor var DocumentCreator = function (document) { // What does ‘this’ refer to? this.document = document; }; new DocumentCreator(‘foo.txt’); // Instance DocumentCreator(‘foo.txt’); // window Mike Girouard — AJAXWorld 2009

A Simple Factory 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’); // Instance DocumentCreator(‘foo.txt’); // Instance Mike Girouard — AJAXWorld 2009

Singletons Mike Girouard — AJAXWorld 2009

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 Mike Girouard — AJAXWorld 2009

Singletons var myHttpLibrary = { newXHR : function (params) { ... }, parseQueryString : function (qs) { ... }, createQueryString : function (qs) { ... } }; Mike Girouard — AJAXWorld 2009

The Module Mike Girouard — AJAXWorld 2009

A Visibility Pattern Original pattern discovered by Douglas Crockford Simpliﬁes private data in JS Mike Girouard — AJAXWorld 2009

A Simple Module var config = function () { var data = {}; return { get : function (name) { return data[name]; }, set : function (name, value) { data[name] = value; return this.get(name); } }; }(); Mike Girouard — AJAXWorld 2009

A Simple Module // Assume: config config.set(‘name’, ‘Mike G.’); console.log(config.data.name); // undefined console.log(config.get(‘name’)); // Mike G. Mike Girouard — AJAXWorld 2009

A Better Module var config = function () { var me, data = {}; return me = { get : function (name) { return data[name] }, set : function (name, value) { data[name] = value; return me.get(name); } }; }(); Mike Girouard — AJAXWorld 2009

Modules for Organization var module = function () { var app, util, service; app = {}; util = {}; return service = {}; }(); Mike Girouard — AJAXWorld 2009

Modules for Organization var module = function () { var app, util, service; app = { init : function () { ... } }; util = {}; return service = { init : app.init }; }(); Mike Girouard — AJAXWorld 2009

Any questions so far? Mike Girouard — AJAXWorld 2009

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 Mike Girouard — AJAXWorld 2009

Miscellaneous… Most primitives have literals Primitive constructors aren’t called in literals (IE: no prototype features added) Please don’t go modifying primitive prototypes Mike Girouard — AJAXWorld 2009

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 Mike Girouard — AJAXWorld 2009

Miscellaneous… The use of this tempting, but introduces ambiguity into your program In most cases its not necessary and can be avoided Mike Girouard — AJAXWorld 2009

Miscellaneous… Most of JavaScript’s OO features are clever functional programming patterns Studying functional programming languages will make you a better JavaScript programmer Mike Girouard — AJAXWorld 2009

Thank you. mikeg@lovemikeg.com

http://webtechman.com	39
http://www.lovemikeg.com	35
http://www.slideshare.net	24
http://shaojie.me	19
http://salon.time-apps.pl	10
http://trickmandan.com	2
http://paper.li	1
http://tugll.tugraz.at	1
http://ethnocom.over-blog.com	1
http://www.mefeedia.com	1
http://lovemikeg.dev	1
http://devserver.foo.local	1
http://d57toastmasters.org	1
http://www.dkeats.com	1
http://www.embedster.net	1

Object Oriented JavaScript

by Michael Girouard on Jun 23, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

15 Embeds 138

Statistics

Object Oriented JavaScript — Presentation Transcript