闭包无法正常工作求助：如何用闭包避免全局变量污染

首先，你的核心需求是用闭包隐藏私有变量来避免全局污染，同时不能使用let——这完全可以通过经典的立即执行函数(IIFE)闭包模板实现，但你当前的spillObject写法存在几个关键问题，导致调试困难且闭包逻辑不符合预期。

1. 当前闭包写法的核心问题 #

你现在的spillObject是一个IIFE立即执行后返回的函数，但IIFE内部定义的heirArr、teir等变量是全局共享的单例变量，多次调用（包括递归调用）时会互相覆盖状态，这就是你调试时状态混乱的根源。而且你把DOM创建逻辑和递归逻辑拆分在了闭包的外层和返回函数里，结构混乱进一步加剧了调试难度。

2. 闭包模板的选择对比 #

先明确你提到的两个模板的差异：

模板1（推荐用于私有变量隐藏+状态管理） #

var method = (function(param){ 
  var var1 = 'default value'; // 私有变量，仅内部函数可访问，且持久化
  return function(){ 
    var1 = 'something else'; 
  }; 
})();

这个是标准的闭包实现：IIFE仅执行一次，内部的var1会被返回的函数永久引用，外部无法直接访问，完美实现变量隐藏，同时如果需要可以保留状态（比如累计计数）。

模板2（仅用于每次调用创建独立局部变量） #

var method2 = function(param) { 
  return function() { 
    var var1 = 'default value'; // 每次调用内部函数时，都会重新创建var1
  }; 
};

这个模板里的var1是内部函数的局部变量，每次调用返回的函数都会重新初始化，虽然也能隐藏变量，但无法保留状态，适合不需要持久化私有变量的场景。

回到你的需求，你需要隐藏递归过程中的临时变量（层级数组、DOM元素等），同时避免全局污染，应该基于模板1的思路调整，但要确保每次调用spillObject时的私有变量是独立的（尤其是递归调用时）。

3. 修正后的代码实现 #

我重新整理了你的spillObject闭包，把私有变量封装到每次调用的函数作用域里，同时理清DOM创建和递归的逻辑：

$(function() { 
  $("#position").change(function(eventData) { 
    var div = $('#explodedObject'); 
    div.html(''); 
    var result = spillObject('#explodedObject', eventData, ''); 
    div.append(result); 
  }); 

  // 标准闭包实现：IIFE封装私有逻辑，返回对外暴露的函数
  var spillObject = (function() {
    // 这里可以放需要持久化的全局私有变量（如果有需求）

    // 返回对外调用的函数，每次调用都会创建独立的作用域变量
    return function(dataParent, obj, heirarchy) {
      var heirArr = heirarchy === '' ? [] : heirarchy.split('_');
      heirArr.push(1);
      var teir = heirArr.length - 1;
      var id = "#collapse" + heirArr.join('');
      var headerID = 'header' + heirArr.join('');

      // 创建DOM元素
      var card = document.createElement('div');
      card.classList.add('card');

      var cardHeader = document.createElement('div');
      cardHeader.classList.add('card-header');
      cardHeader.id = headerID;

      var h5 = document.createElement('h5');
      h5.classList.add('mb-0');

      var button = document.createElement('button');
      button.classList.add('btn', 'btn-link');
      button.setAttribute('data-toggle', 'collapse');
      button.setAttribute('data-target', id);
      button.innerHTML = 'card ' + heirArr.join('.');

      var cardBody = document.createElement('div');
      cardBody.classList.add('card-body');

      var collapse = document.createElement('div');
      collapse.id = id.substr(1);
      collapse.classList.add('collapse');
      collapse.setAttribute('data-parent', dataParent);

      var dl = document.createElement('dl');
      dl.id = '#' + heirArr.join('');

      // 遍历对象属性
      for (var x in obj) {
        var dt = document.createElement('dt');
        var dd = document.createElement('dd');
        dt.innerHTML = x;

        if (typeof obj[x] === 'object' && heirArr.length < 3) {
          heirArr[teir]++;
          var innerObj = spillObject(dl.id, obj[x], heirArr.join('_'));
          dd.appendChild(innerObj);
          // 递归后恢复层级计数，避免影响后续遍历
          heirArr[teir]--;
        } else {
          dd.innerHTML = obj[x];
        }

        dl.append(dt);
        dl.append(dd);
      }

      // 组装DOM结构
      h5.appendChild(button);
      cardHeader.appendChild(h5);
      card.appendChild(cardHeader);
      cardBody.appendChild(dl);
      collapse.appendChild(cardBody);
      card.appendChild(collapse);

      heirArr.pop();
      return card;
    };
  })();
});

关键调整说明 #

• 把spillObject改成IIFE返回函数的标准闭包形式，IIFE内部没有共享变量，每次调用spillObject都会创建独立的heirArr、teir等变量，彻底避免递归时的状态冲突。
• 把DOM创建和遍历逻辑都放到返回的函数内部，确保每次调用的变量都是独立的，调试时更容易追踪每个调用的状态。
• 修复了递归后的层级计数恢复逻辑，避免后续调用的层级混乱。
• 修正了代码中的HTML转义错误（比如&&改为&&，<改为<）。

这样调整后，既实现了私有变量的隐藏（所有临时变量都在函数作用域内，不会污染全局），又解决了之前的调试困难问题，同时完全保留了原有的功能。

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