“this” does not refer to what I want [duplicate]

Question

This question already has an answer here:

• How to access the correct `this` inside a callback? 10 answers

In one of my classes, a method performs AJAX requests. In the callback function of a request, I need to call another method of my object, using this. But this does not refer to my object in this context, so I don't know how to do... Is it only possible ?

To clarify, please consider the following code :

function MyClass(arg) { 
    this.foo = arg; 
} 

MyClass.prototype = { 
    myMethod: function() { 
        console.log("I am myMethod");
    },
    myGet: function (){
        $.get("http://example.iana.org/",function(data){
            this.myMethod(); // does not work, because 'this' does not refer to my object
        });
    }
} 

var obj = new MyClass("Javascript is complicated"); 

obj.myGet();

Answer 1

You can define a variable to store this in the closure :

myGet: function (){
    var _this = this;
    $.get("http://example.iana.org/",function(data){
        _this.myMethod();
    });
}

or use $.proxy :

myGet: function (){
    $.get("http://example.iana.org/", $.proxy(function(data){
        this.myMethod();
    }, this));
}

or, if you don't do more than calling myMethod in the callback :

myGet: function (){
    $.get("http://example.iana.org/", $.proxy(this.myMethod, this));
}

In modern browsers you can also use bind. When I don't have to be compatible with IE8 I do

myGet: function (){
    $.get("http://example.iana.org/", this.myMethod.bind(this));
}