JS事件回调引用父作用域变量是否需设为全局避免GC回收？

你完全不需要把fitAddon声明为全局/模块级变量，直接把它放在useEffect回调的局部作用域内声明就可以，JavaScript的GC不会回收它，你现在写的外层声明写法反而有潜在bug。

JavaScript的垃圾回收判断逻辑非常直接：只要变量处于「可达」状态，也就是存在一条从根对象（浏览器环境下是window）出发能访问到该变量的引用链，这个变量就不会被回收，和变量是不是声明在全局作用域没有任何关系。

针对你这段代码的场景：

• 如果你把fitAddon声明在useEffect回调内部，同作用域下定义的handleResize函数会形成闭包，自动持有对父作用域内fitAddon的引用
• 你把handleResize注册为window的resize事件监听器时，window上就存在对handleResize的引用，handleResize本身是可达的
• 只要这个事件监听器没有被移除，handleResize一直存活，它引用的fitAddon就始终处于可达状态，GC绝对不会把它回收掉
• 当组件卸载触发useEffect的清理逻辑，你调用removeEventListener移除resize监听后，handleResize没有了可达引用，它持有的fitAddon、terminal等变量都会被GC自动回收，不会造成内存泄漏

你现在把fitAddon声明在组件外层的模块作用域，反而会出问题：如果Terminal组件被多次挂载，每次执行useEffect逻辑都会覆盖同一个模块级的fitAddon变量，导致先挂载的组件实例触发resize时，调用的是后挂载实例的fitAddon.fit()方法，直接出现状态错乱。而且模块级变量的生命周期和整个应用一致，除非你手动重置，否则永远不会被GC，反而会造成不必要的内存常驻。

export const Terminal = () => {
  const id = 'xterm-container';
  useEffect(() => {
    const terminal = new TerminalType({
      cursorBlink: true,
      cursorStyle: window.api.isWindows ? "bar" : "underline",
      cols: DefaultTerminalSize.cols,
      rows: DefaultTerminalSize.rows,
    });

    // 直接声明为useEffect内部的局部变量即可，不需要提升到外层
    const fitAddon = new FitAddon();
    terminal.loadAddon(fitAddon);
    
    terminal.open(document.getElementById(id) as HTMLElement);
    fitAddon.fit();
    

    function handleResize() {
      fitAddon.fit();
    }

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    }
  }, []);

  return (
    <div id={id}></div>
  )
}

不要迷信「只有全局变量不会被GC」的错误说法，闭包是JS里非常基础的特性，只要闭包本身存活，它捕获的所有父作用域变量都会被保留，完全不需要额外做全局声明。滥用全局变量存放临时实例状态，才是导致内存泄漏、多实例状态冲突的高频原因。

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