p5.js中调用Ball实例drawCircle方法报错：drawCircle不是函数

首先得说，你这个报错的核心原因其实和drawCircle的定义方式没关系——问题出在你遍历数组的方式上！

你用了for (var ball in this.balls)来遍历数组，但for...in是用来遍历对象键名的，放到数组上时，它拿到的不是数组里的Ball实例，而是数组的索引字符串（比如第一个元素对应的是"0"）。你试着在这个字符串上调用drawCircle()，肯定会报错说方法不存在啊！而控制台能打印"Ball created"，说明你的Ball实例确实成功创建并加入数组了，只是遍历的时候拿错了东西。

解决办法：换正确的数组遍历方式 #

这里给你几种可行的方案：

1. 传统for循环（兼容性最好）
   把draw函数改成这样：

function draw() {
  background(220); // 建议加上，避免每一帧绘制内容重叠
  for (var i = 0; i < this.balls.length; i++) {
    this.balls[i].drawCircle();
  }
}

2. for...of循环（ES6+，写法更简洁）
   如果你的环境支持ES6，这种方式更直观：

function draw() {
  background(220);
  for (let ball of this.balls) {
    ball.drawCircle();
  }
}

3. 数组forEach方法
   用数组自带的遍历方法，逻辑也很清晰：

function draw() {
  background(220);
  this.balls.forEach(ball => {
    ball.drawCircle();
  });
}

额外提醒：修复Ball构造函数的小问题 #

你的drawCircle方法里直接用了构造函数的参数x, y, r，而不是实例的this.x, this.y, this.r。如果之后你要修改实例的位置或半径，绘制的内容不会跟着更新。建议改成：

this.Ball = function(x, y, r) {
  console.log("Ball created");
  this.x = x;
  this.y = y;
  this.r = r;
  this.drawCircle = function (){
    ellipse(this.x, this.y, this.r); // 这里用this访问实例属性
  }
}

把这两处修改完，你的代码就能正常运行，实现遍历Ball实例并调用drawCircle的需求了。

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