A discussion about how <this> works in p5 and js #58
Replies: 1 comment 2 replies
-
// Tong, You've done a great job boiling down this problem // I think things will fall into place for you when you understand // 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 let object1 = { // here we call the talk function as a property of object 1 object1.talk(); // Hi, I'm Abby // here we declare a variable and assign object1.talk to it. // we now have two ways to reference the same function. 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 // We can look at it kind of inside out too. // object 2's talk property is assigned to talkC. talkC(); // Yo, I'm object2.talk(); // Yo, I'm Bob // when we have a callback situation (like setTimeout, or partySubscribe) setTimeout(object1.talk, 1000); // delay: Hi, I'm // after a delay setTimeout calls the function provided, but // 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 // i've found that this book series does a good job digging // https://github.com/getify/You-Dont-Know-JS |
Beta Was this translation helpful? Give feedback.
-
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()
andpartyEmit()
, I found they also worked on functions as object properties.For example,
onPlaySound()
here is a function of the objectsoundController
instead of a global function, but it still works when I setpartySubscribe("playSound", soundController.onPlaySound)
and callpartyEmit("playSound")
.But here come some issues I encountered then:
nested_onPlaySound()
is another function of soundController; it callsonPlaySound()
within it.soundController.nested_onPlaySound()
works well when being called independently.But once I get it subscribed with
partySubscribe()
and try to trigger it withpartyEmit()
, it says this.onPlaySound is not a function.I cannot technically tell what type of issue this is, but I remember that
setInterval()
andsetTimeout()
don't supportthis
either. In my understanding, it's because these functions belong to other objects(likesetInterval()
andsetTimeout()
belong towindow
?), sothis
within them refer to their own parent objects.When I used
partyEmit("playSound")
to triggersoundController.nested_onPlaySound()
,this
withinnested_onPlaySound()
doesn't point tosoundController
. I guess it points to canvas or window or anyway a parent object which calledpartyEmit()
but gets omitted in p5.Here is another test:
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 whatthis
actually points at is right the parent object.So once I discarded
this
in the declaration ofnested_onPlaySound()
and usedsoundController
directly, the problem will be seemingly solved.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.Beta Was this translation helpful? Give feedback.
All reactions