Using the JavaScript Object Object

We can convert our previous example (Listing 23-08) to use the Object object. Here's how that looks. Note that each time we create a new object in the constructor now, we use the new operator to create a new Object object, and then add properties to the object and return the new object:

(Listing 23-11.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Creating Custom Objects          </TITLE>      </HEAD>      <BODY>          <H1>Creating Custom Objects</H1>          <FORM NAME="form1">              <TEXTAREA NAME="textarea1" ROWS="5" COLS="40"></TEXTAREA>              <BR>              Friend Rank: <INPUT TYPE="TEXT" NAME="text1">              <INPUT TYPE="BUTTON" ONCLICK="getName()" VALUE="Get Name">              <BR>              <INPUT TYPE="BUTTON" ONCLICK="sort()" VALUE="Sort by Rank">          </FORM>          <SCRIPT LANGUAGE="JavaScript">              <!--  function friend(name, phone, rank)   {   var object1 = new Object()   object1.name = name   object1.phone = phone   object1.rank = rank   object1.display = display   return object1   }  function display()              {                  window.alert("Name: " + this.name)              }              var array1 = new Array(4)  array1[0] = friend("Ed", "555-1111", 4)   array1[1] = friend("Harold", "555-2222", 1)   array1[2] = friend("Nancy", "555-3333", 3)   array1[3] = friend("Sandy", "555-4444", 2)  for(var loopIndex = 0; loopIndex < array1.length; loopIndex++){                 document.form1.textarea1.value += "Name: " + array1[loopIndex].name + " "                 document.form1.textarea1.value += "Phone: " + array1[loopIndex].phone + "  "                 document.form1.textarea1.value += "Rank: " + array1[loopIndex].rank + "\n"              }              function getName()              {                  for(var loopIndex = 0; loopIndex < array1.length; loopIndex++){                      if(array1[loopIndex].rank == document.form1.text1.value) {                          array1[loopIndex].display()                      }                  }              }              function sort()              {                  array1.sort(sorter)                  document.form1.textarea1.value = ""                  for(var loopIndex = 0; loopIndex < array1.length; loopIndex++){                      document.form1.textarea1.value += "Name: " + array1[loopIndex].name +  " "                      document.form1.textarea1.value += "Phone: " + array1[loopIndex].phone  + " "                      document.form1.textarea1.value += "Rank: " + array1[loopIndex].rank +  "\n"                  }              }              function sorter(a, b)              {                  if(a.rank < b.rank) return -1                  if(a.rank > b.rank) return 1                  return 0              }              // -->          </SCRIPT>      </BODY>  </HTML>

That's all it takes. Now our objects are created explicitly using the JavaScript Object object. This code gives the same results as Figures 23.7 through 23.10 (except for default property values, which it doesn't implement).