Superclassy Inheritance In Javascript

Superclassy Inheritance in Javascript Alex Sexton

JavaScript Overview
Runs in more places than any other language.

JavaScript Overview
Troubled by the DOM and Newbz

JavaScript Overview
Simple but expressive
Functional by nature , but not by syntax

JavaScript Overview
It _ is_ Object Oriented –
everything extends from Object

Bad Javascript
Not Reusable/Modular

Bad Javascript
Hard to read
(let’s leave nests to birds and aging mothers )

Bad Javascript
Relies on the DOM (misusing jQuery, etc.)

Good JavaScript
Modular
Reusable
Readable

Good JavaScript
Efficient

Good JavaScript
Stays out of the DOM (for the most part)

Types of Inheritance in JS
Classical
Prototypal

Classical
Prototypal Pseudo-Classical

Classical
Prototypal Pseudo-Classical ^----native (kind of) 

“ It doesn't matter what an object's lineage is, what matters is the quality of its contents .”
-Douglas Crockford

Prototypal Inheritance
No Classes – just Objects
Objects inherit from Objects

Objects contain a “ link ” to another object
The “ parent ” Object is just a regular Object!

Prototypal Lineage
Changes in oldObject bubble to newObject
Changes in newObject do not affect oldObject

Prototypal Lineage
Theoretically can go on forever —
(you shouldn’t need more than a few levels)
Differential Inheritance is fast (common-case)
and memory efficient

Pseudoclassical Inheritance
The syntax is Classical but behaves prototypally

3 Components to this pattern (the native pattern)
Constructor functions
` new `
Function.prototype

Classes in this pattern should be capitalized
Classes are named/defined by their
Constructor functions

function Constructor (){
this.instance_member = …;
// automatically returns `this` when invoked
// with the `new` operator
}
var myObject = new Constructor();

Methods and properties that are intended to be inherited are added to the function’s ‘ prototype ’

The code inside the function is there to help ‘set up’ or ‘ construct ’ the returned object
function Constructor(val){ this.val = val; }
Constructor.prototype.method1 = function(){…};
Constructor.prototype.staticVal = 100;
var newObject = new Constructor(‘val’);

The ‘ new ’ operator creates a new object, with a link back to its parent’s prototype object.
It is REQUIRED .

This would be much like the prototypal
way of doing:
// prototypal equivalent
var newObject = Object.create(Constructor.prototype);

// prototypal equivalent
var newObject = Object.create(Constructor.prototype);

Classical Inheritance
At it’s core, Javascript is prototypal , and does not support the Classical model

Javascript is extremely versatile
Using a few simple tricks,
it’s easy to make believe

The ‘key’ is that any Objects ‘ prototype ’ member is mutable and can be replaced with another object.
This enables a new hierarchy.

Purely Prototypal
Very short and easy to mimic in Javascript
Native function in ECMAscript 5 (approved)
Gets rid of ‘ new ’ and constructor functions

Purely Prototypal
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
var newObject = Object.create(OldObject); //yay!

Classical Inheritance in Javascript
There is a small penalty in overhead since it’s not all native, but generally still fairly quick
Enhanced API gives easier access to the superclasses methods and often more
Easier than teaching old dogs new tricks

simple-inheritance (api) by John Resig but pretty much stolen from Prototype and Base2
var Person = Class .extend ({ init: function( isDancing ){ this .dancing = isDancing; } , dance: function(){ return this .dancing; }
}) ;
var Ninja = Person.extend ({ init: function(){ this ._super ( false ) ; //  SEE?!!! SUPER CLASSY! } , dance: function(){ // Call the inherited version of dance() return this ._super () ; } , swingSword: function(){ return true ; }
}) ;
var p = new Person (true) ;
p.dance () ; // => true
var n = new Ninja () ;
n.dance () ; // => false
n.swingSword () ; // => true
// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class

Information Hiding
Use the “Module Pattern” – a function that takes advantage of closures and returns an object with access to private information that isn’t available outside of the function scope .
Or something…

The Module Pattern
function module(){
var privateFunction = function() {
return “private”;
};
return {
publicFunction: function(){
return “public: “ + privateFunction();
}
};
}
var newModule = Object.create(module());
newModule.publicFunction(); // “public: private”
newModule.privateFunction(); // error
// Great for Getters and Setters of member values

“ But this doesn’t apply to my real life applications with X Library or Y Scripts!”
-Abe Lincoln

Real Life
Rofl… that’s not a real quote guys…
It fits just fine. Stop trying to use the DOM as your point of access for everything .

Real Life
Your library may actually address the issue –
or not …

“ I just think that the intersection between jQuery and classical inheritance is quite small.”
-John Resig

Real Life
Build an API
Speakers should ‘ speak() ’ not append text to DOM elements

A Badass Function
I like to call it “Stolen Identity” – it shows how versatile Javascript really is when it comes to inheritance

A Badass Function
// example from Stoyan Stefanov for YUI inheritance
// Steal the member variables along with the prototype
function Programmer() {
// initialize the parent using the child as "this"
Programmer.superclass.constructor.apply(this, arguments);
}

A Demo: Goals
Use inheritance(s) along with a framework
Tie the DOM and the Object together
in a clean manner
Pretty code!

(switch to codez)

Fin.
Alex Sexton
[email_address]
http://twitter.com/slexaxton
http://alexsexton.com/inheritance/demo /
http:// yayquery.com /
Special Thanks to:
Douglas Crockford
John Resig
Stoyan Stefanov
Prototype | Base2 | Dojo | jQuery etc…
#jquery on irc.freenode.net
(YAYQUERY == Paul Irish, Rebecca Murphey, Adam Sontag)

http://alexsexton.com	12111
http://blog.mklog.fr	1085
http://feeds.feedburner.com	84
http://speakerrate.com	27
http://www.slideshare.net	24
http://127.0.0.1	11
http://xss.yandex.net	10
http://webcache.googleusercontent.com	10
http://localhost	8
http://octo.alexsexton.com	4
http://translate.googleusercontent.com	4
http://reader.googleusercontent.com	3
http://amplifize.com	2
http://static.slidesharecdn.com	2
http://churchified.com	1
https://vpn.liveperson.com	1
http://alpha.trails.by	1
http://dustpan.intranet	1
http://localhost:3000	1
http://www.netvibes.com	1

Superclassy Inheritance In Javascript

by Alex Sexton on Jan 30, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

20 Embeds 13,391

Statistics

Superclassy Inheritance In Javascript — Presentation Transcript