As tested, this works in WebKit browsers (including iPhone), Firefox, Chrome, and Opera. I’ve abonded all hope for IE.
I am writing this article to help save the sanity of other developers who may trying to program in an OOP fashion for JavaScript. The last two weeks I’ve been working with Object Oriented Programming inside of JavaScript (not a strong OOP language). When I learned OOP I was using C++ is hands down a stronger OOP langauge than JavaScript. However, I’ve gotten used to the features of strong OOP langauages and have found the lack of it in JS to be somewhat annoying as I have to write more code to accomplish the same chores.
I’m going to show you two examples.
Example One: This is simple, but limited OOP. It supports member and method inheritance, but does not maintain the integrity of the constructor:
{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }Function.prototype.extend = function(class) {
this.prototype = new Class();
}{/syntaxhighlighter}
Feature of Example One: instanceof works correctly.
{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }function MyClass() {}
MyClass.extends(ParentClass);
var o = new MyClass();
alert(o instanceof ParentClass); // true
alert(o instanceof ParentsParentClass); // true
alert(o instanceof Object); // true
alert(o instanceof Number); // false{/syntaxhighlighter}
Example Two: Here’s what I’ve come up with so far to try and keep the family constructor in tact. It may be rough around the edges, but it works for now. (Please comment / email if you have additions).
{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }Function.prototype.extend = function(c) {
var funcToStr = function(str) {
str = String(str).substr(String(str).indexOf(‘\n’) + 1);
str = str.substr(0, str.lastIndexOf(“}”));
return str;
}
if(c.name != “Object”) {
var s = ‘\n’;
s += funcToStr(c.prototype._construct);
s += funcToStr(this.prototype._construct);
//alert(‘this.prototype._construct = function() {‘+s+’}’);
eval(‘this.prototype._construct = function() {‘+s+’}’);
}
var old = this.prototype;
for(var i in c.prototype) {
if(i != “_construct”) this.prototype[i] = c.prototype[i];
}
//this.prototype.super = c;
this.prototype.constructor = old.constructor;
this.prototype.toString = function() {
return “[Object ” + this.constructor.name + “]”;
}
}{/syntaxhighlighter}
Feature of Example Two: Super is run on every inherited pseudo-class.
{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }function ParentClass() {
this._construct();
}
ParentClass.prototype._construct = function() {
this.parentFunc();
}
ParentClass.extend(Object);
ParentClass.prototype.parentFunc = function() {
alert(‘parent func ran!’);
};
function ChildClass() {
this._construct();
}
ChildClass.prototype._construct = function() {
//
}
ChildClass.extend(ParentClass);
var o = new ChildClass();
dump(o);
/*
alerts the following:
parent func ran!
follow up alert is:
_construct()
super()
toString()
parentFunc()
*/{/syntaxhighlighter}
You’ll see I use a function called “dump” the code of which is listed below:
{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }function dump(obj, funcs) {
if(funcs === undefined) funcs = true;
var str = “”;
for(var i in obj) {
try {
if(obj[i] instanceof Function) {
if(funcs) str += i + “()\n”;
} else {
str += i + “: ” + String(obj[i]).substr(0, 20) + “\n”;
}
} catch(e) {}
}
alert(str);
}{/syntaxhighlighter}
Here are a few pages I found helpful during my research.
Douglas Crockford – Classical Inheritence in JavaScript
Chris Pietschmann – Javascript Prototypal Inheritance Explained in Simple Terms
Gavin Kistner – OOP in JS, Part 2 : Inheritance
John Resig – Simple JavaScript Inheritance