Extending Classes In Object Oriented Javascript

Posted March 2, 2009 at 3:06 PM by Ben Nadel

Tags: Javascript / DHTML

Reader Comments

Although I would have to say that your example weirdest example that I have ever seen, I think that it works well in proving your point. I don't think that enough of us have really looked into writing and extending classes in javascript.

One of my questions here, however, is why wouldn't you just use ColdFusion to power the logic, and use jQuery's .load (or .post or whatever) to power the ajax. It seems to me a lot easier to have the server-side do all of the dirty work, and use javascript as the go-between.

@Brandon,

Ha ha, I couldn't think of any other examples for some reason that were small enough. I was going to go with BlackJack players and "hitting strategies" but that would have gotten too complex.

While I think off-loading some logic to ColdFusion would be good sometimes, I think there are going to be a lot of times when you want to have Javascript classes that control HTML elements. At least, that is where I am going in my head.

For example, I might have a generic ModalWindow class or a DataGrid class that handles some core functionality for those types of elements. But then, I might want to sub-class an only override certain methods.

For example, I might have a ModalWindow know how to show and hide itself; but, I might have an AddContactModalWindow that extends the ModalWindow base class and handles it's own specialized form display / submission.

Just off the top of my head. But, I just felt that I needed to get the Javascript OOP knowledge in there before I could fully contemplate how to leverage it.

Understood. I guess that jQuery just makes me lazy sometimes :). I like the modal window class example. That makes perfect sense. Thanks.

I was just wondering:

What are you going to go buy in your store? You have enough points now!

@Brandon,

Ha ha, yeah, I have a few points kicking around now :)

If you're interested, Prototype does a pretty good job of emulating class-based inheritance.

The example given at http://www.prototypejs.org/learn/class-inheritance
is:

// properties are directly passed to `create` method
var Person = Class.create({
initialize: function(name) {
this.name = name;
},
say: function(message) {
return this.name + ': ' + message;
}
});

// when subclassing, specify the class you want to inherit from
var Pirate = Class.create(Person, {
// redefine the speak method
say: function($super, message) {
return $super(message) + ', yarr!';
}
});

var john = new Pirate('Long John');
john.say('ahoy matey');
// -> "Long John: ahoy matey, yarr!"

Class.create() is a Prototype Object method call that takes an optional superclass and a struct of methods. super.init() is accessed through the use of $super().

Not gonna get into the whole better/worse debate, but I do find this a lot easier to use. And kind of interesting that I was reading through Prototype's classes and inheritance docs on the same day you posted this article. :)

@Matt,

That method seems interesting. I guess it is really treating the class an object and then overwriting the property values, much like the $.extend() method in jQuery.

To me, this way seems to be much more wordy. But, to each his own - I don't know enough about the Prototype library of the Javascript prototype chain to say better or worse.

There is a difference between prototype extension and class based objects. We are looking to find the best scenario of class based objects at my company. We are not 'against' prototype extensions per se. We are just much happier using class based objects.

@John,

That sounds interesting. I am new to this concept in Javascript. Can you maybe give a few words as to why you are going one way and not the other?

Thanks Ben !

I have a small javascript class hierarchy for our aspdotnet input-controls, built using the ProtoType framework(like Matt mentioned), but needed to convert to jQuery(for various reasons), and this seems like the way to go for keeping my js OO.

@Thomas,

I am liking it a lot so far. Thinking in terms of classes has helped me to factor out repeated code nicely.

I got an "undefined" error when extending a function's protoype before actually declaring the function, as in your example:

StraightDatingStrategy.prototype = new DatingStrategy();

function StraightDatingStrategy(){
DatingStrategy.apply( this, arguments );
}

That was easily resolved though. Nice work!

@Ginx,

To be honest, I was surprised that that worked when I saw it in examples; I liked it because it sort of showed the extensions before the class definitions. But, if it doesn't work, then moving it after is all good. What kind of browser do you use, just out of curiosity.

Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment