A discussion about how <this> works in p5 and js

[ShaoT-Hugh]

This is a discussion on how this works in p5 as well as js. I guess this should be a general question about js and not specifically about p5.party but I encountered it when I was using p5.party so I just post it here.
Here is my test code modified from Sound Board example: https://editor.p5js.org/ShaoT-Hugh/sketches/NdueHSn2L

When I was trying to revise my program with partySubscribe() and partyEmit(), I found they also worked on functions as object properties.

function setup() {
  soundController = {
    onPlaySound: (name) => console.log(sounds[name])
  }
  partySubscribe("playSound", soundController.onPlaySound);
}
// partyEmit("playSound") works normally

For example, onPlaySound() here is a function of the object soundController instead of a global function, but it still works when I set partySubscribe("playSound", soundController.onPlaySound) and call partyEmit("playSound").

But here come some issues I encountered then:

function setup() {
  soundController = {
    onPlaySound: (name) => console.log(sounds[name]),
    nested_onPlaySound: (name) => this.onPlaySound(name)
  }
  partySubscribe("playSound", soundController.nested_onPlaySound);
}
// partyEmit("playSound") will report an error that "this.onPlaySound is not a function"

nested_onPlaySound() is another function of soundController; it calls onPlaySound() within it.

soundController.nested_onPlaySound() works well when being called independently.

But once I get it subscribed with partySubscribe() and try to trigger it with partyEmit(), it says this.onPlaySound is not a function.

I cannot technically tell what type of issue this is, but I remember that setInterval() and setTimeout() don't support this either. In my understanding, it's because these functions belong to other objects(like setInterval() and setTimeout() belong to window?), so this within them refer to their own parent objects.

When I used partyEmit("playSound") to trigger soundController.nested_onPlaySound(), this within nested_onPlaySound() doesn't point to soundController. I guess it points to canvas or window or anyway a parent object which called partyEmit() but gets omitted in p5.

Here is another test:

function setup() {
  soundController = {
    onPlaySound: (name) => console.log(sounds[name]),  // this function won't be called by partyEmit("playSound")
    nested_onPlaySound: (name) => this.onPlaySound(name)
  }
  partySubscribe("playSound", soundController.nested_onPlaySound);
}
function onPlaySound(name) { // this function will be actually called by partyEmit("playSound")
  console.log(soundsPlus[name]);
}

Here if I have another global function whose name is also onPlaySound at the same time, partyEmit("playSound") will actually call that function instead. I think this verifies what this actually points at is right the parent object.

So once I discarded this in the declaration of nested_onPlaySound() and used soundController directly, the problem will be seemingly solved.

function setup() {
  soundController = {
    onPlaySound: (name) => console.log(sounds[name]),
    nested_onPlaySound: (name) => soundController.onPlaySound(name)
  }
  partySubscribe("playSound", soundController.nested_onPlaySound);
}
// this time everything works as I wish

I also remember there is a way to change the pointer of this forcibly in js, but I'm not sure how to use it and when I need to use it exactly. Also I'm not sure if my understanding above is correct or not. I'm expecting some more explicit clarification on this question.

[jbakse]

// Tong, You've done a great job boiling down this problem
// and it looks like you've got a pretty clear picture of
// what is happening, and what you want to happen.

// I think things will fall into place for you when you understand
// that the value of this is decided when the function is called
// and not when the function is defined

// also, this topic is complicated a bit by the difference between declaring functions with funciton and with ()=> arrow syntax.

// Lets focus on function() syntax.

// here an object is defined. It has a name property and a
// talk property. The value of this in talk isn't determined
// yet it is determined and can change based on how it is
// called.

let object1 = {
name: "Abby",
talk: function () {
console.log(this);
console.log("Hi, I'm " + this.name);
},
};

// here we call the talk function as a property of object 1
// so this will be object 1.

object1.talk(); // Hi, I'm Abby

// here we declare a variable and assign object1.talk to it.
let talkB = object1.talk;

// we now have two ways to reference the same function.
// if we call the function using the new reference then
// this won't be object 1. (It will be the window if we
// are not in strict mode)

talkB(); // Hi, I'm

// we can still call it the first way...

object1.talk(); // Hi, I'm Abby

// and it still works.

// So we can see that this is determined at the time the
// function is called. If you call the function as a property
// of an object, that object becomes this.

// We can look at it kind of inside out too.
// here talkC is defined as a plain function.
function talkC() {
console.log("Yo, I'm " + this.name);
}

// object 2's talk property is assigned to talkC.
let object2 = {
name: "Bob",
talk: talkC,
};

talkC(); // Yo, I'm

object2.talk(); // Yo, I'm Bob

// when we have a callback situation (like setTimeout, or partySubscribe)
// run into an issue.

setTimeout(object1.talk, 1000); // delay: Hi, I'm

// after a delay setTimeout calls the function provided, but
// calls it directly and not as a property of object1, and
// this isn't what we want.

// we can fix it like this:

setTimeout(object1.talk.bind(object1), 1000); // delay: Hi, I'm Abby

// the bind function configures the argument to setTimeout
// such that it will be called with this set to object1.

// i've found that this book series does a good job digging
// into the details on things like this.

// https://github.com/getify/You-Dont-Know-JS
// https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md
// https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch1.md

[ShaoT-Hugh]

Thanks for explaining. I come to think of it. I saw bind function when I was learning js initially but I didn't really understand in which condition I should use it. Now I see it.

And arrow-function does differ from normal functions in this matter. After I read 1&2 ch, I realized this in arrow-function cannot be rebound easily by binding functions. I need to be cautious if I want to use arrow-function next time. I guess currently for me it's better not to use it as it's still not necessary most of times. But I might need to use it some day just like I need bind this time.

[jbakse]

Also worth reading the MDN ref page for arrow functions:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

They mention "and should not be used as methods." which is what you were doing in your original example above.

Arrow functions tend to be nice when you are inlining an anonymous function and you want this to mean the same thing inside the anon function as it does in the context.