The “this” keyword in JavaScript is quite confusing and means different things in different contexts. The “this” keyword is really useful when referring to using custom JavaScript objects.
Let’s suppose that you have a class called “RowSelector” which contains a reference to an input button control. Now, we need to attach the “click” event to the button and access the RowSelector’s instance inside the button click event. Here is the first attempt:
function RowSelector()
{
this.button = $('#button_select');
this.num = 45;
RowSelector.prototype.selectRow = function()
{
alert(this.num);
}
// "this" will refer to the button and not the RowSelector object
this.button.observer('click',function() { alert(this.constructor); });
}
For attaching the event to the button I am using “Prototype.js” library. The “this.constructor” refers to the constructor of the button itself and not the RowSelector object. Prototype.js includes the “bindAsEventListener” method which helps to bind the event with the correct object. Here is the code”:
Using Prototype.js bindAsEventListener:
this.button.observe('click',this.selectRow.bindAsEventListener(this));
Now, when the button is clicked it will refer to the RowSelector object. The selectRow function will be fired which is defined in the code above.
Using the Apply Technique:
What if you want to use plain JavaScript to point to the correct object? Here is a simple solution for that:
// using the method.apply function
//this.button.observe('click',createRef(this, function() { alert(this.num); }));
In the above code I am passing the instance and the function to the createRef method which creates reference to the actual RowSelector object instead of the HtmlInputButton object. Check out the createRef method shown below:
function createRef(instance,method)
{
return function() { method.apply(instance,arguments); }
}
The createRef function applies the instance to the method and returns a new anonymous function.
Using the MS AJAX Library:
If you are using MS AJAX library then you can use the following way to attach the current instance to the event.
// using the AJAX library Function.Delegate function
//this.button.observe('click',Function.createDelegate(this,function() { alert(this.num); }));
The Function.createDelegate is a special method that will basically apply the correct instance to the method. In the back ground it uses the same createRef approach.
Holding the Reference:
Another technique is to hold the reference of current instance “this” in a new variable. This way you can access the current instance using the variable instead of the “this” keyword.
var self = this;
In the above code “self” now refers to the current instance of the object.
Using JQuery:
The “self” or holding back the reference technique is the simplest technique and can be applied easily in different scenarios. Here is a JQuery specific approach which attaches the object’s instance with the passed in event to the function.
using the jquery library!
$(this.button).bind('click',{self:this},function(event)
{
var that = event.data.self;
alert(that.num);
});
So, that is pretty much it! Hopefully, after reading this post you will have a better idea of using the “this” keyword in JavaScript.