9.4 立即执行函数（IIFE）与作用域隔离

在模块化方案普及之前，前端开发中最常用的作用域隔离手段就是立即执行函数，通常缩写为 IIFE(Immediately Invoked Function Expression)。它既不是语言规范中的专用关键字，也不是某种神秘的语法糖，而是对 JavaScript 函数表达式特性的一种巧妙运用。

9.4.1 什么是 IIFE

顾名思义，IIFE 就是一个定义后立即调用的函数。核心要点是：

它是一个函数表达式，而不是函数声明。
在定义的同时通过 () 立即执行。
函数内部的变量和函数对外部完全不可见。

常见的两种写法：

// 写法一：最经典的形式，用括号包裹函数体
(function() {
  var message = "Hello";
  console.log(message);
})();

// 写法二：括号放在外层，调用符在内部
(function() {
  var message = "Hello";
  console.log(message);
}());

// 还能用箭头函数，同样立即执行
(() => {
  let message = "Hello";
  console.log(message);
})();

为什么需要 (function(){ ... }) 外层的括号？因为如果直接写 function(){ ... }()，JavaScript 解释器会将 function 关键字当作函数声明的开始，而函数声明必须有函数名。外层括号强制将其转换为函数表达式，从而可以立即调用。任何能让函数成为表达式的方式都可以实现 IIFE，例如前面加上 !、+、~ 等一元运算符，但括号最为直观通用。

9.4.2 IIFE 如何实现作用域隔离

在 ES6 之前，JavaScript 只有全局作用域和函数作用域，没有块级作用域。这意味着 if 或 for 语句中声明的变量会上升到外部作用域，很容易污染全局变量：

for (var i = 0; i < 3; i++) {
  // 这里面的 i 其实是全局变量
}
console.log(i); // 3，不小心泄露到外边了

在多人协作或编写库代码时，无意中覆盖他人变量或全局对象是常见 bug。IIFE 提供了一个干净的函数作用域，把变量和逻辑关在里面：

(function() {
  // 这些变量对外部完全隐藏
  var counter = 0;
  var init = function() {
    console.log("初始化完成");
  };
  
  // 可以通过 window 有意暴露接口
  window.myLib = {
    increment: function() { return ++counter; }
  };
  
  init();
})();

// 外部无法直接访问 counter 和 init
console.log(typeof counter); // "undefined"
myLib.increment(); // 1
myLib.increment(); // 2

jQuery 等早期库的源代码几乎都包裹在一个 IIFE 中，在内部定义了大量的辅助函数和变量，只将核心对象挂载到 window 上，从而避免污染公共命名空间。

9.4.3 IIFE 的典型应用场景

1. 创建私有作用域，避免全局冲突

这是 IIFE 最原始的用途。尤其在以下场合中价值明显：

开发第三方插件/库。
多个脚本被拼接合并到同一个 HTML 中。
写小片段注入页面而不想干扰已有代码。

2. 模拟模块模式（Module Pattern）

在 ES6 模块出现以前，IIFE 是用来实现模块的主要手段。通过 IIFE 返回一个对象，对外暴露方法而不暴露内部状态：

var userModule = (function() {
  var name = "默认用户";  // 私有变量

  return {
    getName: function() { return name; },
    setName: function(newName) { name = newName; }
  };
})();

userModule.getName();       // "默认用户"
userModule.setName("小明");
userModule.getName();       // "小明"
// name 本身被隐藏，外部无法直接修改

这种模式巧妙地将闭包特性与 IIFE 结合：返回的对象中的方法保持着对 IIFE 内部变量的引用，形成了私有变量。

3. 解决循环中 var 的变量共享问题

经典的例子是用 var 在循环内绑定异步回调，由于 var 变量的作用域是函数级，所有回调最终访问的都是同一个变量 i，并且它的值是循环结束后的最终值：

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 输出三次 3
  }, 0);
}

IIFE 可以传入当前循环变量，形成一个闭包来捕获每次迭代的值：

for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // 会依次输出 0, 1, 2
    }, 0);
  })(i);
}

当然，有了 let 和 const 之后，由于它们拥有块级作用域，这个陷阱已经可以被更优雅地解决。但在维护旧代码时，IIFE 的这一用法仍然常见。

9.4.4 IIFE 还有用吗：现代替代方案

在现代 JavaScript 开发中，IIFE 的使用频率明显下降，因为出现了更强大的作用域隔离手段：

let 与 const：从 ES6 开始，块级作用域让 {} 就可以隔离变量，不再需要为了块作用域去创建一个函数。
ES Modules：每个模块文件天然拥有独立的作用域，顶层变量不会自动变成全局变量。这意味着过去用 IIFE 包裹整个文件的做法已完全由模块机制替代。
箭头函数与闭包：如果只需要一个临时作用域来捕获变量，直接使用箭头函数就能达到同样效果。

然而，在某些一次性执行的任务中，IIFE 仍然具有简洁之美。比如希望在代码执行时冻结某个对象，或在单次计算中生成一个独立作用域；也有些开发者认为 IIFE 能清晰表达“这段代码是一个执行单元”。理解 IIFE 不仅能帮助阅读大量历史库（如 jQuery），也能加深对作用域、闭包和模块化演进的理解。

从“为了解决作用域隔离不得不使用 IIFE”，到“作用域隔离已经是语言内建的特性”，这是 JavaScript 标准化进程带来的根本性进步。IIFE 背后的思想——将代码包装在独立的作用域中并立即执行——依然是优秀的编程实践，只是实现方式变得更加现代化了。