Help with javascript `this` keyword and `bind`

p5.js Coding Questions
1

It’s a bit of a follow up of this question but no need to read back. As that one is marked solved, I’m starting a new topic.

Not pasting the whole code, but making a pseudo example here to isolate the issue.

I cooked up something like this:

I have 2 classes. Grid and Gpoint. Gpoint is only instantiated by Grid’s make_Gpoint() method. Grid is instantiated once in the main sketch.

Ok. Now I need Gpoint to have an update func, that needs some data (changeable data. Should I say: a state?) from the Grid instance. No problem, as Grid is making the instances I just added the instance to the constructor, I tried:

(main sketch)

//in setup
grid = new Grid(/*blah*/)
gp = grid.make_Gpoint(x, y)

//in draw
gp.update(x,y);

(in Grid)

make_Gpoint(){
  //blah
  const gp = new Gpoint(x, y, this); 
  points.push(gp);
return gp;
}

(in Gpoint)

constructor(/*blah*/, grid){
 //blah
this.grid = grid
}
//other stuff//

update(x, y){
  //some math involving 
  this.grid.someProp
 // I get here "can't access propety xyz of undefined."
}

So I read about this key word in js. But got confused about how to use bind(), call() or apply() in this case. To solve that. How?

For now I’m passing the instance as a parameter in draw:

//in draw
gp.update(x,y, grid);

And thats ok. It’s working fine. But… as I’m passing the caller (grid.make()) i thing it should not be necessary to pass it.

So how could I make the right bind. The literature is mostly based in functions as a class syntax (prior es6), and I’m not quite sure how I should use the binding functions in this scenario.

Or, perhaps, after all I should make Gpoint extends Grid?

thanks for reading : )

1 Like
2

It’s hard to analyze it w/o seeing the whole context, but I’ll try.

I believe you’ve meant new Gpoint instead of newGpoint, right?

Anyways, isn’t your Grid::make_Gpoint() method supposed to return a Gpoint instance?

Why do you instead assign it to some global variable inside that method?
That’s bad OOP coding practice!

What you describe above shouldn’t happen!

Property Gpoint::grid seems to be properly initialized w/ a Grid object.

So this.grid.someProp should work as long as someProp is a member of Grid.

1 Like
3

The code is a mess, very much WIP, not even really sure where I’m going, so again is a mess… no comments at all, a lot of not used stuff that i might need or not. So it’s temporarily running here you can have a look there.

resize the browser window to see.

4

yes sure, sorry.

Sorry again it’s not a global var, I’m pushing it inside an array in the Grid class. It’s a temp var:

make_Gpoint(){
  //blah
  const gp = new Gpoint(x, y, this); 
  points.push(gp);
return gp;
}

That’s exactly my point, what would be a better approach for this scenario? :pray:
Anyways the code is all posted now at the browser, would you like me to paste it here?

ps I will amend the original post

5

If you wish, sure!

But if it’s too big, some hosting site where we can see the source code would be more appropriate.

But anwayz, I did a quick look at the source files and found this:
const gp = new Gpoint(x, y, rx, ry, this);

On the line above you’re passing 5 arguments to Gpoint constructor.

However Gpoint constructor got 6 parameters:
constructor(x, y, ratio_x, ratio_y, label, grid) {

3 Likes
6

Man!! Thanks!!
The f*****ng label, that I’m not using, at least not yet.
Thanks a lot
I’ll fix this tomorrow to see if this makes this works as expected.
:facepunch: :fist_left: :metal: :love_you_gesture: :star: :star:

I’ll clean up and comment the code, then provide a link. As it is… it does not deserve to be shared : )

7

That whole stuff should be put aside for edge cases only.

In general, if we’re using JS classes, we needn’t worry about this and bind() stuff.

1 Like
8

That’s a bless. Still very hard for me to think functional. I was just starting to grasp Java and the oop stuff… Moving to a bunch of callbacks and self-invoking anonymous functions is not so easy… :slight_smile:

9

JS is a multi-paradigm language. And OOP is fully 1 of them.

Differences among Java, JS and even Python classes aren’t that large.

We can easily apply most of the OOP knowledge from 1 to the other.

I’ve got lotsa sketches written in both languages if you wish to take a look:

Java also got those starting at version 8. Again, same stuff. Java & JS are close cousins!

2 Likes
10

Just for fun if you want to dive into functional programming using JavaScript, this video explains very well lambda calculus:

11

Thanks @josephh will watch. I love a good class (as in school class:)

1 Like
12

Hello, just passing to confirm that after the fix it is working as expected. Great catch @GoToLoop. Valeu!

2 Likes