JavaScript函数创建对象的生命周期：getMeta内img对象内存疑问

嘿，这个问题问得很戳痛点，其实核心要看这个img对象有没有被“挂住”的有效引用——JavaScript的垃圾回收（GC）机制是基于「标记清除」逻辑的，简单说就是：如果一个对象没有任何可被代码访问到的引用了，GC就会在合适的时机把它从内存里清掉，不会一直占着空间。

我分两种常见场景给你拆解：

• 场景1：img只是getMeta里的局部变量，处理完无外部引用
  假设你的代码逻辑大概是这样的：

  function getMeta(imgUrl) {
    const img = new Image();
    img.onload = function() {
      // 处理图片尺寸，更新预览器展示
      previewContainer.src = imgUrl;
    };
    img.src = imgUrl;
  }
  
  // 给页面图片绑定mouseover事件
  document.querySelectorAll('.preview-target').forEach(img => {
    img.addEventListener('mouseover', () => {
      getMeta(img.src);
    });
  });
  

  这里的img是getMeta函数内部的局部变量，当getMeta执行结束、onload回调也完成任务后，没有任何其他代码还能访问到这个img对象——它就成了“无主”的对象，GC会在后续的回收周期里自动销毁它，不会一直驻留到页面关闭。

• 场景2：img被闭包、全局变量或DOM元素持有引用
  要是你在getMeta里把img赋值给了全局变量，或者在mouseover的事件处理函数里把它存在了某个数组/对象里，又或者把这个img添加到了DOM结构中（哪怕后来隐藏了），那这个img对象就有了活跃的引用，GC不会回收它，直到你手动清除这些引用（比如把全局变量设为null，从数组里移除该对象，从DOM中删除这个img元素）。

给你个小优化建议：可以在onload回调执行完成后，手动解除img的onload绑定（比如img.onload = null），这样能彻底切断回调函数对img的引用，让GC更稳妥地回收这个临时对象。

内容的提问来源于stack exchange，提问作者Yılmaz Durmaz