Objects

As described earlier in the chapter, custom objects can easily be created in JavaScript for use in functions. To do this, you must first define the object's properties. Once these are defined, new instances of the object can be created and new methods can be added.

Defining an Object

To define a new object, you must first outline its properties. Let's define an object named contact and set a few of its properties, as in name , telephone , and title :

function contact(name, telephone, title) { 
 this.name = name;
 this.telephone = telephone;
 this.title = title;
}

This results in a new contact object that is defined along with its properties. The contact object can now be created using the new statement.

contact1 = new contact("Mabel Chin","[phone]","Estate Attorney");

This creates an object called contact1 with three bound properties: contact1.name , contact1.telephone , and contact1.title . This method is called the instance of the object. Let's create another contact using the new statement once again:

contact2 = new contact("Silke Hase","[phone])","Development Manager");

When creating contact2 , which is actually just another new instance of the contact object, contact2 's properties are very independent of those in contact1 . Here's another way to set the properties of an object:

Contact2.birthday = "April 5"

This adds the birthday property to contact2 without affecting the properties of contact1 or having it defined as an instance to an object. To add the birthday property to all instances of the object, you would have to add the property to the object's definition, as in this example:

function contact(name, telephone, title,

birthday

) { 
 this.name = name;
 this.telephone = telephone;
 this.title = title;
 this.birthday = birthday;
}

Objects as Properties of Objects

It is also possible to create objects as properties to other objects. This means associating an object's property with another object. For example, let's create a company object:

function company(name, city, state){ 
 this.name = name;
 this.city = city;
 this.state = state;
}

Now let's create two new instances of the company object:

company1 = new company("Fancy Bank","Bedford","MA"); 
company2 = new company("Emerging Innovations","Stoneham","MA");

Using these two new company objects, we can easily create the following new contact objects adding the company 's properties to each:

contact1 = new contact("Mabel Chin","[phone]","Estate Attorney","September 17",

company1.coname,company1.city,company1.state); 
contact2 = new contact("Silke Hase","[phone]","Development Manager","May 5",

company2.coname,company2.city,company2.state);

By making the company properties part of the contact object, it is now easy to refer to the company properties for each contact object:

contact2.coname

Adding Methods to Objects

Methods can be added to an object's definition by creating functions that define the method. Methods are merely functions associated with an object. Let's add a method called displaycontact to the contact object that will print the contact's name, phone, title, birthday, company, city, and state to a document window:

Function displaycontact(contact) { 
document.write("Contact Name:	" + this.name + "
");
document.write("Telephone:	" + this.telephone + "
");
document.write("Title:		" + this.title + "
");
document.write("Birthday:	" + this.birthday + "
");
document.write("Company:	" + this.coname + "BR>");
document.write("City:		" + this.city + "
");
document.write("State:		" + this.state + "
");
}

To use this method, it must be included in the contact object's definition:

function contact(name,telephone,title,birthday,coname,city,state){ 
this.name = name;
this.telephone = telephone;
this.title = title;
this.birthday = birthday;
this.coname = coname;
this.city = city;
this.state = state;
this.displaycontact = displaycontact;
}

The following command would be used to output contact2 's information to the document window:

contact2.displaycontact();

Figure 16.17 shows what the output looks like in a document window.

Figure 16.17. The contact2 object's properties output to the browser.