Maintaining original callback "this" with bind function

Question

I understand bind creates a new function with the this value replaced. The example

function edit(req, res) {
    db.User.findById('ABCD', (function(err, user){
        this.foo(user);
    }).bind(this));
};

from Maintaining the reference to "this" in Javascript when using callbacks and closures

has the callback function providing its own parameters.

I am using http.min.js, which handles callbacks like this:

http.get({
      url: "http://localhost:8080/player/status/" + name,
      onload: function() {
        console.log(this.responseText);

notice the lack of this passed in - this.responseText will give me a string I can parse for JSON .

What is the simplest way to maintain the "this" from http.min.js callback and bind to my callback function?

I like the syntax of

http.get({
      url: "http://localhost:8080/player/status/" + name,
      onload: this.handlePlayerInfo.bind(this);

and if possible want to use that, instead of using var that.

Using library: https://github.com/quantumpotato/http.min.js/blob/master/http.min.js

So what happened when you tried it the way you've shown with `.bind()`? — nnnnnn, Jul 27 '17 at 03:07
I'm sure that doesn't work, then you can't access the `this` of `http`. — Elliott Beach, Jul 27 '17 at 03:08
If you use bind, you won't be able to access `this` from http. If you don't use bind, you will have to use `var that` in `handlePlayerInfo`. — Elliott Beach, Jul 27 '17 at 03:08
Is there some reason you're not using `.then()` rather than `onload`? That way you could set `this` to anything you like and receive the response as an argument... (Or does the `onload` handler receive any arguments?) — nnnnnn, Jul 27 '17 at 03:10
nnnnn onload is from the http.min.js library, no arguments. I could modify it, I suppose, is that what you're suggesting? — quantumpotato, Jul 27 '17 at 03:42
The only http.min library that I could find supports promises, so could solve your issue using .then() instead of onload, i.e., a minor change in your code and no change to the library. (But maybe I was looking at the wrong library. You didn't provide a link.) — nnnnnn, Jul 27 '17 at 04:16
@nnnnnn sorry about that. I'll look for your http.min (post a link?) I'm using: https://github.com/quantumpotato/http.min.js/blob/master/http.min.js — quantumpotato, Jul 27 '17 at 16:41

score 0 · Answer 1 · answered Jul 27 '17 at 03:47

It looks like using var that is the only way to maintain the callback "this" state.

So I'll do

Callback.hell = this;
    http.get({
      url: "http://localhost:8080/join/" + Player.name,
      onload: this.handleJoin;
    });

handleJoin(res) {
    var json = JSON.parse(JSON.parse(this.responseText));
    console.log("join" + j);
    console.log(j.name);
    Callback.hell.status.auth = j.auth;
    Callback.hell.status.name = j.name;
    Callback.hell.getPlayerInfo();
  }

Maintaining original callback "this" with bind function

1 Answers1