Javascript (prototype) method call from ajax callback

Question

I have written some object oriented Javascript like this:

function MyClass(){

    this.SomeFunc(arg1){
        result = <some processing on arg1>;
        return result;
    };

    this.SomeOtherFunc(){
        return $.ajax({
            <some restful call>
        }).done(function(){
            var localvar = this.SomeFunc(<value obtained by restful call>);
            <some operations with localvar>;
        });
    };
};

var myObj = new MyClass();
myObj.SomeOtherFunc();

And I get an error in the web console: "this.SomeFunc is not a function". If I call it within a function directly, there is no problem. The call fails only inside Ajax. What would be the proper way of making this function call?

May want to use [`var self = this;`](http://stackoverflow.com/questions/962033/what-underlies-this-javascript-idiom-var-self-this) and make it easier on yourself. scope can be a different concept in JavaScript. — Brad Christie, Sep 09 '13 at 11:03

score 5 · Accepted Answer · answered Sep 09 '13 at 10:45

this in your callback function is different from the this referring to SomeFunc, try doing:

this.SomeOtherFunc(){
    var thatFunc = this; //get hold of this
    return $.ajax({
        <some restful call>
    }).done(function(){
        var localvar = thatFunc.SomeFunc(<value obtained by restful call>);
        <some operations with localvar>;
    });
};

score 0 · Answer 2 · answered Sep 09 '13 at 10:49

Since you're using jQuery, you can also make sure of the $.proxy(http://api.jquery.com/jQuery.proxy/) method which allows you to pass in the context. For example, you could do

this.SomeOtherFunc(){
    return $.ajax({
        <some restful call>
    }).done($.proxy(function(){
        var localvar = thatFunc.SomeFunc(<value obtained by restful call>);
        <some operations with localvar>;
    }, this)); // Pass in what 'this' should be in method
};

Here, the callback function will execute with this referencing the object passed in as the second parameter.

$.proxy(function(){ 
    // do stuff here 
}, this);

score 0 · Answer 3 · answered Sep 09 '13 at 11:08

Think of the primary function MyClass is your constructor. This means you have to define the SomeFunc in there, but you are calling it. That's the problem shown in you console.

You can fix it my defining the function there, instead of calling it:

function MyClass(){
  // ----------vvvvvvvvvvv was missing
  this.SomeFunc = function(arg1) {
    result = <some processing on arg1>;
    return result;
  };

  // ---------------vvvvvvvvvvv same here
  this.SomeOtherFunc = function() {
    var _this = this
    return $.ajax({
      <some restful call>
    }).done(function(){
      // ------------v use _this instead of _this
      var localvar = _this.SomeFunc(<value obtained by restful call>);
      <some operations with localvar>;
    });
  };
};

var myObj = new MyClass();
myObj.SomeOtherFunc();

Another way of defining the functions is via the prototype:

MyClass = function() { ... }
MyClass.prototype.SomeFunc = function(arg1) {
  return <some processing on arg1>
}
MyClass.prototype.SomeOtherFunc = function() {
  var _this = this
  return $.ajax({ ... }).done(function(data) {
    _this.SomeFunc(data)
  })
}

The main difference is, that creating functions in the constructor will create a new function for each call of new MyClass.

Hope that helps.

Javascript (prototype) method call from ajax callback

3 Answers3