Date post: | 11-May-2015 |
Category: |
Technology |
Upload: | alex-sexton |
View: | 23,513 times |
Download: | 1 times |
Superclassy Inheritancein 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 expressiveFunctional 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
ModularReusableReadable
Good JavaScript
Efficient
Good JavaScript
Stays out of the DOM (for the most part)
Types of Inheritance in JS
Classical Prototypal
Types of Inheritance in JS
Classical Prototypal
Pseudo-Classical
Types of Inheritance in JS
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 ObjectsObjects inherit from Objects
Prototypal Inheritance
Objects contain a “link” to another objectThe “parent” Object is just a regular Object!
Prototypal Inheritance
Prototypal Lineage
Changes in oldObject bubble to newObjectChanges 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
Pseudoclassical Inheritance
3 Components to this pattern (the native pattern)
Constructor functions`new`Function.prototype
Pseudoclassical Inheritance
Classes in this pattern should be capitalizedClasses are named/defined by their
Constructor functions
Pseudoclassical Inheritance
function Constructor (){ this.instance_member = …; // automatically returns `this` when invoked
// with the `new` operator } var myObject = new Constructor();
Pseudoclassical Inheritance
Methods and properties that are intended to be inherited are added to the function’s ‘prototype’
Pseudoclassical Inheritance
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’);
Pseudoclassical Inheritance
The ‘new’ operator creates a new object, with a link back to its parent’s prototype object.
It is REQUIRED.
Pseudoclassical Inheritance
This would be much like the prototypalway of doing:
// prototypal equivalentvar newObject = Object.create(Constructor.prototype);
Pseudoclassical Inheritance
// prototypal equivalentvar newObject = Object.create(Constructor.prototype);
Classical Inheritance
At it’s core, Javascript is prototypal, and does not support the Classical model
Classical Inheritance
Javascript is extremely versatileUsing a few simple tricks,
it’s easy to make believe
Classical Inheritance
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
A little tougher to implement, but there are plenty already written
simple-inheritance | MooTools Class | Prototype Class | Lowpro | Base2 |Way More…
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(); // => truevar n = new Ninja();n.dance(); // => falsen.swingSword(); // => true// Should all be truep 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 frameworkTie the DOM and the Object together
in a clean mannerPretty code!
(switch to codez)
Fin.
Alex [email protected]://twitter.com/slexaxton
http://alexsexton.com/inheritance/demo/http://yayquery.com/
Special Thanks to:Douglas CrockfordJohn ResigStoyan StefanovPrototype | Base2 | Dojo | jQuery etc…#jquery on irc.freenode.net
(YAYQUERY == Paul Irish, Rebecca Murphey, Adam Sontag)