[Contents]

Object Model

JavaScript is based on a simple object-oriented paradigm. An object is a construct with properties that are JavaScript variables or other objects. An object also has functions associated with it that are known as the object's methods. In addition to predefined objects, you can define your own objects.

This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.

Objects and Properties

A JavaScript object has properties associated with it. You access the properties of an object with a simple notation:

objectName.propertyName
Both the object name and property name are case sensitive. You define a property by assigning it a value. For example, suppose there is an object named myCar (for now, just assume the object already exists). You can give it properties named make, model, and year as follows:

myCar.make = "Ford"
myCar.model = "Mustang"
myCar.year = 69;
An array is an ordered set of values associated with a single variable name. Properties and arrays in JavaScript are intimately related; in fact, they are different interfaces to the same data structure. So, for example, you could access the properties of the myCar object as follows:

myCar["make"] = "Ford"
myCar["model"] = "Mustang"
myCar["year"] = 67
This type of array is known as an associative array, because each index element is also associated with a string value. To illustrate how this works, the following function displays the properties of the object when you pass the object and the object's name as arguments to the function:

function show_props(obj, obj_name) {
   var result = ""
   for (var i in obj)
      result += obj_name + "." + i + " = " + obj[i] + "\n"
   return result
}
So, the function call show_props(myCar, "myCar") would return the following:

myCar.make = Ford
myCar.model = Mustang
myCar.year = 67

Functions

Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure--a set of statements that performs a specific task. To use a function, you must first define it; then your script can call it.

Defining Functions

A function definition consists of the function keyword, followed by

For example, here is the definition of a simple function named hello:

function hello(str) {
   print("Hello " + str)
}
This function takes a string, str, as its argument, adds some HTML tags to it using the concatenation operator (+), and then displays the result to the current document using the write method.

In addition to defining functions as described here, you can also define Function objects, as described in "Function Object".

Using Functions

Defining a function does not execute it. You have to call the function for it to do its work. For example, if you defined the example function hello in your application, you could call it as follows:

hello("world")
The arguments of a function are not limited to strings and numbers. You can pass whole objects to a function, too. The show_props function (defined in "Objects and Properties") is an example of a function that takes an object as an argument.

A function can even be recursive, that is, it can call itself. For example, here is a function that computes factorials:

function factorial(n) {
   if ((n == 0) || (n == 1))
      return 1
   else {
      result = (n * factorial(n-1) )
   return result
   }
}
You could then print the factorials of one through five as follows:

for (x = 0; x < 5; x++) {
   print("<BR>", x, " factorial is ", factorial(x))
}
The results are:

0 factorial is 1
1 factorial is 1
2 factorial is 2
3 factorial is 6
4 factorial is 24
5 factorial is 120

Using the arguments Array

The arguments of a function are maintained in an array. Within a function, you can address the parameters passed to it as follows:

functionName.arguments[i]
where functionName is the name of the function and i is the ordinal number of the argument, starting at zero. So, the first argument passed to a function named myfunc would be myfunc.arguments[0]. The total number of arguments is indicated by the variable arguments.length.

Using the arguments array, you can call a function with more arguments than it is formally declared to accept using. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use arguments.length to determine the number of arguments actually passed to the function, and then treat each argument using the arguments array.

arguments includes additional properties, as described in Function Object.

Creating New Objects

JavaScript has a number of predefined objects. In addition, you can create your own objects. If you only want one instance of an object, you can create it using an object initializer. Alternatively, if you want to be able to create multiple instances of an object, you can first create a constructor function and then instantiate an object using that function and the new operator.

Using Object Initializers

You can create objects only using their constructor functions or using a function supplied by some other object for that purpose, as discussed in "Using a Constructor Function".

You can also create objects using an object initializer. You do so when you only need a single instance of an object and not the ability to create multiple instances.

The syntax for an object using an object initializer is:

objectName = {property1:value1, property2:value2,..., propertyN:valueN}
where objectName is the name of the new object, each propertyI is an identifier (either a name, a number, or a string literal), and each valueI is an expression whose value is assigned to the propertyI. The objectName and assignment is optional. If you do not need to refer to this object elsewhere, you do not need to assign it to a variable.

If an object is created with an object initializer in a top-level script, JavaScript interprets the object each time it evaluates the expression containing the object literal. In addition, an initializer used in a function is created each time the function is called.

Assume you have the following statement:

if (cond) x = {hi:"there"}
In this case, JavaScript creates object and assigns it to the variable x if and only if the expression cond is true.

The following example creates myHonda with three properties. Note that the engine property is also an object with its own properties.

myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}}
JavaScript provides Array objects. You can also use an initializer to create an array. The syntax for creating an array in this way is slightly different from creating other objects:

arrayName = [element0, element1, ..., elementN]
where arrayName is the name of the new array and each elementI is a value for on of the array's elements. When you create an array using an initializer, it is initialized with the specified values as its elements, and its length is set to the number of arguments. As with other objects, assigning the array to a variable name is optional.

You do not have to specify all elements in the new array. If you put 2 commas in a row, the array is created with spaces for the unspecified elements, as shown in the second example below.

If an array is created using an initializer in a top-level script, JavaScript interprets the array each time it evaluates the expression containing the array initializer. In addition, an initializer used in a function is created each time the function is called.

The following example creates the coffees array with three elements and a length of three:

coffees = ["French Roast", "Columbian", "Kona"]
The following example creates the fish array, giving values to two elements and having one empty element:

fish = ["Lion", , "Surgeon"]
With this expression fish[0] is "Lion", fish[2] is "Surgeon", and fish[1] is undefined.

Using a Constructor Function

Alternatively, you can create your own object with these two steps:

  1. Define the object type by writing a constructor function.

  2. Create an instance of the object with new.
To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called car, and you want it to have properties for make, model, year, and color. To do this, you would write the following function:

function car(make, model, year) {
   this.make = make
   this.model = model
   this.year = year
}
Notice the use of this to assign values to the object's properties based on the values passed to the function.

Now you can create an object called mycar as follows:

mycar = new car("Eagle", "Talon TSi", 1993)
This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.

You can create any number of car objects by calls to new. For example,

kenscar = new car("Nissan", "300ZX", 1992)
vpgscar = new car("Mazda", "Miata", 1990)
An object can have a property that is itself another object. For example, suppose you define an object called person as follows:

function person(name, age, sex) {
   this.name = name
   this.age = age
   this.sex = sex
}
and then instantiate two new person objects as follows:

rand = new person("Rand McKinnon", 33, "M")
ken = new person("Ken Jones", 39, "M")
Then you can rewrite the definition of car to include an owner property that takes a person object, as follows:

function car(make, model, year, owner) {
   this.make = make
   this.model = model
   this.year = year
   this.owner = owner
}
To instantiate the new objects, you then use the following:

car1 = new car("Eagle", "Talon TSi", 1993, rand)
car2 = new car("Nissan", "300ZX", 1992, ken)
Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects rand and ken as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:

car2.owner.name
Note that you can always add a property to a previously defined object. For example, the statement

car1.color = "black"
adds a property color to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the car object type.

Indexing Object Properties

If you initially define a property by its name, you must always refer to it by its name, and if you initially define a property by an index, you must always refer to it by its index.

This applies when you create an object and its properties with a constructor function, as in the above example of the Car object type, and when you define individual properties explicitly (for example, myCar.color = "red"). So if you define object properties initially with an index, such as myCar[5] = "25 mpg", you can subsequently refer to the property as myCar[5].

Defining Properties for an Object Type

You can add a property to a previously defined object type by using the prototype property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a color property to all objects of type car, and then assigns a value to the color property of the object car1. For more information, see the prototype property of the Function object.

Car.prototype.color=null
car1.color="black"
birthday.description="The day you were born"

Defining Methods

A method is a function associated with an object. You define a method the same way you define a standard function. Then you use the following syntax to associate the function with an existing object:

object.methodname = function_name
where object is an existing object, methodname is the name you are assigning to the method, and function_name is the name of the function.

You can then call the method in the context of the object as follows:

object.methodname(params);
You can define methods for an object type by including a method definition in the object constructor function. For example, you could define a function that would format and display the properties of the previously-defined car objects; for example,

function displayCar() {
   var result = "A Beautiful " + this.year + " " + this.make
      + " " + this.model
   print(result)
}
Notice the use of this to refer to the object to which the method belongs.

You can make this function a method of car by adding the statement

this.displayCar = displayCar;
to the object definition. So, the full definition of car would now look like

function car(make, model, year, owner) {
   this.make = make
   this.model = model
   this.year = year
   this.owner = owner
   this.displayCar = displayCar
}
Then you can call the displayCar method for each of the objects as follows:

car1.displayCar()
car2.displayCar()

Using this for Object References

JavaScript has a special keyword, this, that you can use within a method to refer to the current object.

Object Deletion

You can remove an object by setting its object reference to null (if that is the last reference to the object). JavaScript finalizes the object immediately, as part of the assignment expression.


[Contents]

Last Updated: 11/26/97 09:25:56


Copyright © 1997 Netscape Communications Corporation