Many of us, still are scared of using javascript. Some of us think that Javascript has become outdated, yet a larger, more “hard core” webmasters love it and have evolved with it, in to ajax, etc. But, personally, when I started learning Javascript back in the 1995’s, it was extremely intimidating, with me still being in college and still learning how to write small functions with it, which would validate a user input form.

However, as time went on by I fell for it and today, I am still deeply in love it. I also love the way it has evolved and has made Ajax, jQuery, etc happen! So this article would be more so about an intermediate Javascript article, explaining inheritance within Javascript.

Javascript and the Concept of Inheritance

There are two popular ways of working with Javascript and the concept of Inheritance. Out of these the first and the more popular way of working with inheritance is known as the “prototype way”. Its much easier to understand if you try it with a blank and open mind.

Javascript Inheritance - Prototyping

The prototype way or prototyping a class, usually deals with using a function prototype instead of a class. What I mean is, that using a prototype or syntax of a class definition, we use the same prototype, that of a fuction to define a class in javascript.

For instance

function Iam () {
this.alive = true;
}
Iam.prototype.notdead = function () {
return true;

};


An Object that would inherit Iam:


Dave.prototype = new Iam;
function Dave () {
this.writes = true;
}
Dave.prototype.getsBored = function () {
return "Never!";
};


Now, if we create an instance of Dave object, and call its member methods, the result would be:

// Create an instance of the Dave object
var me = new Dave();

Javascript Inheritance: Calling a parent member method.

If you want to call the member method that was overiden in the child class, from the parent class or (let me put in a better way) – if you want to call a super method for an object, this is how it would be called.

Dave.prototype.getsBored = function ( ) {
Iam.prototype.getsBored.call(this);
return “Never1”;
/* all we have to do is call the member method from the parent class, and for that all we need to know is the syntax, as stated above, the name of the class and the name of the member method we want to access and use */
};

Direction two: Javascript Inheritance

The second way of using Javascript Inheritance is one in which we mimic class-based inheritance. Using this alternative of Javascript Inheritance, most developers and webmasters would feel comfortable if they have been exposed to other OOP languages and are coming from an OOP background. For most webmasters for whom languages like Java, C++, etc are new, the above mentioned method of using Javascript Inheritance would suffice.
Mimicking Class Based Inheritance in Javascript

For class based inheritance, the above code then translates to:

var Iam = Class.extend({ breathing : true; lives function ()
{ return true; }
});
var Dave = Iam.extend({ writes : true; getsBored() : function {return “Never!”;}
});
var me = new Dave();
me.getsbored();
me.lives();


Javascript Inheritance and Super Calls

Normal scripting with Javascript and advanced javascript libraries, one may almost never use super calls, because you may never feel the need. However, if your programing schema is such that you have to, then you could use super calls. Be advised that alot of super calls, espcially in javascript are not recommended due to code optimizations.

Syntax to use?

While both syntaxes or methods describe above are fairly easy, it really depends on your background as a webmaster and which way you feel comfortable. Using the prototype syntax is fairly a good idea, because its more native to javascript compiler, and has no dependencies or extra code, it is easily readable and more precise as to what is happening between the lines, pun intended! So, my personal favorite would be the prototype method.
Need for Javascript Inheritance?

I would go ahead suggest this, use javascript inheritance only when you know you should, don’t just use it because its available. Most newbie webmasters use javascript inheritance alot and tend to overuse, where it may not be used at all! If you are new and are looking to start with a syntax pattern that you can adhere to, I would strongly recommend The Yahoo Javascript Patter@ http://yuiblog.com/blog/2007/06/12/module-pattern/

Javascript Inheritance Resources

Definitive Guide to Javascript Inheritance@ http://books.google.com/books?id=2weL0iAfrEMC&pg=PA167&dq=prototype+inheritance+in+javascript&sig=ACfU3U1S1YegUWWwIFPqlEWCgMvQv3kSgQ#PPA151,M1

Simple JavaScript Inheritance - John Resig@ http://ejohn.org/blog/simple-javascript-inheritance/

Base of Javascript Inheritance@ http://dean.edwards.name/weblog/2006/03/base/

Defining classes and inheritance - Prototype JavaScript Framewor@ http://prototypejs.org/learn/class-inheritance