使用p5js类创建对象时网页严重卡顿（0.1 FPS）的原因及解决方法

你遇到的帧率暴跌问题，核心原因是自定义类名和JavaScript内置全局对象重名：
你把类命名为Object，但Object是JavaScript原生的全局构造函数——所有JS对象的原型链顶端都是它。当你定义这个类时，相当于覆盖了原生的Object，直接破坏了p5.js内部大量依赖原生对象系统的逻辑，最终导致页面陷入异常低效的循环操作，帧率骤降。

修复方法 #

只需要把自定义类的名字改成任意不与内置对象/API重名的合法名称即可，比如MyObject或CircleObject：

修改后的完整代码：

let objects = [];

function setup() {
  createCanvas(400, 400);  
  const object = new MyObject(width/2, height/2, 50);  
  objects.push(object);
}

function draw() {
  background(20);  
  for (let i = 0; i < objects.length; i++) {
    objects[i].display();
  }
}

// 重命名类，避免与内置Object冲突
class MyObject {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.radius = r;
  }
  
  move(x, y) {
    this.x += x;
    this.y += y;
  }
  
  display() {
    noStroke();
    fill(255);
    circle(this.x, this.y, this.radius);
  }
}

后续注意事项 #

• 永远不要使用JavaScript内置对象名（如Object、Array、Function、String）作为自定义类或变量名，这会引发全局污染和难以排查的隐性bug。
• 在p5.js开发中，额外注意避开p5的内置API名称（比如Vector、Color等p5内置类），避免重名冲突。

内容的提问来源于stack exchange，提问作者what