0

I am dealing with an API where It was a method on the Instance which returns a callback function

   myPlayer.onPlay(function() {
            console.log(this)
        })

Now I would expect the context of this to be the player but it is not it is the callback function. I have tried binding the context of this like this but it doesn't work either.

I expected this to be myPlayer as that is the context in which the onPlay function was executed?

myPlayer.onPlay(function() {
        console.log(this)
    }).bind(this)

How would I get the context to be the instance of the player? Am i missing something?

Marcus Petty-Saphon
  • 41
  • 2
  • 8
  • what do you expect `this` to be? – evolutionxbox Jan 06 '21 at 16:40
  • @evolutionxbox I expected this to be myPlayer as that is the context in which the onPlay function was executed? – Marcus Petty-Saphon Jan 06 '21 at 16:41
  • `this` is late-bound in JS and by default will be the calling context. – Dave Newton Jan 06 '21 at 16:41
  • 2
    Usually `.bind(this)` is the correct solution. You can also use an arrow function, which automatically binds `this`. If your solution isn't working, you need to post a [mcve]. – Barmar Jan 06 '21 at 16:42
  • 1
    You need to call `.bind()` on the function, not on the return value of `.onPlay()`. And you need to use `.bind(myPlayer)` if you wanted to bind `this` to the player. Although really then you should just refer to the `myPlayer` variable in the function, not to `this`. – Bergi Jan 06 '21 at 16:42
  • @Barmar But binding here, expecting `this` to be `myPlayer`, seems almost certainly wrong (even if `bind` was called correctly). – Dave Newton Jan 06 '21 at 16:42
  • 2
    It depends on what myPlayer is doing.... – epascarello Jan 06 '21 at 16:43
  • Try `this.onPlay(...).bind(this)` – Barmar Jan 06 '21 at 16:44
  • 1
    "*I expected this to be myPlayer as that is the context in which the onPlay function was executed?*" - no. We don't know how `onPlay` calls its callback, you haven't shared its code (or linked the library documentation). Nothing in your code indicates what the `this` value would become - [it depends on how it is called](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) internally. – Bergi Jan 06 '21 at 16:44
  • @Barmar I doubt `onPlay(...)` returns a function – Bergi Jan 06 '21 at 16:45
  • @MarcusPetty-Saphon To slightly expand on what Bergi is saying--`mPlayer` may or may not bind the provided function to itself, so `this` is indeterminate w/ the information provided. – Dave Newton Jan 06 '21 at 16:45
  • 1
    @Bergi Right. Maybe `myPlayer.onPlay(function() { ...}.bind(this))` or `myPlayer.onPlay(() => { ... })` – Barmar Jan 06 '21 at 16:47
  • With code [like this](https://jsfiddle.net/m4vdh6a7/) it works as expected. –  Jan 06 '21 at 16:48
  • 1
    This is probably a duplicate of https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback or https://stackoverflow.com/questions/1369004/this-keyword-in-event-methods-when-using-javascript-prototype-object – Barmar Jan 06 '21 at 16:48

1 Answers1

0

You would have to do

myPlayer.onPlay(
  function() {
    console.log(this);
  }.bind(myPlayer)
);

Since you haven't provided what .onPlay will return, I don't think it would return an object with a bind method. So you have to use bind on the function itself. You can't use this in the bind if you want it to be the myPlayer, because in your current call scope this doesn't mean something. It can mean something, but it most likely won't be the player, or else you would have done this.onPlay. You have to bind myPlayer with bind, not this.

shadowtime2000
  • 108
  • 6