this keyword sample in Javascript

By: Nicholas C. Zakas Emailed: 1608 times Printed: 2077 times    

Latest comments
By: rohit kumar - how this program is work
By: Kirti - Hi..thx for the hadoop in
By: Spijker - I have altered the code a
By: ali mohammed - why we use the java in ne
By: ali mohammed - why we use the java in ne
By: mizhelle - when I exported the data
By: raul - no output as well, i'm ge
By: Rajesh - thanx very much...
By: Suindu De - Suppose we are executing

One of the most important concepts to grasp in JavaScript is the use of the this keyword, which is  used in object methods. The this keyword always points to the object that is calling a particular method, for example:

var oCar = new Object;
oCar.color = “red”;
oCar.showColor = function () {
    alert(this.color); //outputs “red”
};

Here, the this keyword is used in the showColor() method of an object. In this context, this is equal to car, making this code functionality equivalent to the following:

var oCar = new Object;
oCar.color = “red”;
oCar.showColor = function () {
    alert(oCar.color); //outputs “red”
};

So why use this? Because you can never be sure of the variable name a developer will use when instantiating an object. By using this, it is possible to reuse the same function in any number of different places. Consider the following example:

function showColor() {

    alert(this.color);

}

var oCar1 = new Object;
oCar1.color = “red”;
oCar1.showColor = showColor;
var oCar2 = new Object;
oCar2.color = “blue”;
oCar2.showColor = showColor;
oCar1.showColor(); //outputs “red”
oCar2.showColor(); //outputs “blue”

In this code, the function showColor() is defined first (using this). Then, two objects (oCar1 and oCar2) are created, one with a color property set to “red”, and the other with a color property set to “blue”. Both objects are assigned a property called showColor that points to the original function named showColor() (note that no naming problem exists because one is a global function and the other is a property of an object). When calling showColor() on each object, the oCar1 outputs “red” whereas oCar2 outputs “blue”. This happens because the this keyword in the function is equal to car1 when oCar1.showColor() is called and equal to oCar2 when oCar2.showColor() is called.

Note that the this keyword must be used when referring to properties of an object. For instance, showColor() wouldn’t work if it were written like this:

function showColor() {

    alert(color);

}

Whenever a variable is referenced without an object or this before it, JavaScript thinks that it is a local or global variable. This function then looks for a local or global variable named color, which it won’t find. The result? The function displays “null” in the alert.


Javascript Home | All Javascript Tutorials | Latest Javascript Tutorials

Sponsored Links

If this tutorial doesn't answer your question, or you have a specific question, just ask an expert here. Post your question to get a direct answer.



Bookmark and Share

Comments(4)


1. View Comment

wow amzing

View Tutorial          By: Anonymous at 2009-04-23 01:44:43
2. View Comment

Very Very nice explanation...

View Tutorial          By: anil at 2010-11-04 00:22:58
3. View Comment

Very concise, but it would be more helpful without the typo's. For example, you typed "car" in a few places were you meant "oCar".

View Tutorial          By: Randy at 2010-11-17 14:16:01
4. View Comment

thxxx :) very simple explanation

View Tutorial          By: mohamed at 2012-09-09 04:16:06

Your name (required):


Your email(required, will not be shown to the public):


Your sites URL (optional):


Your comments:



More Tutorials by Nicholas C. Zakas
call() and apply() methods in Javascript
this keyword sample in Javascript
Math object and Math functions in Javascript
Using parseInt() and parseFloat() in JavaScript to convert data types to Numbers
Using toString() in JavaScript to convert data types to String
Javascript Basics
History and evolution of Javascript

More Tutorials in Javascript
Use WinSCP to transfer log files remotely using Javascript
Verifying user input in JavaScript
Pause execution in JavaScript
Javascript to display client date and time on webpage
Getting Browser's height and width using Javascript
Highlighting text on a page using CSS
Using revealTrans to do page transitions in Javascript
Password protect a web page using Javascript
Diabling Right Click option in a browser using Javascript
Scrolling message on the status bar using Javascript
window.frames[i] in Javascript
Form validation using Javascript
Using && in Javascript
The if statement in Javascript
do-while, while, for and for-in loops in Javascript

More Latest News
Most Viewed Articles (in Javascript )
List of Keywords and reverved words in Javascript
Using parseInt() and parseFloat() in JavaScript to convert data types to Numbers
Show how many characters remaining in a html text box using javascript
Bitwise NOT, AND, OR, XOR operators in Javascript
switch in Javascript
call() and apply() methods in Javascript
Highlighting text on a page using CSS
Using revealTrans to do page transitions in Javascript
Diabling Right Click option in a browser using Javascript
Click to remove an element from a select html form using javascript
Using toString() in JavaScript to convert data types to String
Typecasting in Javascript
Using ! and !! in Javascript
Using && in Javascript
The if statement in Javascript
Most Emailed Articles (in Javascript)
Getting Browser's height and width using Javascript
Click to remove an element from a select html form using javascript
List of Keywords and reverved words in Javascript
Javascript to display client date and time on webpage
switch in Javascript
Show how many characters remaining in a html text box using javascript
Using parseInt() and parseFloat() in JavaScript to convert data types to Numbers
window.frames[i] in Javascript
History and evolution of Javascript
Javascript Basics
Typecasting in Javascript
Using ! and !! in Javascript
do-while, while, for and for-in loops in Javascript
break and continue in Javascript
this keyword sample in Javascript