How to find the right "this" object in inner classes?

Question

I am writing a piece of JavaScript like that:

MyClassA.prototype.method1 = function(){
    //here, "this" refers to my instance of MyClassA
    $.ajax({
        url : "http://foo.com/foo",
        success: function(data) {
            //OMG! "this" now refers to another object
        }
    }
});

I need to access to the this element of MyClassA in the success function. In Java, it is possible to use MyClassA.this to refer to the right this instance inside an inner class. Is there a comparable way to do that in JavaScript?

Is

MyClassA.prototype.method1 = function(){
    var myClassAThis=this;
    $.ajax({
        url : "http://foo.com/foo",
        success: function(data) {
            myClassAThis.method2();
            ...
        }
    }
});

the standard way to proceed in such situation?

You have answered yourself, that's correct way to do and another way is to do with bind. you can check here http://stackoverflow.com/questions/25137044/this-property-scope-in-javascript/25137098#25137098... — Bhojendra Rauniyar, Sep 03 '14 at 11:16
I don't see any inner classes in your code? `MyClassA` is the only constructor that you are using. — Bergi, Sep 03 '14 at 12:30

score 4 · Accepted Answer · answered Sep 03 '14 at 11:15

4

The common pattern is to set this into a variable, yes. However, what you're describing creates an implicit global variable. To prevent it, use the var keyword:

var that = this;

And later

that.method2();

Another solution would be with a closure.

MyClassA.prototype.method1 = function(){
    (function(that) {
        $.ajax({
            url : "http://foo.com/foo",
            success: function(data) {
                that.method2();
                ...
            }
        });
    })(this);
});

answered Sep 03 '14 at 11:15

Madara's Ghost

172,118
50
264
308

well spotted: I had forgotten the "var". – julien Sep 03 '14 at 11:48
That closure looks very unnecessary. It also is way longer… – Bergi Sep 03 '14 at 12:34
Thanks for the suggestion. I am not keen on closures - it makes the code hard to read. – julien Sep 03 '14 at 13:04
@Bergi "Way longer" exactly one extra line from setting a variable. – Madara's Ghost Sep 03 '14 at 13:33
@SecondRikudo: One line more than declaring a variable, and notably adding one level of unnecessary indentation. – Bergi Sep 03 '14 at 13:36
@Bergi personally speaking, I'd use a module pattern here instead of prototyping. It make things a lot cleaner. But sure, whichever works. I like this style better than `that = this`. – Madara's Ghost Sep 03 '14 at 13:55

user733421 · Answer 2 · 2014-09-03T12:26:32.637

0

I'd rather do

MyClassA.prototype.method1 = function(){   
  return $.ajax({
    url : "http://foo.com/foo"      
  }
});

MyClassA.prototype.method2 = function(){   
   this.method1().done(function(data) {
    //do method2 code
  })

});

edited Sep 03 '14 at 12:26

answered Sep 03 '14 at 11:24

user733421

497
4
14

1

Please add some clarification to make it a good answer. – Ilya Luzyanin Sep 03 '14 at 12:17
1

This doesn't apply as `method2()` shouldn't implicitly invoke `method1()`, but the other way round. – Bergi Sep 03 '14 at 12:33

score 0 · Answer 3 · answered Sep 03 '14 at 11:49

MyClassA.prototype.method1 = function(){
myClassAThis=this; //1
$.ajax({
    url : "http://foo.com/foo",
    success: function(data) {
        myClassAThis.method2(); //2
        ...
    }
}
});

which object "this" refers to at any any point in your code actually depends on how you invoke the function.

In this case, 1. Either as a usual function. Exampe:- functionName() 2. Or as a method invocation. Example:- new someOuterFunction().someInnerFunction()

(note : there are two other types of invocations)

In the first case, the this parameter which is implicitly passed into the function scope is the global object context, which in the case of the browser is the window object.

In the second case, the this parameter actually refers to the instance on which the function was invoked, in this case it would be the someOuterFunction instance.

Keeping those two in mind, if you look at the above code //1, what "this" refers to depends on how exactly you invoke the method1. If you happen to invoke it as a normal function, then this refers to the global object, and thus it will look for method2 in the global context and not MyClassA function.

In you happen to invoke method1 as method invocation by referring to an instance of MyClassA then, "this" actually points to that instance. Which would then search for Method2 in the MyClassA instance(or function) and invoke that.

Hope that helps!! or at least clear up the confusion.. :)

I was not confused before reading your answer... now I am a bit. Thanks anyway! — julien, Sep 03 '14 at 11:54

How to find the right "this" object in inner classes?

3 Answers3