The Prototype JavaScript Framework / Page 3 | WebReference

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:

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:

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:

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.

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'!

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!

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

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:

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 for starters.


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

Original: September 17, 2008