使用对象数组访问类函数

Question

我在 p5.js 中编码，我注意到一个我无法通过的问题。

我有一个名为“Boxes”的课程。我已经在使用“盒子”的功能了。但是，当我尝试使用该函数应用于对象数组时，它不起作用。我该如何解决这个问题？

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);
    }
}

对于标准变量，它可以像这样完美地工作。

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

当我尝试不同的东西时它不起作用。下面的例子。

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 :/

上面写着：“myboxes[1].show 不是函数”

虽然我用括号编写了 show() 函数。它说 “myboxes[1].show 不是一个函数”当我使用它时它工作正常 box1.show()。如何使用对象数组访问函数？ 我要试试别的吗？你有什么建议？

Answer 1

如果你想拥有一个 Boxes 数组，你可以 .push() 新对象如：

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

Answer 2

如果您创建一个非 Boxes 对象，它的原型链中的任何位置都没有 show。不过没关系，如果您有权访问该类，则可以使用非 Boxes 对象作为 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]);

但请注意，您还需要将 r、g 和 b 属性放在非 Boxes 对象上，以便 show 工作。