Adding Methods to Existing Objects

You also can add methods to existing objects in the same way as we just added properties in the preceding topic; you just assign a function name to the name of the method you want, like this: object .method = function .

We've been adding properties and methods to objects one at a time, but you also can use prototypes to add properties or methods to all objects of a particular type simultaneously . We saw an example of this in Chapter 19. In that example, I wanted to add a method named sqrt to all Number objects that returned the square root of the number. For example, you could use that method like this:

 var n = new Number(5)  var squareRoot = n.sqrt()

To make this work, I added a prototype named sqrt to all Number objects. In addition, I connected that prototype to a function named sqRoot like this:

 Number.prototype.sqrt = sqRoot          .          .          .

As with any other method, in the sqRoot method, I can get access to the current Number object with the this keyword, and the value stored in the current Number object as this.valueOf() . To return the square root of the number, then, I can use this code in the sqRoot function:

 Number.prototype.sqrt = sqRoot  function sqRoot()  {  return Math.sqrt(this.valueOf())  }

We saw this at work in Chapter 19, in Listing 19-04.html. In that example, the user can enter a number in a text field and click a button to see the square root of that number displayed in a text field:

 <HTML>      <HEAD>          <TITLE>              Using the prototype Property          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             Number.prototype.sqrt = sqRoot              function sqRoot()              {                  return Math.sqrt(this.valueOf())              }              function display()              {                  var n = new Number(document.form1.text1.value)                  document.form1.text1.value = n.sqrt()              }              // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using the prototype Property</H1>          <FORM NAME="form1">              <INPUT TYPE="TEXT" NAME="text1">              <INPUT TYPE="BUTTON" ONCLICK="display()" VALUE="Get the Square Root">          </FORM>      </BODY>  </HTML>

You can see the results in Chapter 19, in Figure 19.4, where the code is finding the square root of 5 and displaying that value in a text field.

As you can imagine, the prototype property is very useful when you want to augment objects such as String or Number objects, or any other custom objects that you've created. When you use the prototype property, you can automatically add properties and methods to all such objects simultaneously.

That's it for cookies and custom objects in this chapter. In the next chapter, we'll take a look at the server side of things when we examine server-side programming, such as writing scripts in Perl that can interact with JavaScript.