Learn Advanced JavaScript Programming

Table of Contents

The first function, student(), creates a function consisting of four properties. The first three are simple properties like the ones you have seen earlier in this chapter. The fourth property is an instance of an object. This instance is created by the parents() function, as described earlier.

You can refer to all elements of an object with the “dot” syntax:

student1.name
student1.age
student1.grade
student1.parents.father
student1.parents.mother

The property-printing function presented earlier does not fully work properly with nested objects, because it only accesses the object’s topmost level. To print the properties of a general object you can use the following recursive function (works only in Netscape Navigator 3.0x, 4.0, and above):

function getProps(obj, objName) {
  // initialize accumulative variable
  var result = ""
  // loop through properties
  for (var i in obj) {
 // if current property is an object call function for it
 if (typeof obj[i] == "object")
result += getProps(obj[i], objName + "." + i)
 else
result += objName+"."+i+" = "+obj[i]+"<BR>"
  }

  // return final result
  return result
}

The function’s algorithm is fairly simple. It loops through the properties of the main object. If the current property, represented by i, is an object, the function is called once again with the property obj[i] as the object, and the property’s name attached to object’s name with a separating dot (objName + "." + i). Each call to the function returns the string listing the properties at the current level. The value returned by a recursive call is assigned to the variable result which is local in the calling function. Here is an entire HTML document and its output to help you understand this concept:

<HTML>
<HEAD>
<TITLE>Printing properties of nested objects</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function student(name, age, grade, father, mother) {
  this.name = name
  this.age = age
  this.grade = grade
  this.parents = new parents(father, mother)
}

function parents(father, mother) {
  this.father = father
  this.mother = mother
}

var student1 = new student("Sharon", 16, 85, "Mark", "Stacy")

function getProps(obj, objName) {
  var result = ""
  for (var i in obj) {
 if (typeof obj[i] == "object")
result += getProps(obj[i], objName + "." + i)
 else
result += objName + "." + i + " = " + obj[i] + "<BR>"
  }
  return result
}

document.write(getProps(student1, "student1"))

// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Example 12-1. A script that uses the getProps() function to analyze the structure of an object.

Defining Methods

Objects group data and functions that process that data. Data appears in the form of properties. A method is simply a function associated with an object. Consider the following function:

function displayStudent() {
  var result = ""
  result += this.name + " -- "
  result += "a " + this.age + " - year old "
  result += this.grade + "% average student.<BR>"
  result += this.name + "'s parents -- "
  result += this.parents.father + ", " + this.parents.mother
  result += ".<BR>"
  document.write(result)
}

You need to include a reference to this function in the constructor function. This is done exactly like you define properties:

function displayStudent() {
  var result = ""
  result += this.name + " -- "
  result += "a " + this.age + " - year old "
  result += this.grade + "% average student.<BR>"
  result += this.name + "'s parents -- "
  result += this.parents.father + ", " + this.parents.mother
  result += ".<BR>"
  document.write(result)
}

function student(name, age, grade, father, mother) {
  this.name = name
  this.age = age
  this.grade = grade
  this.parents = new parents(father, mother)
  this.display = displayStudent
}

function parents(father, mother) {
  this.father = father
  this.mother = mother
}

Figure 12-5. The output of the function getProps() when handed an object consisting of a method.

The following statements create an instance and invoke the display() method:

var student1 = new student("Sharon", 16, 85, "Mark", "Stacy")
student1.display()

Notice the extensive use of the keyword this inside the function to refer to the object. The main characteristic of a method is that it usually processes the data of its object. You can even create a “constructor method” in the following fashion:

function construct(name, val) {
  this[name] = val
}

function student(name, age, grade, father, mother) {
  this.construct = construct
  this.name = name
  this.age = age
  this.grade = grade
  this.parents = new parents(father, mother)
}

function parents(father, mother) {
  this.father = father
  this.mother = mother
}

var student1 = new student("Sharon", 16, 85, "Mark", "Stacy")
student1.construct("boyfriend", "Tom")

Notice that the method (construct()) refers to the new property via the array notation. You may recall from Chapter 6, Object-Based Programming, that you must use this notation if you wish to use a data value. You can only use the “dot” syntax when you use literals. In this case, name is a data structure, not a literal (a literal is a constant value you can see, such as "boyfriend"). Now you can use the recursive function presented earlier to view the elements of an object, and to see how it works with methods:

Notice that the recursive function works with methods as well as with properties. The statements of the method are placed on the same line. JavaScript automatically adds semicolons to delimit the statement. It also uses a uniform coding scheme if you did not do so originally in the function, as you should.

A method in JavaScript, like a property, belongs only to one instance. You can only invoke it from that instance. All “communication” with an object is done via methods.

Table of Contents