从外部调用函数内部嵌套的functionC时报未定义该如何解决？

报错原因 #

JavaScript 采用词法作用域，嵌套定义的函数仅在其父级函数的内部作用域可访问：

• functionC 定义在 functionB 内部，仅能在 functionB 中调用
• functionB 定义在 functionA 内部，仅能在 functionA 中调用
  你在全局作用域下的 leftArrowClicked 中尝试直接访问 functionC，自然找不到该函数，所以抛出 functionC is not defined 错误。

可行解决方案 #

可以根据你的业务逻辑场景选择对应方案： #

方案1：无内部依赖时提升函数作用域 #

如果functionC不需要用到functionB、functionA内部的变量，直接将它提升到全局作用域定义即可：

// 把functionC提到全局层级，所有位置都可访问
function functionC() {
  // do stuff
}

function leftArrowClicked() {
  functionA(functionC);
}

function functionA() {
  function functionB(w) {
    // 原有其他逻辑保留
  }
}

方案2：有内部依赖时逐层返回函数引用 #

如果functionC需要用到functionB、functionA的内部变量，就通过返回值把函数引用逐层传递到外层：

function leftArrowClicked() {
  // 从functionA拿到内部导出的functionC引用
  const functionC = functionA();
  functionA(functionC);
}

function functionA() {
  function functionB(w) {
    function functionC() {
      // do stuff（可正常访问functionB内部变量）
    };
    // 第一层把functionC从functionB内导出
    return functionC;
  }
  // 第二层把functionC从functionA内导出
  return functionB();
}

方案3：应急方案挂载到全局对象 #

如果只是临时调试不想改层级结构，可以把functionC挂载到window全局对象上（不推荐长期使用，会造成全局污染）：

function leftArrowClicked() {
  // 必须先调用一次functionA触发functionB执行，完成functionC的挂载
  functionA();
  functionA(window.functionC);
}

function functionA() {
  function functionB(w) {
    // 挂载到window变成全局可访问方法
    window.functionC = function() {
      // do stuff
    };
  }
  functionB();
}

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