How to bind this to a callback?

Question

My previous question was a duplicate, I read the answer from the post it duplicated but no luck.

I've added in a bind as suggested in the answers in the SO post. But I am still getting undefined.

I have a series of promises, before each execution, I check whether the user has cancelled the promise chain.

My issue is, I cannot access 'this' inside the call back methods, a crude example is below, I cannot access the p.test variable inside getMoreData()

p.test = 'hello!';

p.init = function(){ 
    var self = this;

    this.getData() 
        .then(function(data) {
            return self.shouldContinue(getMoreData,data).bind(self);
        });
}

p.shouldContinue = function(cb, data) {
    // ...
    this.currentRequest = cb.call(this,data);
};

p.getData = function(){
    // return ajax call
};

p.getMoreData = function(){
    console.log(this.test); // undefined
    // return ajax call
};

I've amended the question with new code. The suggestion did not work. — panthro, Jun 23 '15 at 13:24
Because you didn't define `self` at `return self.shouldContinue(getMoreData,data).bind(self);` — fuyushimoya, Jun 23 '15 at 13:25
I mean, you did't do something like `var self = this;` before any thing, so `self` is `undefined`. — fuyushimoya, Jun 23 '15 at 13:27
Hang on; I think there are some important parts to this suggested by your code comments that may not have been noticed. An AJAX call can register a callback in two ways; one, by passing one into the ajax function, or two, by returning something to the effect of a "Promise object" that you can return through the call chain, and call `prom.then(function() {})` on. But I'm not certain you're doing either. You have no arguments to `getMoreData`, and you're never calling `.then` - you're treating the result of `getMoreData` like it's a function. Adding a bit more code would help explain the intent. — Katana314, Jun 23 '15 at 14:00

Katana314 · Answer 1 · 2015-06-23T14:01:19.193

0

return self.shouldContinue(getMoreData,data).bind(self);

It looks like you're accidentally calling shouldContinue, and trying to bind its result, rather than binding the function without calling it. This should get you what you need.

return self.shouldContinue.bind(self, self.getMoreData, data);

Remember that getMoreData is a function that's not defined under variable scope, so it needs to be accessed with a .

EDIT: Also noticed shouldContinue has a similar issue, but I'm confused by the intent of some parts of your code so I've added a comment to ask for more information.

edited Jun 23 '15 at 14:01

answered Jun 23 '15 at 13:31

Katana314

8,429
2
28
36

Thanks, but self.shouldContinue.bind(self, self.getMoreData, data); now no longer calls the getMoreData fnc – panthro Jun 23 '15 at 13:39

score 0 · Answer 2 · answered Jun 23 '15 at 13:36

Did you try this?
You need to bind this into the cb

p.test = 'hello!';

p.init = function(){
var self = this;
this.getData() 
    .then(function(data) {
        return self.shouldContinue(getMoreData,data).bind(self);
    })
}

p.shouldContinue = function(cb, data){
   ...
  this.currentRequest = cb(this,data).bind(this);
};

p.getData = function(){
    //return ajax call
};

p.getMoreData = function(){
    console.log(this.test); //undefined
    //return ajax call
};

This gives me Uncaught TypeError: Cannot read property 'test' of undefined — panthro, Jun 23 '15 at 13:42

score 0 · Answer 3 · answered Jun 23 '15 at 13:57

Change to this:

 p.init = function(){ 
      var self = this;

      this.getData() 
          .then(function(data) {
              return self.shouldContinue.bind(self, self.getMoreData, data)();
          });
  }

bind self.shouldContinue to self and give it appropriate param.
.bind returns a Function, so, you need to call it.So the self.shouldContinue will continues to call self.getMoreData, otherwise it left there waiting to be called.

How to bind this to a callback?

3 Answers3