Matt Matt - 6 months ago 9
Javascript Question

Accessing this from within an object's inline function

I'm having difficulty referencing "this" from within a javascript inline function, within an object method.

var testObject = {
oThis : this,
testVariable : "somestring",
init : function(){

console.log(this.testVariable); // outputs testVariable as expected

this.testObject.submit(function(){

var anotherThis = this;
console.log(this.testVariable) // undefined
console.log(oThis.testVariable) // undefined
console.log(testObject.testVariable) // outputs testVariable
console.log(anotherThis.testVariable) // undefined

}

}


How do I access
this.testVariable
from within the submit function?
I'm also using jQuery as well, if that makes a difference.

I wonder if this is the best approach - and maybe I should have submit as a separate function, and then reference that inline, like:

init : function(){

this.testObject.submit = this.submitForm;

},
submitForm : function(){
// do validation here
console.log(this.testVariable) // outputs testvariable

.
.
.

return valid;
}


But this didn't seem to work either - and I think I'd just like to keep the submit function inline within my
init
method for now.

Answer

A common way is to assign the this you want to a local variable.

init: function() {
   var _this = this;
   this.testObject.submit(function() {
        console.log(_this.testVariable); // outputs testVariable 
   });
}