classes are premature optimization: prototypes in javascript · the past, present, and future of...

Classes are Premature Optimization:

Prototypes in JavascriptJustin Love

http://pinboard.in/u:wondible/t:prototypal/http://pinboard.in/u:wondible/t:oop/

Justin Loveslides@wondible.com

http://wondible.com

@wondible

Outline

• OOP

• Classical

• Prototypal

• Objects in Javascript

• Patterns and performance

• Review

OOP?

class ____ {

...

}

object ____ {

...

}

Class Oriented?

class ____ {

...

}

OOP-or-

COP?

OOP

Those who do not remember history are condemned to repeat it.

George Santayana

(Chances are I’m repeating it right now.)

Alan Kay

3things

OOP

EncapsulationLocal

RetentionProtection

Hidingof State-process

Genericity

Commonly, PolymophisimAlan Kay spoke of Algebras

Extreme late binding

Messaging

Object decides how to react.

OOP

EncapsulationGenericityMessaging

Classes

Inheritance

“Five words

objectmessageclassinstancemethod

make up the vocabulary with which Smalltalk

is discussed.”

Smalltalk-80, The Language, p.51

Smalltalk 71727680

Classes

Inheritance

Metaclasses

Alan Kay2003

“So I decided to leave out inheritance as a built-in feature until I understood it better.”

Alan Kay2003

“[...] backslid towards Simula and did not replace the extension mechanisms with safer ones that were anywhere near as useful.”

Classical

Sketchpad

1963

Generalvs.

Specific

Simula-67

C++Javaetc.

Classes Instances

Segregation

Plato

Formvs.

Matter

Descriptionvs.

Representation

Classes Instances

Metaclass

“Class of classes”

RubyRuby Logo © 2006, Yukihiro Matsumoto

I’m not smart enough for Ruby’s

object system.

Peter DeutschThe Past, Present, and Future of Smalltalk

1989

“metaclasses have proven confusing to many users, and perhaps in the balance more confusing than valuable.”

Accidental Complexity

William of Ockham

“entia non sunt multiplicanda praeter necessitatem”

William of Ockham

“entities must not be multiplied beyond necessity”

Prototypal

Henry LiebermanOOPSLA 1986

http://web.media.mit.edu/~lieber/Lieberary/OOP/Delegation/Delegation.html

Using Prototypical Objects to Implement Shared Behavior in Object Oriented Systems

Self

1987

Abstractions

Objects

(Classes)

Objects

Abstractions?

one

one = Object.create(Object.prototype)

one two

two = Object.create(one)

one two

two = Object.create(one)

Beware ofmutable state!

P

one two three .....

one = Object.create(ptoto)two = Object.create(proto)

three = Object.create(proto)

YouAin’tGonnaNeed It

Objects in Javascript

What’s an object?

An object is a

Hash Table

An object is a

Hash TableMap

An object is a

Hash TableMap

Implementation detail

Map

a x

b y

c z

Array

0 x

1 y

2 z

Array

number value

Object

string value

Syntactic Sugar

object[‘string’]

object.string

Prototypes

Objects can be related

Reference

Every object has a

prototype

Prototype

What You’ve GotIt’s Prototype

Objects

ECMAScript Spec

[[Prototype]]

Mozilla

.__proto__

ECMAScript 5

Object.getPrototypeOf(instance)

Read

= x.b

Read

= x.a

Read

= x.toString

Write

x.a = “C”

Readback

= x.a

Compound Objects

“Classes”

new Class();

Syntatic Sugur

Leaky Abstraction

Object.create()

• ES5

• Firefox 4

• Safari 5

• Chrome 5

• IE 9

• http://kangax.github.com/es5-compat-table/

Object.create()

Object.create = function(o) {

function F() {};

F.prototype = (o || {});

return new F();

}

http://javascript.crockford.com/prototypal.html

P

one two three .....

one = Object.create(ptoto)two = Object.create(proto)

