如何在JavaScript中删除面向对象创建的对象？

我需要删除用面向对象方式创建的blockOne对象及其所有属性，用于实现2D生存游戏里的方块破坏功能，不知道该怎么做，也愿意尝试其他实现方案。

原代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

window.onload = setIntervel(Draw, 60/100);

function Block(x, y){
this.x = x;
this.y = y;
this.width = 100;
this.height = 100;
this.draw = function(){
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}

}

let blockOne = new Block(200, 200);

function Draw(){
blockOne.draw()
}

先修正原代码的两个基础错误：

• setIntervel拼写错误，应为setInterval
• 定时器时间参数为毫秒，60/100等于0.6毫秒不合理，应该用1000/60（约16.67毫秒）来实现60帧每秒的动画

方案一：用数组管理所有方块（推荐，适配多方块场景） #

游戏开发中很少用单个变量管理方块，通常用数组存储所有活跃方块，这样删除、遍历绘制的扩展性更强。

修改后的代码示例：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 修正定时器参数，实现60帧/秒的动画
window.onload = setInterval(Draw, 1000/60);

function Block(x, y){
    this.x = x;
    this.y = y;
    this.width = 100;
    this.height = 100;
    this.draw = function(){
        ctx.fillStyle = 'red';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

// 用数组存储所有方块实例
let blocks = [];
// 添加初始方块
blocks.push(new Block(200, 200));

function Draw(){
    // 每次绘制前清空画布，避免已删除方块残留
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 遍历数组绘制所有活跃方块
    blocks.forEach(block => block.draw());
}

// 定义方块删除函数
function destroyBlock(targetBlock) {
    // 通过过滤生成新数组，移除目标方块
    blocks = blocks.filter(block => block !== targetBlock);
    // 也可以用splice按索引删除：
    // const index = blocks.findIndex(block => block === targetBlock);
    // if (index !== -1) blocks.splice(index, 1);
}

// 示例：点击画布删除对应位置的方块（简化碰撞检测）
canvas.addEventListener('click', (e) => {
    const clickedBlock = blocks.find(block => {
        return e.clientX >= block.x && e.clientX <= block.x + block.width &&
               e.clientY >= block.y && e.clientY <= block.y + block.height;
    });
    if (clickedBlock) destroyBlock(clickedBlock);
});

方案二：直接清除单个对象引用 #

如果确实只需要管理单个方块，直接将变量置为null即可，JavaScript的垃圾回收器会自动回收无引用的对象内存：

// 删除blockOne
blockOne = null;

同时要修改Draw函数避免报错：

function Draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 仅当blockOne存在时执行绘制
    if (blockOne) blockOne.draw();
}

补充说明 #

• 不要手动删除对象的每个属性（比如delete blockOne.x），既繁琐又没必要，清除对象的所有引用才是高效的内存回收方式。
• 游戏绘制时必须调用ctx.clearRect清空画布，否则已删除的元素会残留在画布上。

内容的提问来源于stack exchange，提问作者Javascript-GameDev