Objects with Values in JavaScript
Written by Ian Elliot   
Monday, 29 August 2011
Article Index
Objects with Values in JavaScript
Using factory objects and constructors

An object factory

Of course usually you need multiple copies of the item object and the simplest way of achieving this is to use an object factory:

var CItem = function(name, tax, price){
var item = {};
item.name = name;
item.tax = tax;
item.price = price;
item.valueOf = function(){
return item.price;
};
item.toString = function(){
return item.name;
};
return item;
}

Now we can define multiple item objects and use them with default values as before:

var item1 = CItem("widget1", 0.1, 10);
var item2 = CItem("widget2", 0.1, 20);
alert(item1);
alert(item2);

As the alert expects a string parameter the result is widget1 followed by widget2.

Now what do you think is displayed by:

alert(item1+item2);

As + is the arithmetic addition operator the result is 30 i.e. the valueOf method is called on each object given the result numeric 30 which is then converted to a string.

Using a constructor

If you want to create lots and lots of item objects then you really need to use a constructor and implement the methods using the prototype property. Notice that the only real reason for doing this is efficiency. If you use the object factory approach then each object has a complete copy of the valueOf and toString methods but if you use a constructor then the same prototype methods are shared by all the item objects.

The usual rule for converting a factory function into a constructor is to replace the name of the object that is being created by this:

var CItem = function(name, tax, price){
this.name = name;
this.tax = tax;
this.price = price;
this.valueOf = function(){
return this.price;
};
this.toString = function(){
return this.name;
};
}

Now the only difference is that you have to use new in front of the creation of any objects:

var item1 = new CItem("widget1", 0.1, 10);
var item2 = new CItem("widget2", 0.1, 20);
alert(item1);

Of course you can also use new in front of a factory function but it isn't made use of and it makes no real difference.

Prototype

To make each item object more efficient by sharing a single copy of the valueOf and toString functions between all of the instances we simply need to define them as methods of the CItem functions prototype object:

var CItem = function(name, tax, price){
this.name = name;
this.tax = tax;
this.price = price;
}
CItem.prototype.valueOf = function(){
return this.price;
};
CItem.prototype.toString = function(){
return this.name;
};

With this change the two methods are now shared by all the instances of Item. However they work in exactly the same way and

var item1 = new CItem("widget1", 0.1, 10);
alert(item1);

still displays widget1.

In case you are wondering why examples of valueOf and toString were given for a singleton, factory function and constructor the reason is that mostly the documentation only shows the two methods defined using the prototype object. This sometimes results in the mistaken idea that the prototype object is somehow involved in the default value mechanism. It isn't and the rule is that if an object has a valueOf method then it is used when the object is being treated like a number of a Boolean and if the object has a toString method it is used when the object is being treated like a string.

Now that you have seen how to create default values you can think up your own uses for them. In some situations it can simplify the use of your objects by allowing them to be used in expressions.

If you would like to see a simple example of how the Date class can be extended to create a TimeInterval class watch this space... well this website at least!

 

If you would like to be informed about new articles on I Programmer follow us on Twitter or Facebook or you can subscribe to our weekly newsletter.

 

Banner


Just JavaScript - In The Beginning Was The Object

JavaScript is a very subtle and sophisticated language and it deserves to be treated in its own right and not as a poor copy of other object-oriented language. In this first chapter of Just JavaScript [ ... ]



Javascript Jems - Lambda expressions

JavaScript has lambda expressions in all but name. Find out how they work and how to use them.


Other Articles

<ASIN:0137054890>

<ASIN:0596517742>

<ASIN:1590597273>



Last Updated ( Friday, 18 November 2011 )
 
 

   
RSS feed of all content
I Programmer - full contents
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.