three = Object.create(proto)

Singleton

Singleton (in JS)

var singleton = {

...

};

Ex-Nihilo

“Out of Nothing”

Singleton: Self

clone = (self)

Prototypal Singleton

singleton.clone = function() {

return this;

};

Hard-core Singleton

function Singleton() {

return Singleton.prototype;

}

Near Miss

Near Miss

Near MissDay

Kin

Near Miss

var kin = day.clone("Kin");

Near Miss

clone: function(name) {

var o = Object.create(this);

o.name = name;

...

return o;

},

Near Miss

...

// independent existence.

o.scale = 0;

o.position = 0;

o.time = 0;

...

Nested Context

Nested Context

Like {block scope}.

(Or function scope in Javascript.)

Nested Context

under: function(path, f) {

var m = Object.create(this);

m.cd(path);

f(m);

},

Performance

Structured Memory

Programming as Experience:The Inspiration for Self

1995

Self runs

“2.3 times slower than optimized C++.”

Self includes: SmalltalkMario Wolczko

“all [sample] Smalltalk programs run faster in the the Self system, some significantly more so.”

Omega

1990Statically-typed prototypes

Design-Timevs.

Run-Time

Kevo

1993Concatative

‘Clone families’

Lisaac

2003Compiled.

44% slower to 17% fasterthan c.

http://www.lisaac.org/documentation/benchmarks

V8 Logo © 2006 Google

V82008

V8 Logo © 2006 Google

Generated Code

V8 Logo © 2006 Google

Hidden Classes

Javascript

1996

Javascript

Is not an Object-Oriented Programming Language

Genericity

PASS

Messaging

FAIL*Partial support in ES5 and Harmony

Encapsulation

FAIL*Work-around with closure.

Peter DeutschThe Past, Present, and Future of Smalltalk

1989

“inheriting implementation [...] tends to create difficulties in subsequent evolution and often reflects insufficient understanding.”

Copyvs.

Delegation

Shared Data

Shared Data

Shared Data

Shared Data

......

...

...

......

Seph

Stateless Delgation

http://olabini.com/blog/2010/07/preannouncing-seph/

Sparse Objects

Sparse Objects

Sparse Objects

new Disk('Minute',

unit.MS_S,

1,

T("seconds/minute"), {

colors: '#d22'

})

Sparse Objectsnew Disk('Solar Year',

unit.MS_D,

T("days/~month"),

12, {

colors: ['blue', 'green',

'orange', 'brown'],

...

Sparse Objects

...

majorNames: ['~January'...],

subDivide: 4,

major: 3*4,

median: 1*4,

...

Sparse Objects

...

render: function(context) {

context.save();

context.rotate(

6.28 * -9 / 365);

...

Flyweight

Flyweight

Flyweight

Flyweight

Flyweight

item: function(d) {

var i = Object.create(this);

i.dot = d;

return i;

},

Shared Behavior

Shared Behavior

Shared Behavior

Shared Behaviormint: function(

head, pattern, action) {

var my = this.dup();

my.head = head;

my.pattern = pattern;

my.action = action;

return my;

},

Shared Behavior

dup: function() {

return Object.create(this);

},

*

*

*

Prototype

Instances

Do I use class patterns?

YES

Do I use class patterns

for everything?

NO

a

Objects

Classes

a

Self

Smalltalk

Classesare aUsefulPattern

But notthe onlyPattern

Use Classes

Because You Want To

Use Classes

Because You Have To

Not

Review

History

OOP

Classical

Prototypal

Performance

Object

string value

Prototype

What You’ve GotIt’s Prototype

Objects

We’re Stuck with

Javascript

Learn How to Use It

Prototype

Instances

Shared Behavior

Shared Data

Singleton

Flyweight

Nested Context

Justin Loveslides@wondible.com

http://wondible.com

@wondible

http://pinboard.in/u:wondible/t:prototypal/http://pinboard.in/u:wondible/t:oop/

Questions?