8.1 What Are Objects?

Objects are things we deal with every day. JavaScript deals with objects, as do most programming languages, and these languages are called object-oriented programming (OOP). Some people are apprehensive at the thought of tackling this kind of programming, and are perfectly happy to stick with top-down, procedural programs. But just as the everyday objects we use are not necessarily switchblades and chain saws, neither are programming objects. They are just a way of representing data. JavaScript is based on objects, so it's time to jump in.

When talking about JavaScript data types in Chapter 3, we discussed two types: primitive and composite. Objects are composite types. They provide a way to organize a collection of data into a single unit. Object-oriented languages, such as C++ and Java, bundle up data into a variable and call it an object. So does JavaScript.

When you learn about objects, they are usually compared to real-world things, like a cat, a book, or a triangle. Using the English language to describe an object, the object itself would be like a noun.

Nouns are described with adjectives. For the cat, it might be described as fat, furry, smart, or lazy. The book is old, with 400 pages, and contains poems. The triangle has three sides, three angles, and red lines. The adjectives that collectively describe these objects are called properties or attributes. The object is made up of a collection of these properties, or attributes.

In English, verbs are used to describe what the object can do or what can be done to it. The cat eats, sleeps, and meows. The book is read, its pages can be turned forward and backward, and it can be opened or closed by the reader. The triangle's sides and angles can be increased and decreased, it can be moved, and it can be colored. These verbs are called methods in object-oriented languages.

JavaScript supports several types of objects. They are as follows :

User-defined objects defined by the programmer
Core or built-in objects, such as Date, String, and Number (see Chapter 9)
Browser and Document objects (see Chapter 10)

8.1.1 Object Models and the Dot Syntax

An object model is a hierarchical tree-like structure used to describe all of the components of an object. When accessing an object in the tree, the object at the top of the tree is the root or parent of all parents. If there is an object below the parent it is called the child, and if the object is on the same level, it is a sibling. A child can also have children. A dot (.) is used to separate the objects when descending the tree; for example, a parent is separated from its child with a dot. In the following example, the pet object is subdivided into subordinate or child objects: a cat and a dog . The cat and the dog objects each have properties associated with them. In order to navigate down the tree to the cat's name , for example, you would stipulate pet.cat.name, and to get the dog's breed you would stipulate pet.dog.breed .

8.1.2 Creating an Object with a Constructor

JavaScript allows you to create an object in a number of ways, as discussed in detail in "User-Defined Objects" on page 131. One such way is with a constructor. A constructor is a special kind of method that creates an instance of an object. JavaScript comes with several built-in constructors. The new keyword precedes the name of the constructor that will be used to create the object.

 var myNewObject = new Object(argument, argument, ...)

To create the pet object, for example, you could say:

 var pet = new Object();

The Object() constructor, a special predefined constructor function, returns a reference to an object called pet , as shown in Example 8.1. The pet object has been instantiated and is ready to be assigned properties and methods.

Example 8.1

 <html>     <head><title>The Object() Constructor</title>     <script language = "javascript"> 1  var pet = new Object();  2  alert(pet);  </script>     </head>     <body></body>     </html>

EXPLANATION

The Object() constructor creates and returns a reference to a pet object. It is an empty object; i.e., it has no properties.
The returned value from the Object() constructor is a reference to an object, as shown in the Figure 8.2.

Figure 8.2. Output from Example 8.1.

The pet object could also be further subdivided as shown in Figure 8.1.

 pet.cat = new Object(); pet.dog = new Object();

Figure 8.1. A hierarchical tree-like structure used to describe components of an object.

graphics/08fig01.gif

8.1.3 Properties of the Object

Properties describe the object and are connected to the object they describe with a dot. In Figure 8.1, the top object is the pet object. Although cat is an object in its own right, it is also considered a property of the pet object. In fact, any object subordinate to another object is also a property of that object. Both the cat and dog objects are properties of the pet object. The cat and the dog objects also have properties that describe them, such as name, color , size , and so forth.

To assign properties to the cat object, the syntax would be as follows:

 pet.cat.name = "Sneaky"; pet.cat.color="yellow"; pet.cat.size="fat"; pet.cat.attitude = "stuck up";

Example 8.2

 <html>     <head><title>The Object() Constructor</title>     <script language = "javascript">         var pet = new Object(); 1  pet.cat = new Object();  2  pet.cat.name = "Sneaky";  pet.cat.color = "yellow";         pet.cat.size = "fat";         pet.cat.attitude = "stuck up";     </script>     </head>     <body></body>     </html>

EXPLANATION

New new object cat is created. It is subordinate to the pet object, so it is also a property of the pet object.
The cat object is assigned a name property with the value, "Sneaky" . It is also assigned color, size, and attitude properties.

In JavaScript you might see the syntax

 window.document.bgColor = "lightblue";

The window is the top object in the hierarchy, the parent of all parents; the document is an object but, because it is subordinate to the window , it is also a property of the window object. Although the background color, bgColor , is a property of the document object, by itself it is not an object. (It is like an adjective because it describes the document.)

 window     document         bgColor

8.1.4 Methods of the Object

Methods are special functions that object-oriented languages use to describe how the object behaves or acts. The cat purrs and the dog barks. Methods, like verbs, are action words that perform some operation on the object. For example, the cat object may have a method called sleep() or play() and the dog object may have a method called sit() or stay() , and both of them could have a method called eat().

The dot syntax is used to call the methods just as it was used to separate objects from their properties. The method, unlike the property, is followed by a set of parentheses.

 pet.cat.play();

Methods, like functions, can take arguments, or messages that will be sent to the object:

 pet.dog.fetch("ball");

A JavaScript example:

 window.close(); window.document.write("Hello\n");