|
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 MethodsObjects 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 }
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.
|
|||||||||||||||||||||||
With any suggestions or questions please feel free to contact us |