Custom JavaScript Objects

Even though it is not an object-oriented environment, JavaScript does provide a mechanism for encapsulation, or the ability to package and to hide data in an object. In JavaScript, you can create an instance of a generic object and assign it properties and even methods. For example, in the following JavaScript, a generic object instance called cartLineItem is created. Using the dot operator, four custom properties are defined and assigned values.

cartLineItem = new Object(); cartLineItem.productID = 'MG1234'; cartLineItem.productName = 'MGB Roadster (1935)'; cartLineItem.qty = 1; cartLineItem.unitPrice = 36000;

The cartLineItem instance can be used later by any JavaScript with a reference to it. For example, the following statement displays a message to the user with the shopping cart line item's name and current quantity:

alert( 'You have ' + cartLineItem.qty + ' ' + cartLineItem.productName + ' in your shopping cart' );

Like properties, custom methods can be associated with objects as well. As long as it has been defined earlier in the document, the function can be assigned to an object. For example, the following function, total(), can be used as a member function of the cartLineItem instance. This function has access to its owning object through the operator this. In this function, the total() function computes the total amount for this line item: quantity times the price.

function total () { return (this.qty * this.unitPrice); }

A function is assigned to an object, just like a property:

cartLineItem.total = total;

Once it has been assigned to the object, the function can be called directly from the object cartLineItem. For example,

cartLineItem = new Object(); cartLineItem.productID = 'MG1234'; cartLineItem.productName = 'MGB Mk I Roadster'; cartLineItem.qty = 2; cartLineItem.unitPrice = 12500; cartLineItem.total = total; document.write( '

' + cartLineItem.qty + ' ' + cartLineItem.productName + ' will cost you $' + cartLineItem.total() + '

' );

The preceding JavaScript code produces the following output on the browser screen:

2 MGB Mk I Roadster will cost you $12500

To make things a little easier, a prototype can be defined. This is similar to a C++ constructor. The prototype is a function that creates a custom object and, optionally, initializes the object's properties. In the case of a JavaScript object, this must include the object's functions. The prototype for a LineItem[5] object would be

[5] Call it an old Smalltalk habit, but I like to capitalize the name of "class"-like objects and to use lowercase names for instances. In this example, the LineItem function is behaving like a constructor and so is "class"-like.

function LineItem( id, name, qty, price ) { this.productID = id; this.productName = name; this.qty = qty; this.unitPrice = price; this.total = total; }

With a prototype defined, an array of LineItem instances could be created with the following JavaScript:

var cartLineItem = new Array(); cartLineItem[0] = new LineItem ('MG123', 'MGB Mk I Roadster', 1, 36000 ); cartLineItem[1] = new LineItem ('AH736', 'Austin-Healey Sprite', 1, 9560 ); cartLineItem[2] = new LineItem ('TS225', 'Triumph Spitfire Mk I', 1, 11000 );