Question

我正在为个人项目编码一个棋盘游戏版本，而p5.js是我输出图形的方式。我有一堂课，制作与董事会上的空间相对应的对象。这些正方形需要上色，所以我有一个设置器，应该让我更改颜色，但是运行时它会给我Uncaught RangeError: Maximum call stack size exceeded。

我尝试重命名变量和设置器以解决命名问题，事实并非如此。当我将setter转换为方法时，程序也会引发错误。

const gridSpace = class {
  constructor(x, y, num, color) {
    this._posX = x;
    this._posY = y;
    this._num = num;
    this.color = color;
  }
  
  get color() {
    return this.color;
  }
  set color(color) {
    this.color = color;
    this.draw();
  }
}

const space35 = new gridSpace(1, 2, 3, "blue");
space35.color = "red";

我希望所述空间在运行时最终显示为红色或蓝色正方形，而不是运行时当前显示为白色的正方形。

编辑：我正在添加一个指向在线p5.js编辑器的链接，因此更容易发现问题。大小调整有点不一致，为此感到抱歉。 https://editor.p5js.org/drewhford04/sketches/s6RbWMzpD

Answer 1

这些调用：this.color = "red"和space35.color调用 setter ，而 setter 本身是递归调用。

另一种方法是将属性color重命名为_color，以避免递归。

const gridSpace = class {
  constructor(x, y, num, color) {
    this._posX = x;
    this._posY = y;
    this._num = num;
    this._color = color;
  }
  
  get color() {
    return this._color;
  }
  set color(color) {
    this._color = color;
    //this.draw();
  }
}

const space35 = new gridSpace(1, 2, 3, "blue");
console.log(space35.color);
space35.color = "red";
console.log(space35.color);

运行设置器时，通话次数超过了上限

1 个答案: