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.

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

Solution 2

You could also do this using ES6 arrow functions:

init: function(){
    this.testObject.submit( () => {
        console.log(this.testVariable);
    }
}

Arrow functions capture the this value of the enclosing context, avoiding the need to assign this to a new variable, or to use bound functions.

Solution 3

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.

Solution 4

The "this" variable is bound dynamically when a function — any function, regardless of where it was defined — is called.

Without seeing what that "submit" function is supposed to do, or where it's supposed to be used, it's hard to say how to change it. One thing you could do is to define "submit" in your "init" function:

init: function() {
  // whatever
  var instance = this;
  instance.submitForm = function() {
    console.log(instance.testVariable);
    // ...
  };
}

As long as "init" is called initially with "this" set to an instance of one of your objects, you should be good.

Solution 5

You can only access the oThis variable from the context of the object, which is lost because you are inside of another function. or through instantiating a new object. like this

var testInstance = new testObject();

Then you could access oThis by using:

testInstance.oThis;

but that would be redundant

I would try something like this Matt:

init: function(){

var self = this; // this allows you to access the parent object from different contexts

this.testObject.submit(function(){

    console.log(self.testVariable);

}

View more solutions

Comments

[Matt]

Oh the assignment of "this" is inside the init function - of course...goddamit! That's what I was trying to do, but assigning it within the anonymous function instead... thanks for your help!

[kurumkan]

Now I feel like I am the most stupid person in the world -/