Accessing this from within an object's inline function

Question

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 1

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     }); }