Javascript inheritance is a multi-horned beast. You can use classical inheritance to make things work a little bit more like Java, or you can subscribe wholeheartedly to doing things Javascript’s way.
Doing things Javascript’s way can be a boon, once you wrap your head around it. You don’t need any helper functions to help you out with this. You don’t need a library to implement useful inheritance, like jQuery or Prototype. You gain the benefits of being able to define private variables for your objects. You do lose a little bit in terms of memory usage. But these days, memory is cheap - and Javascript engines are only getting faster. So why not make it easy on yourself, as a developer - and your users, as downloaders?
You’re also limited in that it’s difficult for an overridden method to access the object’s parent implementation. However, I’m firmly of the belief that if you need to do that, you’re doing it wrong. So, without further ado, let’s delve into how to use Javascript to inherit in style - the Crockford Way.
Our base class is simple. Taking cue from the multitude of other object oriented examples floating around on the ‘net, I’ll be using animals to exemplify this process. If you need a primer on what inheritance actually means, feel free to peruse Wikipedia’s article on inheritance.
So, we start with a simple Animal class. It can’t do much. It does provide a nice framework for us to build other classes off of.
-
var Mammal = function(name,numberOfLegs) {
-
this.getName = function() {
-
return name;
-
};
-
this.getNumberOfLegs = function() {
-
return numberOfLegs;
-
};
-
this.speak = function() {
-
alert("This animal is mute…!");
-
};
-
};
Pretty basic class. We can instantiate it, and call some of its member properties like usual:
-
var PrimoridalAnimal = new Mammal("Goo",0);
-
alert(PrimordialAnimal.getName()); // "Goo"
-
alert(PrimordialAnimal.getNumberOfLegs()); // "0"
-
PrimordialAnimal.speak(); // alerts "This animal is mute…!"
Not a very useful animal! Let’s define what a cat looks like.
-
var Cat = function(name,color) {
-
this.getName = function() {
-
return name;
-
};
-
this.getNumberOfLegs = function() {
-
return 4;
-
};
-
this.getColor = function() {
-
return color;
-
};
-
this.speak = function() {
-
alert("Meow!");
-
};
-
};
Uh oh. There’s quite a bit of code duplication here. The getName function is pretty much the same as Mammal’s - and the getNumberOfLegs simply returns a static integer! The only truly new things we have here are the speak method and the new attribute, color. Let’s see if we can create a Cat object that inherits from the Mammal object.
-
Cat = function(name,color) {
-
var parent = new Mammal(name,4)
-
parent.getColor = function() {
-
return color;
-
};
-
parent.speak = function() {
-
alert("Meow!");
-
};
-
return parent;
-
};
There we go! We aren’t really returning a “Cat” object here - we’re modifying a new instance of the Mammal object with some new methods we can use. Note the continued use of closures to provide us with the private member, color. Note also, that unlike many methods of JavaScript inheritance, we can actually pass parameters to the parent object. That’s fairly useful! Let’s see how we can instantiate and use this new object:
-
var yvonne = new Cat("Yvonne","calico");
-
alert(yvonne.getName()); // alerts "Yvonne"
-
alert(yvonne.getColor()); // alerts "calico"
-
yvonne.speak(); // alerts "Meow!"
Works like a charm. To extend this metaphor a little bit further, let’s make a lion.
-
var Lion = function(name) {
-
var parent = new Cat(name,"Tan, with a tuft on the tail!");
-
parent.speak = function() {
-
alert("ROAR!");
-
};
-
return parent;
-
};
Now, to experiment with the output:
-
var billy = new Lion("billy");
-
alert(billy.getColor()); // alerts "Tan, with a tuft on the tail!" - how cute!
-
billy.speak(); // alerts "ROAR!" .. yikes!
Fairly useful compared to some of the other paradigms out there, if you ask me.
Now, you remember I mentioned the memory issue as a minor issue, in the introduction? I’d like to take a little aside to explain why.
When we decorate the parent class, we’re creating new methods. We aren’t utilizing the prototype of, say, the Cat object. We’re attaching new instances of functions directly to the Mammal object. For each new cat object, there are two more functions floating around out there taking up space. With new advances in JavaScript interpreters and with how cheap memory is, though, this shouldn’t be that much of an issue. If I’d have to guess, I’d say this method is actually faster, in terms of CPU time, than the methods put forth in most of the libraries out there. I’ll follow up with a benchmark at some point - it’s a curious question, that’s for sure.
In the meantime, though, loosen your brain and write your JavaScript the most natural way it is for you. This just happens to be my preferred method of inheritance. I’d love to hear why you prefer Prototype or YUI’s method over this, though!
To make your object structure even more powerful, take a look at my article on Javascript interfaces.
Update: I did some benchmarking with Robert’s JSLitmus test suite, and this method is indeed faster on execution. It is a little slower on instantiation, however.
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=f3a2cd2a-0dee-44e6-aef0-7ae1c7c7f0c3)
Tags: Inheritance, JavaScript, Object, Object-oriented programming, Programming, Superclass
I’d really like to see your statement, “I’d say this method is actually faster,” quantified… ’cause, I think that may be making a pretty big assumption. (Hint: I created JSLitmus to make exactly this sort of testing as easy as possible
)
Also, note that your constructor doesn’t have to create new functions. Just combine the module pattern and a method like Prototype’s Object.extend() as follows:) here …)
var Cat = (function() {
var methods ={
getColor: function() {
return color;
},
speak: function() {
alert(”Meow!”);
}
};
return function(name, color) {
var parent = new Mammal(name,4)
return Object.extend(parent, methods);
};
})()
(P.S You might install WordPress’ Subscribe2 plugin to make it easier for comments to stay in touch with any discussion your posts may generate.)
Thanks for the comment, Robert!
I’m actually working on a benchmark for it right now - I’ve been fairly busy with my day job since posting this, so it hasn’t quite happened yet. I was going to add it to the inheritance benchmark on your blog - but then I realized you were doing something completely different with that. Comprehensive comparison to other libraries is forthcoming though, I promise! In retrospect, I probably shouldn’t have posted this without the figures
Your code, however, doesn’t work
You’re referencing the variable “color” expecting to be able to access it, however you cannot:
The first reference to “color” is in the return constructor method. While that constructor method may have access to variables defined in encapsulating functions, the opposite is not true: “color” is actually defined in a completely different closure than it’s used in your example.
A more readable version of the prototype method of extending, while still passing parameters to the parent object:
var Cat = function(name, color) {
var parent = new Mammal(name,4);
return Object.extend(parent, {
getColor: function() {
return color;
},
speak: function() {
alert(”Meow!”);
}
});
};
But the syntax is still wonky, though. Not nearly as succinct as I’d like it. I’ll work on some benchmarks to back up my claims on my flight tonight! (and maybe work out a way of accessing superclass methods from the subclass).
Thanks for the tip on Subscribe2 - it’s on now!