How to call method Go from inside a event handler?
function Test()
{
this.yo = "YO";
this.Go = function()
{
alert(this.yo);
}
$(".aha").click(function()
{
//Call Go();
});
}
var test = new Test();
Fiddle: http://jsfiddle.net/BkNfY/9/
A common method is to have a local variable in your constructor that is a reference to the instance:
function Test()
{
var self = this;
this.yo = "YO";
this.Go = function(){
alert(this.yo);
}
$(".aha").click(function(){
self.Go();
});
}
Or you can bind the function you pass to .click():
$(".aha").click(function(){
this.Go();
}.bind(this));
this is a somewhat magical variable that cannot be closed over, so the context is lost in your click handler. You need to set it aside in a variable that can be closed over, and one of the very common ways of doing this is with a variable called self. There is nothing magic about this variable, it's just a somewhat common convention.
var (if needed the same function could reference the global one with window.self). Feel free to use some other name...function Test(){
var that = this;
that.yo = "YO";
that.go = function(){
alert(that.yo);
}
$(".aha").click(function(){
that.go();
});
return that;
}
var test = new Test();
but it would make more sense to do it like this: (if you want to reuse Test)
function Test(){
var that = this;
that.yo = "default YO";
that.go = function(){
alert(yo);
}
return that;
}
var test = new Test();
test.yo = "YO";
$(".aha").click(function(){
test.go();
});
You could keep yo "private" if it is not going to be used outside of Test, e.g. test.yo
function Test(){
var that = this,
yo = "YO"; // yo is now "private"
// so can't modify yo from outside of this function
that.go = function(){
alert(yo);
}
return that;
}
var test = new Test();
$(".aha").click(function(){
test.go();
});
return statement. Also, why is yo suddenly a private variable?yo is still an instance variable in that it is bound to a specific instance of a Test.test.yo. I've edited my comment to say "private" instead of "instance".
The jQuery way :
$('.aha').click($.proxy(function (e) {
// e.target refers to the clicked element
this.Go();
}, this));
Shorter :
$('.aha').click($.proxy(this.Go, this));
$('.aha').click($.proxy(this, 'Go'));