The this Keyword

Another important JavaScript resource, now that we're discussing functions, is the this keyword. This keyword refers to the object your code is in; and to pass that object to a function, you only have to pass the this keyword. We'll see more about the this object later, especially when dealing with HTML controls such as buttons and text fields, but we can get a preview here.

Suppose, for example, that I want to write a function to handle button clicks as we've already seen in Chapter 1. In this case, however, suppose that I want to display the caption of the clicked button in an alert box, so if the button's caption is Click Me!, I want to display You clicked the Click Me! button . I can do that if I pass this function the actual button object that was clicked, because I can use that object's value property to get the button's caption. Here's the JavaScript for the function, which I'll name describer , that will do this:

 function describer(button)  {      alert("You clicked the " + button.value + " button.")  }

Suppose, however, that I have two buttons in the web pagehow can I pass the specific button object that was clicked to our function? I can do that with the this keywordto pass the current button object to our function, all I have to do is to use this as you see here:

(Listing 03-16.html on the web site)

 <HTML>      <HEAD>          <TITLE>Using the this keyword</TITLE>      </HEAD>      <BODY>          <H1>Using the this keyword</H1>          <SCRIPT LANGUAGE="JavaScript">              <!--             function describer(button)              {                  document.write("You clicked the " + button.value + " button.")                  document.close()              }              // -->          </SCRIPT>          <FORM>  <INPUT TYPE="BUTTON" ONCLICK="describer(this)" VALUE="Click Me!">   <INPUT TYPE="BUTTON" ONCLICK="describer(this)" VALUE="Click Me Too!">  </FORM>      </BODY>  </HTML>

HTML controls such as buttons and text fields are treated as objects in JavaScript. When a button is clicked, the code in the clicked button executes, and in the button's code, you can refer to the button object itself with the this keyword. In the onclick event handler, then, all we have to do is to pass the current button object to the describer function, like this: describer(this) . You can see this web page in Figure 3.13. When the user clicks the Click Me! button, that button is passed to our function, and the caption of that button displays, as you see in Figure 3.14.

Figure 3.13. Using the `this` keyword, start page.

graphics/03fig13.gif

Figure 3.14. Using the `this` keyword, after clicking a button.

graphics/03fig14.gif

We'll see in more detail how to use the this keyword later in this book. Just keep in mind here that the this keyword always enables you to refer to the current object (whether that object has a formal name or not).

The this Keyword

The this Keyword

(Listing 03-16.html on the web site)

Figure 3.13. Using the this keyword, start page.

Figure 3.14. Using the this keyword, after clicking a button.

Figure 3.13. Using the `this` keyword, start page.

Figure 3.14. Using the `this` keyword, after clicking a button.