Javascript内层函数无法访问上层函数定义变量的问题排查

问题根本原因 #

JavaScript 采用*词法作用域（静态作用域）*规则，函数的作用域范围在函数定义阶段就已经确定，和函数的调用位置、调用时机完全无关。

你代码里的各层作用域分布如下：

• 全局作用域下注册的标识符有：callback、mainFunc、insideFunc，不存在名为cb的变量
• cb是在mainFunc的私有作用域内声明的变量，仅允许mainFunc内部的同步代码、以及定义在mainFunc内部的嵌套函数访问
• insideFunc是定义在全局作用域的函数，它的作用域链只有两层：自身内部作用域 → 全局作用域，完全不包含mainFunc的作用域

即使你在mainFunc内部调用insideFunc，insideFunc查找变量cb时，也只会沿着自己定义时确定的作用域链向上查找，全局找不到cb就会抛出ReferenceError。

修复方案 #

方案1：将cb作为参数传递给insideFunc #

直接把cb作为调用参数传入，避开作用域限制：

const callback = (arg) => {
  console.log(arg);
};

function mainFunc(z) {
  const cb = z;
  // 调用时传入cb
  insideFunc(cb);
}

// 定义形参接收cb
function insideFunc(cb) {
  cb('1');
}

mainFunc(callback);

方案2：将insideFunc定义在mainFunc内部 #

让insideFunc的作用域链包含mainFunc的作用域，就能直接访问到cb：

const callback = (arg) => {
  console.log(arg);
};

function mainFunc(z) {
  const cb = z;
  // 嵌套定义insideFunc
  function insideFunc() {
    cb('1');
  }
  insideFunc();
}

mainFunc(callback);

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