Creating Custom Objects

[ LiB ]

In addition to core JavaScript objects and browser-based objects, JavaScript provides you with the capability to build your own objects.

Three basic steps are required to create an instance of an object:

Define its structure
Assign its properties
Assign functions that will act as object methods

There are two ways to create a new object. The first is to write a function that defines the format of the new object and then to use the new operator to instantiate a new object. For example, the following function defines a new object that contains two properties and one method:

 function Customer(name, phone) {          this.name = name;          this.phone = phone;          this.ShowAlert = ShowAlert; }

The first line defines a function that accepts two arguments. The next two lines use these arguments to establish property attributes. The last line assigns a method named ShowAlert . Notice that there is no associated argument with the defined method.

The ShowAlert method is itself just a function. As shown here, ShowAlert() displays an alert prompt that reveals the name and phone properties of a customer object:

 function ShowAlert() {          window.alert("Customer: " + this.name + " - Phone: " + this.phone) }

The following line of code can then be used to instantiate a new object using the customer() function:

 Customer1 = new customer("Robert Robertson", 8043334444)

This statement creates a new object called Customer1 that has the following properties:

 Customer1.name Customer1.phone

You can call the function again and again to create other new objects. The Customer1 object also has a single method that can be invoked using the following statement:

 Customer1.ShowAlert()

If you put this whole example together, you'll end up with the following script:

 <HTML>   <HEAD>     <TITLE>Script 3.11 - Creating a custom object</TITLE>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!--Start hiding JavaScript statements       function Customer(name, phone) {         this.name = name;          this.phone = phone;         this.ShowAlert = ShowAlert;       }       function ShowAlert() {         window.alert("Customer: " + this.name + " - Phone: " + this.phone);       }     // End hiding JavaScript statements -->     </SCRIPT>   </HEAD>   <BODY>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!--Start hiding JavaScript statements       Customer1 = new Customer("Robert Robertson", 8043334444);       Customer1.ShowAlert();     // End hiding JavaScript statements -->     </SCRIPT>   </BODY> </HTML>

Figure 3.16 shows what you will see when you run this script.

Figure 3.16. Displaying your custom object's property values

graphic/03fig16.gif

Creating Objects with an Object Initializer

An alternative to writing a function to create new instances of objects is to take advantage of an object initializer . In this case, you create the object in the form of an expression by placing properties and methods inside a pair of curly braces, separating the property or method name from its value with a colon . For example, the following statement could be used to create an object called Customer1 :

 Customer1 = {name:"Robert Robertson", phone:8043334444, showAlert:showAlert};

The first two entries inside the braces define the following pair of properties and set their values:

 Customer1.name = "Robert Robertson"; Customer1.phone = 8043334444;

The last entry defines a method:

 Customer1.ShowAlert();

If you use an object initializer, you can rewrite the code in the preceding example as shown here:

 <HTML>   <HEAD>     <TITLE>Script 3.12 - Another way to create a custom object</TITLE>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!--Start hiding JavaScript statements       function ShowAlert() {         window.alert("Customer: " + this.name + " - Phone: " + this.phone);        }     // End hiding JavaScript statements -->     </SCRIPT>   </HEAD>   <BODY>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!--Start hiding JavaScript statements       Customer1 = {name:"Robert Robertson", phone:8043334444, ShowAlert:ShowAlert};       Customer1.ShowAlert();     // End hiding JavaScript statements -->   </SCRIPT>   </BODY> </HTML>

Deleting Your Object

JavaScript provides a delete operator you can use to delete any objects you no longer want. You can add the following line of code to delete the Customer1 object you've just created:

 delete Customer1;

You can also use the delete operator to delete individual object properties or methods without deleting the entire object. For example, to delete the name property of the Customer1 object, type the following:

 delete Customer1.name;

Expanding Object Definitions

You can add additional properties to an object by any of three means:

Rewrite the function to accommodate the new object property
Use the prototype property to add an additional property to all instances of the object
Add a new property to an individual object without affecting other objects

Rewriting the function to accommodate new properties is an obvious option. The prototype property can be used to add a new property to all object instances. For example, to add a property named nickname to all objects of type customer , you can write the following statement:

 customer.prototype.nickname=null;

You can then populate an individual object's nickname property using the following statement:

 Customer1.nickname="Leeman";

To add a new property to an individual object without adding the property to other instances of the object, type the name of the object, a period, and then the name of the new property and assign its value as shown in the following example. Here a new property, zipcode , has been created for the Customer1 object and assigned a value of 23116 .

 Customer1.zipcode = 23116;

[ LiB ]