this keyword

The "this" is special keyword in JavaScript. It is used to refer to the object on which a method is being invoked. So what is the the value of "this" in a given context ? We will state some basic steps. Do not worry if you do not understand it. Just read it once. We will revist it after we present an example

- Is you invoke a function using Function.call or Function.apply, "this" will be set to the first argument passed to call/apply. If you do not pass the first argument , this will refer to the global object (which is the window object in web browsers).

- If the function called was created using Function.bind, this will be the first argument that was passed to bind at the time the function was created. If the function is being invoked as a method of an object, this will refer to that object.

- In all other cases, the function is being invoked as a standalone function not attached to any object, and this will refer to the global object.

Let us try to understand it with some really very simple example 

<html>
<head>
<script type="text/javascript">
<!--
/*
********************************************************
Understanding "this" keyword 
********************************************************
*/

var radius = 20;

function printradius()
{
    document.write(this.radius);
}

printradius();

//-->
</script>
</head>
<body>
</html>

Since there is no argument passed in

function printradius()

the this in

document.write(this.radius);

refers to the global object. And therefore the value of radius printed is 20. It should be simple to understand.

You may like to try this example here.

Now let me state a hypothetical requirement. You have another value of radius defined somewhere else as part of the object. How to you make the "this" access" that variable ? Take a look at the following example 

<html>
<head>
<script type="text/javascript">
<!--
/*
********************************************************
Understanding this keyword 
********************************************************
*/

var radius = 20;
var radiuso = {radius:25};

function printradius()
{
    document.write(this.radius);
}


printradius();
document.write("<br />");
printradius.call(this.radiuso);

//-->
</script>
</head>
<body>
</html>
The statement

var radiuso = {radius:25};

defines an object and inside it, we have a variable radius with value 25.

When we call the function

printradius();

the this inside the function

document.write(this.radius);

refers to the global object and therefore the value of the radius is printed as 20. However, when we call the function using call method as

printradius.call(this.radiuso);

the first object makes up "this". In other words, the this inside the function printradius is NOT a gloabal object, but the very radiuso object. Therefore the value printed by the second function call is 25.
To emphasise - the call() method invokes the function and uses its first parameter as the this pointer inside the body of the function.
You may like to try this example here.

So far we presented the case where we did not have argument to the function. What if the function has an argument ? Take a look at this example 


<html>
<head>
<script type="text/javascript">
<!--
/*
********************************************************
Understanding this keyword 
********************************************************
*/

var radius = 20;
var radiuso = {radius:25};

function printradius(msg)
{    document.write(msg);
    document.write(this.radius);
}


printradius("invoking function : Radius of circle is : ");
document.write("<br />");
printradius.call(radiuso,"invoking function via call: Radius of circle is : ");

//-->
</script>
</head>
<body>
</html>

We have introduced a variable in the function. The first call to the function is straightforward. The this refers to the global variable and value of radius is printed as 20. Now if we wish to use value of the radius inside which is inside the object, we invoke the function using call as

printradius.call(radiuso,"some message");

The important distiction is that invoking function like this has two variables. The first variable is the object radiuso which has the value of the variable radius as 25. It therefore prints radiuso as 25.
You may like to try this example here..
The apply() method is identical to call(), except apply() requires an array as the second parameter. The array then, can have one or more than one arguments that represents the arguments for the target method. Look at the following example 

<html>
<head>
<script type="text/javascript">
<!--
/*
********************************************************
Understanding this keyword 
********************************************************
*/

var radius = 20;
var radiuso = {radius:25};

function printradius(msg1, msg2)
{    document.write(msg1);document.write(msg2);
    document.write(this.radius);
}


printradius("invoking function", "Radius of circle is : ");
document.write("<br />");
printradius.apply(radiuso,["invoking function via call :","Radius of circle is : "]);

//-->
</script>
</head>
<body>
</html>


You may like to try this example here..