p5.js中Array.push()存入对象被同步修改问题排查

该异常由JavaScript的引用类型特性导致：
JavaScript中的对象是引用类型，变量持有的是对象的内存地址，而非对象的实际值。你的代码全程只创建了1个p位置对象，每次执行pTrace.push(p)时，推入数组的不是当前p对象的数值快照，而是指向这同一个p对象的内存引用。后续调用nextMove()修改p的x、y属性时，本质是修改这个唯一对象的属性值，数组内存储的所有引用都指向这同一个对象，因此所有元素都会同步更新为最新值。

• 初始化阶段仅在setup()中创建了一次p对象，后续运行全程没有生成新的位置对象
• 每次draw()执行时，都将同一个p对象的引用重复推入pTrace数组
• nextMove()直接在原p对象上修改x、y属性
• 数组内所有元素指向同一个内存地址的p对象，最终所有元素的值都和最新修改后的p完全一致

每次向历史数组存入位置时，生成当前位置的独立副本，不要直接存入原对象引用。将draw()中保存位置的代码替换为如下内容：

// 存入当前位置的独立快照，切断和原p对象的引用关联
pTrace.push({
  x: p.x,
  y: p.y
});

补充说明 #

你当前在mousePressed()中直接手动调用draw()不符合p5.js的设计逻辑，需要重启绘制循环时调用loop()即可，框架会自动按设定帧率调度draw函数执行，无需手动调用。

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