Javascript Studying: The "this" keyword [Archive]

View Full Version : Javascript Studying: The "this" keyword

Misto-Roboto

04-12-2004, 09:30 PM

I'm starting to screw around with custom objects in Javascript and I got a basic idea of it, but I'm not understanding what my book says. I need some example that can give some blunt examples of how the this keyword works. Also so others understand where I'm coming from the line my book I'm reading says this:

Inside the function definition, the this keyword refers to the object that owns the method.

Any help?

Mortis

04-12-2004, 11:31 PM

An example and an explanation--or an attempt at one anyway ;). We are writing new text inside two different div objects.

The div1 object is specified by calling the document.getElementById method.:
<div id="div1" onMouseOver="document.getElementById('div1').innerText='New text for the div'">document.getElementById('div1')</div>

The div2 object is specified using the 'this' keyword. The div2 object is the 'owner' of the onMouseOver method:
<div id="div2" onMouseOver="this.innerText='New text for the div'">This</div><br>

While both will do the job, the second version using the 'this' keyword is more concise and easier to maintain. If you were to copy and paste several copies of the first version in your web page, and not rename the div, the page would not function as you expected. In IE, only the first div1 is updated, regardless of which div you mouse over.

However, if you copy and paste the second example, each div object will update only itself when you mouse over. There is no ambiguity. You could even remove the id parameter and the function will work as expected. Since copy and paste is such a powerful programming technique--anything to make code reusable is a plus!

Hope that helps, and I hope I made some sense... :stickout:

Misto-Roboto

04-13-2004, 07:42 PM

Then how come something like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ceres Station: Space Colony - This</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="ceres.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript">
function changeColor()
{
this.style.color = '#00CC00';
}
</script>
</head>
<body>
<?php require_once("template01.inc"); ?>
<h1 onClick="changeColor();">This is a H1 Element</h1>
<?php require_once("template02.inc"); ?>
</body>
</html>

gives me an error?

brianbloom

04-13-2004, 08:21 PM

In your example, the function "changeColor" isn't associated with any object. It's just a free floating function. For it to change a specific object, you'd need to pass it a "handle" of the object you want to change.

try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ceres Station: Space Colony - This</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="ceres.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript">
function changeColor(someobject)
{
someobject.style.color = '#00CC00';
}
</script>
</head>
<body>
<?php require_once("template01.inc"); ?>
<h1 onClick="changeColor(this);">This is a H1 Element</h1>
<?php require_once("template02.inc"); ?>
</body>
</html>

When I use the "this" in the H1, it refers to the H1 itself, so that when I call changeColor, I pass a handle for the H1 to the function. The function has a local variable (called someobject in my example) that recieves the handle and so the .style property is treated as if working directly on the original H1 without me having to directly refer to it with some absolute reference like "document.form.blah.blah" etc. I give it a pointer right to the object itself.