运行 setter 时超出最大调用大小

Question

我正在为个人项目编写一个棋盘游戏版本，p5.js 是我输出图形的方式。我有一个 class 正在制作对应于我板上的 space 的对象。这些方块需要着色，所以我有一个 setter 可以让我更改颜色，但是当它是运行时，它会给我 Uncaught RangeError: Maximum call stack size exceeded.

我已经尝试重命名变量和 setter 来解决命名问题，但事实并非如此。当我将 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";

我想说 space 在运行时变成红色或蓝色方块，而不是运行时方块当前的白色。

编辑：我正在向在线 p5.js 编辑器中添加一个 link，这样更容易发现问题。尺寸有点不一致，很抱歉。 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);

运行 setter 时超出最大调用大小

Maximum call size exceeded when running setter

javascript

setter

class

object

p5.js