Geeks With Blogs
Phubar Baz Musings of an HTML5 Programmer

I've spent the last few weeks trying to comprehend OOP and inheritance in JavaScript. After that amount of time I've come to the conclusion that harly anyone really understands it and everyone implements it a different way. Just look at this question someone posted about the best library to use for JS inheritance. I thought it was funny because although there were a lot of answers, I think everyone proved his point, that there are many of them and no one could agree on the best.

Being simple minded and wanting to find the simplest way to do some class inheritance I read a number of books and blogs. Every one I read made me more confused. It can't be that hard, I thought. But JS is a strange beast, and prototypal inheritance doesn't translate very well for someone used to classical class inheritance.

I think the main problem is there are too many different ways to define objects in JS. In other languages such as C# or Java there's pretty much one way to do it, and it's simple to understand. You create a class, then you create a child class that extends it and adds to or overrides the parent's behavior.

I could have just used the first way I found and forgot about it and kept programming. But not me. I kept thinking there has to be a better way to do it. There has to be an industry standard. Right? Not! So finally I just kind of combined the best parts of all the solutions I could find and came up with something that worked and looked good. Most of the ideas I got came from Gavin Kistner's site, which does a good job of explaining JS inheritance without creating a bunch of helper functions first.

The only difference from Gavin's example is that I define all of my child class functions inside of the object definition instead of using the prototype. I don't know if there is some reason not to do it that way but it worked for me.

Shape = {
   name: undefined,
   init: function(name) { = name; }
   getName: function() { return name; }
function Circle(radius) {
    this.radius = radius;

    this.getArea = function(){ return Math.PI * this.radius * this.radius; }

var myCircle = new Circle(4);
myCircle.getArea(); // 50.265
myCircle.getName(); // circle

I define an init function in the base class so I don't have to worry about calling the base class's constructor. That solves problem #1. In my child class, Circle I call the init function and then do any other child initialization like setting the radius. Then I define all of my child class behaviors, in this case getArea(). Finally, outside of the child class definition I call the inheritsFrom function to link it to the parent. The inheritsFrom is defined at the page linked above. It simply sets the prototype to the parent object and sets the constructor.

Tha was the simplest thing I could come up with. I hope it saves someone else from days research.

Posted on Thursday, July 8, 2010 4:39 PM | Back to top

Comments on this post: JavaScript Inheritance

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © PhubarBaz | Powered by: