调用嵌套JavaScript函数报错：Chrome提示‘f1未定义’，问题出在哪？

你的代码存在几个核心问题，直接导致了f1 is not defined的错误：

• 全局作用域无f1变量：你写的是嵌套的立即执行函数表达式(IIFE)，但f1、f2只是这些函数的参数，既没有被赋值为具体对象，整个IIFE执行后也没向全局暴露任何变量，所以全局环境里根本不存在f1这个标识符。
• 内部函数未挂载到外层对象：就算你正确创建了层级对象，f3也只是内层函数的局部函数，没有挂载到f2上，无法通过f2.f3访问。
• IIFE语法错误：你的外层和内层IIFE都缺少执行括号（正确的IIFE格式是(function(){})()），相当于只定义了函数，根本没执行内部逻辑。

如果你想实现层级嵌套的可访问函数，有两种常见方案：

方案1：直接创建嵌套对象挂载函数 #

<!DOCTYPE html>
<html>
<body>
<h2>nested function test</h2>
<p>javascript nested functions</p>
<p id="demo"></p>
<script>
// 直接定义层级对象，将函数挂载到对应层级
const f1 = {
  f2: {
    f3(c) {
      return c + 2;
    }
  }
};

let answer = f1.f2.f3(4);
document.getElementById("demo").innerHTML = "fred is " + answer;
</script>
</body>
</html>

方案2：用IIFE封装并返回嵌套结构 #

<!DOCTYPE html>
<html>
<body>
<h2>nested function test</h2>
<p>javascript nested functions</p>
<p id="demo"></p>
<script>
// 通过IIFE执行后返回嵌套结构，赋值给全局变量f1
const f1 = (function() {
  return {
    f2: (function() {
      function f3(c) {
        return c + 2;
      }
      // 将f3挂载到返回的对象上，供外部访问
      return { f3 };
    })()
  };
})();

let answer = f1.f2.f3(4);
document.getElementById("demo").innerHTML = "fred is " + answer;
</script>
</body>
</html>

• 函数参数仅在自身函数作用域内有效，不会自动成为全局变量。
• 要在外部访问嵌套函数，必须将其挂载到可被外部访问的对象（比如全局对象、IIFE返回的对象）上。
• IIFE必须添加末尾的()才会立即执行，否则只是定义了一个未调用的函数。

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