Accessing a class function with array of objects

Question

I was coding in p5.js, and I noticed a problem that I couldn't pass.

I have a class named "Boxes". I am already using the functions that "Boxes" have. But while I tried to use that functions apply to an array of objects, It didn't work. How can I fix this problem?

class Boxes
{
    constructor()
    {
        this.x;
        this.y;
        this.r=222;
        this.g=55;
        this.b=111;
    }

    show()
    {
        fill(this.r,this.g,this.b);
        rect(this.x,this.y,50,50);
    }
}

For standard variable it works perfectly like this.

var box1 = new Boxes();
box1.show(); // It works.

When I tried something different it doesn't work. The example below.

var myboxes = [{'x':this.x, 'y':this.y}]; // That's OK :)

myboxes.push({x:100, y:100}); // That's OK too :)

myboxes[1].show(); // But. It gives an error :/

It says: "myboxes[1].show is not a function"

Although I write the show() function, with parentheses. It says "myboxes[1].show is not a function" It works fine when I use box1.show(). How can I access the functions using an array of objects? Shall I try something else? What are you suggesting?

In the case of `box1`, you actually create a `Boxes` object. In the array examples you don't. — Robby Cornelissen, Apr 17 '18 at 04:02
`myboxes` is an array of object that contains x and y. There is no `show()` function on it. What are you trying to achieve? — Eddie, Apr 17 '18 at 04:02
I tried to add show() function to this line but I couldn't. Is there any way to implement to this? `var myboxes = [{'x':this.x, 'y':this.y}];` I tried `var myboxes = [{'x':this.x, 'y':this.y, 'show':this.show()}];` Course it didn't work too. Any suggestions? — fighg, Apr 17 '18 at 04:04

Eddie · Accepted Answer · 2018-04-17T04:20:04.103

1

If you want to have an array of Boxes, you can .push() the new objects like:

class Boxes {
  constructor(param) {
    this.x = param.x;                     //Assign the x   
    this.y = param.y;                     //Assign the y
    this.r = 222;
    this.g = 55;
    this.b = 111;
  }

  show() {
    console.log(this.x, this.y);          //Test code,

    //fill(this.r,this.g,this.b);
    //rect(this.x,this.y,50,50);
  }
}

var myboxes = [];
myboxes.push(new Boxes({x: 3,y: 20}));     //Create a new box and push to the array
myboxes.push(new Boxes({x: 30,y: 200}));   //Create anothe one and push to the array

myboxes[1].show();                         //<-- You can show the x and y of element 1

edited Apr 17 '18 at 04:20

answered Apr 17 '18 at 04:09

Eddie

26,593
6
36
58

Thank you so much. But I tried to push myboxes[2] with show() function. Then it said **Cannot read property 'show' of undefined** – fighg Apr 17 '18 at 04:32
Array counts from 0. So you can `myboxes[0].show();` or `myboxes[1].show();` – Eddie Apr 17 '18 at 04:32
`myboxes[1].show();` is actually the second `.push()` @fighg – Eddie Apr 17 '18 at 04:33
Must I use the "param" keyword? If I write `this.x=350;` Firstly the code take our push() function numbers then all the time it using it. But I want to declare first and nobody can change – fighg Apr 17 '18 at 04:46
@fighg You dont necessarily to use the `param` (constructor). There are several ways to assign a value to a property of an object. And you **cant** use `this` outside the class code block. `this` outside the class block maybe mean a different thing – Eddie Apr 17 '18 at 05:37
Thank you very much @Eddie Best regards. – fighg Apr 17 '18 at 10:41

score 0 · Answer 2 · answered Apr 17 '18 at 04:06

0

If you create a non-Boxes object, it doesn't have show anywhere in its prototype chain. But that's OK, if you have access to the class, you can call the prototype method with your non-Boxes object as the this:

class Boxes {
  show() {
    console.log(this.x);
  }
}

var myboxes = [{'x':this.x, 'y':this.y}];
myboxes.push({x:100, y:100});
Boxes.prototype.show.call(myboxes[1]);

But note that you'll also need to put r, g, and b properties on your non-Boxes object in order for show to work.

answered Apr 17 '18 at 04:06

CertainPerformance

356,069
52
309
320

Thank you for your answer. It worked. but While I using push() function `var myboxes = [{'x':this.x, 'y':this.y}];` these x and y firstly taken by computer after one step and forever it take the my constructor's values. If I try that just keep clear x and y in the constructor then, it don't recognize x and y. How can assign the x,y or etc. variables to one of my objects's x,y,r,g,b? – fighg Apr 17 '18 at 05:03

Accessing a class function with array of objects

2 Answers2