如何避免污染JavaScript全局作用域？闭包封装变量故障排查

你的写法错误在于：每次调用trackNotifications(data)时，都会重新初始化queuedNotifications、timeoutId等变量，返回的内层函数也都是新创建的独立上下文——导致多次调用之间无法共享状态，完全违背了要保留跨调用状态的需求。

正确的实现是把需要共享的变量放在外层闭包中，仅初始化一次，返回的内层函数负责处理逻辑并复用这些变量，最常用的方式是用立即执行函数（IIFE）封装：

正确的闭包实现 #

const trackNotifications = (() => {
  // 这些变量封装在闭包内，仅初始化一次，跨调用共享状态
  const timeInMsToReleaseNotification = 1000 * 15; // 15秒
  let queuedNotifications: Notification[] = [];
  let timeoutId: NodeJS.Timeout | null = null;

  // 返回真正的处理函数，每次调用都复用闭包内的变量
  return (data: Notification) => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    queuedNotifications.push(data);

    timeoutId = setTimeout(() => {
      const foundData = queuedNotifications[0];

      if (foundData) {
        displayNotification(
          foundData,
          queuedNotifications.length > 1
            ? 'nearbyBatch'
            : 'nearbySingle',
        );
        queuedNotifications = [];
        timeoutId = null;
      }
    }, timeInMsToReleaseNotification);
  };
})();

// 调用方式和原全局版本一致
trackNotifications(data);

核心原理 #

外层的立即执行函数会在代码加载时执行一次，初始化闭包里的变量，这些变量的生命周期与返回的trackNotifications函数绑定，不会被垃圾回收。每次调用trackNotifications(data)时，都是调用同一个内层函数，访问的是同一个闭包变量，自然能保留跨调用的状态，同时完全不会污染全局作用域。

拓展：多实例场景 #

如果需要创建多个独立的通知追踪实例（各自维护自己的队列和超时），可以用函数工厂模式：

function createNotificationTracker() {
  const timeInMsToReleaseNotification = 1000 * 15;
  let queuedNotifications: Notification[] = [];
  let timeoutId: NodeJS.Timeout | null = null;

  return (data: Notification) => {
    if (timeoutId) clearTimeout(timeoutId);
    queuedNotifications.push(data);
    
    timeoutId = setTimeout(() => {
      const foundData = queuedNotifications[0];
      if (foundData) {
        displayNotification(
          foundData,
          queuedNotifications.length > 1 ? 'nearbyBatch' : 'nearbySingle'
        );
        queuedNotifications = [];
        timeoutId = null;
      }
    }, timeInMsToReleaseNotification);
  };
}

// 创建两个独立的追踪器
const tracker1 = createNotificationTracker();
const tracker2 = createNotificationTracker();

tracker1(data1);
tracker2(data2);

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