The Prototype JavaScript Framework / Page 3

The Prototype JavaScript Framework [con't]

Object-Oriented Programming

Prototype 1.6.0 provides full inheritance support through the Class module. It allows you to make richer classes in your code with greater ease than ever before.

Class creation in Prototype is done by the Class.create() method. It accepts a JavaScript object literal that defines the class's properties, methods and constructor code. The latter is contained in the initialize() function. Like any constructor, you can have it accept any parameters that your class requires and set default values for your class properties:

var Person = Class.create( { initialize: function(name) { this.name = name; } //more code });

To extend a class, simply provide the superclass to the Class.create() method as the first parameter, then pass the child class as we did above:

var Person = Class.create( { initialize: function(name) { this.name = name; } , say: function(message) { return 'I am ' + this.name + message; } }); // when subclassing, specify the class you want to inherit from var Character = Class.create( Person , { // redefine the say method say: function($super, message) { return $super(message) + ' I own a mansion and a yacht.'; } } ); var elmer = new Character('Elmer J Fudd'); var assertion = elmer.say(', millionaire.'); //again ALERT(assertion); //-> displays "I am Elmer J Fudd, millionaire. I own a mansion and a yacht." //again ALERT(assertion); //-> displays "I am Elmer J Fudd, millionaire. I own a mansion and a yacht."

The Character class can access its parent's say() function by including an argument called $super in the signature, in the first position. The superclass function will be made available via the $super variable. Notice that the Character's say() function is called without the $super argument because that reference is maintained internally. Hence, the say() function is called just it always would using the elmer.say(message) notation.

Module Mixing and Matching

The Class.create() method accepts an arbitrary number of arguments, so that functions can be appended to a collection of instance methods. The first argument is handled the same way if it doesn't designate a superclass. Here's an example of a function module called Chop, which is an object literal containing only functions:

// define a module var Chops = { sing: function(hp) { return "do re mi fa sol la si do."; } , scream: function() { return "Scream for me Long Beach!"; } }; // the first argument isn't a class object, so there is no inheritance ... // simply mix in all the arguments as methods: var Singer = Class.create( Chops , { initialize: function(volume) { this.volume = volume; } } ); var bruce = new Singer(11); bruce.sing(); //-> "do re MI fa sol la si do." bruce.volume; //-> 11

Shared Variables & Class Methods

A nice side effect of JavaScript's prototypal inheritance model is that all class properties, like their methods, are shared between class instances. This is because they are copied by reference when a new instance is created. Nice, as long as you mean to share them. Code them the wrong way and you just might find properties being shared when you don't want to! The following example creates a couple of instances of the same Gearhead class, which contains a property named gear. After adding some items to the gear array, we can see that it contains both the items. All is well until we create a new instance and display its gear.

var Gearhead = Class.create({ initialize: function() { } , gear: [] , add: function(item) { this.gear.push(item); } , toString: function() { return gear.join(); } }); var rob = new Gearhead; rob.toString; // -> [] rob.add('Gibson SG'); rob.add('Washburn V'); rob.toString; // -> ['Gibson SG', 'Washburn V'] It works. //But what if we make another instance of Gearhead? var robsNemesis = new Gearhead; robsNemesis.toString; // -> ['Gibson SG', 'Washburn V'] // ... hey, that's my gear!

The place to create properties that you don't want shared across instances is in the initialize() function because it executes each time a new instance is created. The following example contains both a shared and non-shared property. The firstAsset is the shared property and the assets array is created for each class instance, as it's set in the initialize() function. By doing it this way, we can be sure that any new instance of the RichAndPowerful class will be born with a 'silver spoon'!

var RichAndPowerful = Class.create({ initialize: function() { this.assets = [this.firstAsset]; } , firstAsset: 'silver spoon' , add: function() { this.assets.push(item); } , toString: function() { return assets.join(); } }); var trump = new RichAndPowerful; trump.toString; // -> ['silver spoon'] trump.add('wealth'); trump.add('power'); trump.toString; // -> ['silver spoon', 'wealth', 'power'] It works. //But what if we make another instance of RichAndPowerful? var trumpJr = new RichAndPowerful; trumpJr.toString; // -> ['silver spoon'] // ... no new assets yet.

Since there's really no special support for class methods in the Prototype Framework, you can add them to any existing class just as you normally would. Our next example creates a class method called shareTheWealth() that doesn't require any instances of the RichAndPowerful class in order to call it. Using the n.times() function, another Prototype utility, we create several new Character instances at once, and the have them introduce themselves. Keep in mind that this example is for informative purposes only; realistically, there probably would need to be at least one instance of a rich and powerful person in order for any wealth sharing to occur!

RichAndPowerful.shareTheWealth =function(n) { var characters = []; n.times( function(i) { characters.push(new Character('Rich Person').say(i + 1); } ); return characters; } RichAndPowerful.shareTheWealth(3); // -> ["I am Rich Person1, millionaire.", "I am Rich Person2, millionaire.", "I am Rich Person3, millionaire."]

You can define more than one class function and/or shared variable at once by using the Object.extend() method:

Object.extend( RichAndPowerful , { giveToTheLessFortunate: function(amount, recipients) { ... } , executeAHostileTakeover: function(company) { ... } , influence: 'substantial' } );

Class methods aren't inherited so you have to copy them manually when creating subclasses.

Adding Methods On-the-fly

The ClassInstance.addMethods() function appends multiple methods to class in such a way that they are instantly available on subclasses and every existing instance in memory. The following example adds two methods to the Person class and calls them on the rob variable that we created earlier:

Person.addMethods( { wink: function() { return this.say('Wink, wink. Say no more.'); } , nudge: function() { return this.say('Nudge, nudge. '); } } ); rob.nudge + rob.wink; // -> "Nudge, nudge. Wink wink. Say no more."

Thanks to libraries like the Prototype Framework, programming in JavaScript has never been easier. This article was just a taste of what the Prototype Framework has to offer. What's more, it's inspired numerous other libraries that each have their own strengths. Check out JQuery and Script.aculo.us for starters.

References

1. JavaScript constants
2. JavaScript inheritance
3. Top 10 JavaScript Frameworks

Original: September 17, 2008

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both