Accessing this from within an object's inline function

user_334308 0
Viewed 24259

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.

inline this object function javascript
5 Answers

A possible answer is to use arrow functions and pass in the object that "this" should refer to...

function create() {

  var thing = { name: "thingy" };

  thing.doStuff = function() {
    alert(this.name);
  }

  thing.doStuff(thing);
}

The reason this works is arrow functions automatically have a final thisArg optional parameter which is bound to this.

user_2107130
Related