Thursday, October 11th, 2007

Ajaxian Featured Tutorial: Defining classes and inheritance using Prototype 1.60

Category: Ajax, Prototype

Straight from the source, today’s Ajaxian Featured Tutorial is about how to use inheritance within Prototype 1.60:

Prototype 1.6.0 now comes with inheritance support through the Class module, which has taken several steps further since the last version; you can make richer classes in your code with more ease than before.

Here’s an example of the old syntax:

/** obsolete syntax **/

var Person = Class.create();
Person.prototype = {
initialize: function(name) {
this.name = name;
},
say: function(message) {
return this.name + ': ' + message;
}
};

var guy = new Person('Miro');
guy.say('hi');
// -> "Miro: hi"

var Pirate = Class.create();
// inherit from Person class:
Pirate.prototype = Object.extend(new Person(), {
// redefine the speak method
say: function(message) {
return this.name + ': ' + message + ', yarr!';
}
});

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

and now the updated version using Prototype 1.60:

/** new, preferred syntax **/

// 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!"

The full details are available on Prototype’s website.

Posted by Rey Bango at 9:50 am
14 Comments

+++--
3.1 rating from 14 votes

14 Comments »

Comments feed TrackBack URI

There have been some recent changes, see the changelog:

http://dev.rubyonrails.org/browser/spinoffs/prototype/trunk/CHANGELOG

“Class.create now takes a variable number of arguments: if the first argument is a class, the newly created class inherits from that class; all other arguments are treated as successive calls to addMethods.”

Comment by Les — October 11, 2007

Interesting, with the new changes it works almost exactly like Ext.extend

Comment by Rich Waters — October 11, 2007

This is an excellent tutorial, It helps me understand why so many developers are jumping to 1.6

Comment by Don Albrecht — October 11, 2007

… an update:
http://groups.google.com/group/prototype-core/browse_thread/thread/d8fb6fb5583479ee

Comment by Les — October 11, 2007

Its about time

Comment by Dan — October 11, 2007

Does Prototype’s Object.extend/Class.create (and I suppose Ext.extend) work like jQuery.extend? This looks like jQuery’s deep extend, but used in a class method. On that note, why the Class.create and .addMethods functions, instead of a single .extend? I guess so you can get superclass methods more easily? Hmm…

Comment by Charles — October 11, 2007

Charles: your speculation is correct. Class#addMethods is a version of Object.extend that is mindful of inheritance. It means I can add methods to a class at any time and have the new method propagate to all instances of the class (naturally), but also to all subclasses and instances of subclasses. In other words, Class#addMethods handles the cascading that results from redefining a method in a class at the top of an inheritance chain.

Comment by Andrew Dupont — October 11, 2007

Charles: your speculation is correct. Class#addMethods is a version of Object.extend that is mindful of inheritance. It means I can add methods to a class at any time and have the new method propagate to all instances of the class (naturally), but also to all subclasses and instances of subclasses. In other words, Class#addMethods handles the cascading that results from redefining a method in a class at the top of an inheritance chain.

Comment by Andrew Dupont — October 11, 2007

The tutorial mentions a new syntax for Class.create which is new Class(). However this doesn’t seem to work, I get an error: Class is not a constructor.

Comment by Bashar Abdul — October 11, 2007

Why don’t the various Javascript library developers (Prototype, Ext, jQuery, Dojo, etc) work together and create a common OOP module that all the libraries can use?

Comment by molasses — October 11, 2007

Post advertisement at http://fivq.com/ . There you can offer your services, find gigs (short term jobs) or long term jobs. It is good place who would like to work remotely. Also there you can promote your website, your services. Between its absolutely free to post and no registration needed.

Comment by Vytas — October 12, 2007

Does anyone here know about Douglas Crockford’s ideas on “Parasitic Inheritance”? He explains it a little in some of those Yahoo! video’s, great stuff. I use this concept throughout my own framework and it is so easy to understand. Parasitic Inheritance allows me to make use of inheritance, private variables, overriding methods, etc. When fully applied, the code will have no (need for) mention of “prototype”, “new” or “this”. I wander what others here think of Parasitic Inheritance.

Comment by Tim — October 12, 2007

like Dan says, it was about time… yet once again Prototype is copying it’s former child Mootools ;)
First Events, then Classes and DOM builders… what else will they mimic?

Comment by gonchuki — October 12, 2007

@gonchuki: “it’s former child Mootools ;)” ?

That’s not particularly correct :P.

Comment by Olmo Maldonado — October 13, 2007

Leave a comment

You must be logged in to post a comment.