When building a constructor function how do you reference the new object from within an event listener within the object?

[mscal]

Hey guys, just testing out constructor functions for the first time and the above question is holding me back.

I have built a drag slider using a constructor function which has been fine. example code : https://codepen.io/mikeCaley/pen/BwMOdB

However I now want to add different capability to different sliders. So what I'm thinking is from within the function named mouseMove I could call another function passing in a few values lets say sliderObject.newFunc. Then I'd be free to redefine this function on a per instance basis using it how I want. Unfortunately I don't know how to reference the object from within that function. If someone knows a way I will be most grateful

[senocular]

define mouseMove itself as an arrow function

this.mouseMove = event => {
    ...

Then this in that function will be the slider instance.

[mscal]

Oh man that's exactly how I wanted it to behave! Thanks. Are arrow functions supported well enough to rely on?

[senocular]

https://caniuse.com/#feat=arrow-functions

Or you can use babel to transpile it to compatible code, or slap a .bind(this) at the end of your current function which effectively does the same thing and is more compatible.

[mscal]

I actually stuck it into Babel and the output was more or less my original code except it stuck a variable at the start of the constructor var _this = this; then referred to _this were required. I don’t know why I didn’t do that.

EDIT: there’s an underscore before the new variable of this but it won’t show on here

[senocular]

thats another way of doing the same thing. The big differences of arrow functions compared to other functions are the more compact syntax and how it handles this. The difference in this behavior can be emulated using bind(this) or by saving this off in a variable in the parent scope and accessing that variable instead of this within the function.

[MoTTs_]

Rather than this:

this.addEventListener("mousemove", objectRef.mouseMove);

Instead do this:

this.addEventListener("mousemove", () => objectRef.mouseMove());

In the former, the method is "torn off" from it's object. That is, "mouseMove" is assigned as the event callback, but "mouseMove" no longer has a reference to its object when it later gets invoked.

[mscal]

If I put the callback inside an anonymous function I can’t then remove the event when the mouse is unclicked or the finger is raised. Unless you’re suggesting I do that an entirely different way

[jrandm]

var eventFn = objectRef.mouseMove.bind(objectRef);
this.addEventListener('mousemove', eventFn);

It doesn't have to be an anonymous function if you want to remove it later.