类实例化解除后P5.js按钮未销毁问题排查与解决

按钮留存的原因 #

P5.js中createButton()创建的是独立于Canvas的DOM元素，它会直接被添加到页面的DOM树中，而非绘制在Canvas画布上。切换场景时，draw()函数只是重绘Canvas的背景（红色），但Canvas的绘制内容无法覆盖或移除页面上的DOM元素，所以按钮会一直留在页面上。

另外还有引用链问题：按钮的mousePressed回调用了箭头函数，箭头函数会绑定外层的this（即MainMenuScene实例），而按钮作为DOM元素被浏览器持有引用，按钮又持有这个回调函数的引用，最终导致MainMenuScene实例也被间接引用，无法被垃圾回收，进一步让按钮的引用一直存在。

如何彻底移除按钮 #

需要主动销毁对应的DOM元素，有两种常见方式：

1. 在切换场景前直接调用按钮的remove()方法：
   修改MainMenuScene的回调逻辑：

   this.button.mousePressed(() => {
     this.button.remove(); // 先移除DOM按钮
     currentScene = new CombatScene();
   });
   

2. 给MainMenuScene添加统一的销毁方法，集中清理资源：

   class MainMenuScene {
     constructor() {
       // ... 原有初始化代码
     }
     show() {
       background("blue");
     }
     destroy() {
       this.button.remove(); // 清理DOM元素
     }
   }
   

   切换场景时调用该方法：

   this.button.mousePressed(() => {
     this.destroy();
     currentScene = new CombatScene();
   });
   

按钮留存是否会阻止MainMenuScene实例被垃圾回收 #

会。具体原因是：

• 按钮的mousePressed回调是箭头函数，它会捕获并持有MainMenuScene实例的引用（this）；
• 按钮作为DOM元素被浏览器的DOM树持有引用，而按钮又持有这个回调函数的引用；
• 最终形成完整的引用链：浏览器DOM树 → 按钮DOM元素 → 箭头函数 → MainMenuScene实例，这条链未断裂时，MainMenuScene实例无法被垃圾回收。只有当按钮被从DOM树中移除，引用链断裂后，该实例才会被标记为可回收。

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