为何JavaScript嵌套函数内无法创建预期闭包？

嘿，我完全懂你折腾好几个小时的挫败感——闭包这玩意儿有时候确实会玩一些反直觉的套路，尤其是涉及到模拟异步回调的场景时。咱们一步步拆解你的问题：

先给你吃颗定心丸：你的示例代码逻辑是对的 #

先把你的代码格式化清晰点，方便咱们分析：

function outerfn(z) {
  var inner_a = function(y) {
    var inner_a_var = y + 5; // STEP 3: 这里创建了inner_a作用域内的局部变量
    call_my_arg(function(x) {
      // 这个匿名函数确实应该捕获inner_a_var
      inner_b(inner_a_var + x);
    });
  };
  var inner_b = function(w) {
    console.log(w);
  };
  inner_a(z); // STEP 2: 调用inner_a
}

outerfn(1); // STEP 1: 启动执行
function call_my_arg(fcn) {
  // 模拟事件回调
  fcn(1);
}

直接在Chrome 66里跑这段代码，应该会输出7——说明闭包确实捕获到了inner_a_var，你遇到的问题大概率是调试器显示的误导，或者实际jQuery场景里的异步变量引用问题。

为什么调试器只显示Closure (outerfn)？ #

这是Chrome调试器的显示逻辑问题，不是代码的锅：

• inner_a本身是定义在outerfn作用域内的函数，所以inner_a的局部作用域（包括inner_a_var）属于outerfn闭包的嵌套子集。
• Chrome调试器会把多层嵌套的闭包合并显示，你看到的Closure (outerfn)其实包含了inner_a的局部变量——你可以试着在调试器里展开这个闭包，就能找到inner_a_var了。

实际jQuery场景中可能遇到的真正问题（及解决方案） #

你提到这是jQuery组件开发场景，outerfn是_create函数，那大概率是异步回调时的变量引用共享问题：比如你用call_my_arg模拟的是事件绑定（比如$(elem).on('click', fcn)），这时候回调是异步触发的，如果inner_a被多次调用，所有回调会共享同一个inner_a_var的引用，而不是每次调用的独立值。

解决这个问题有两个常用方法：

方法1：用let创建块级作用域（ES6+，Chrome 66已完全支持）

把var inner_a_var改成let inner_a_var，let会为每次inner_a的调用创建独立的块级作用域，闭包会捕获这个独立的变量：

function outerfn(z) {
  var inner_a = function(y) {
    let inner_a_var = y + 5; // 用let替代var，创建独立作用域
    call_my_arg(function(x) {
      inner_b(inner_a_var + x);
    });
  };
  var inner_b = function(w) {
    console.log(w);
  };
  inner_a(z);
}

方法2：用立即执行函数（IIFE）固化变量值

如果需要兼容更老的环境，用IIFE把当前inner_a_var的值传递给回调：

function outerfn(z) {
  var inner_a = function(y) {
    var inner_a_var = y + 5;
    call_my_arg((function(fixedVar) {
      return function(x) {
        inner_b(fixedVar + x);
      };
    })(inner_a_var));
  };
  var inner_b = function(w) {
    console.log(w);
  };
  inner_a(z);
}

最后再确认几个小细节 #

• 确保inner_b在回调执行前已经被定义：你的示例代码里inner_b定义在inner_a调用之前，没问题；但实际开发中如果调整了代码顺序，可能会导致变量未定义的错误。
• 如果调试器显示还是有迷惑性，直接在匿名回调里加console.log(inner_a_var)，看实际运行时的输出——这比调试器的闭包显示更靠谱。

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