p5.js硬币收集系统问题:调用destroy函数误删数组后续对象
问题分析与修复
你的硬币收集系统里destroy函数出现异常删除的核心原因是回调函数的this指向错误:
在你当前的代码中,findIndex的回调用了普通函数,在p5.js的运行环境下,这个普通函数里的this会指向p5的全局实例,而非当前要销毁的硬币对象。这会导致findIndex找不到目标元素,返回-1。当Array.splice(-1, 1)执行时,若出现上下文干扰就可能变成删除从倒数第一个位置到数组末尾的所有元素,和你描述的现象一致。
修复方案
方案1:使用箭头函数(推荐)
箭头函数不会绑定独立的this,它会继承外层destroy方法的this(也就是当前硬币实例),能正确匹配目标元素:
destroy(){ let index = coins.findIndex(item => item == this); coins.splice(index, 1); }
方案2:提前保存this引用
如果习惯用普通函数,可以在回调外部把当前this存为变量,避免指向丢失:
destroy(){ const self = this; let index = coins.findIndex(function(item){ return item == self; }); coins.splice(index, 1); }
修复后,findIndex能准确找到目标元素的索引,splice(index, 1)只会删除目标对象,不会影响数组中其他元素。
内容的提问来源于stack exchange,提问作者Maddox Fox
相关产品推荐
相关产品推荐

