深入理解JS(九)：IIFE，即执函数的锁域魔法

前言

在JavaScript的世界里，作用域和闭包是两个至关重要的概念。而立即执行函数（Immediately Invoked Function Expression，简称IIFE） 正是将这两个概念运用得淋漓尽致的一种强大模式。它在前端开发的早期阶段，特别是在模块化思想尚未完全成熟时，扮演了不可或缺的角色。本文将带你深入探索IIFE的奥秘，并理解它如何与闭包结合，发挥出强大的威力。

一、什么是立即执行函数（IIFE）？

顾名思义，IIFE就是一个定义完之后就立即执行的JavaScript函数。它是一种语法模式，其核心思想是：创建一个函数，并马上调用它。

我们来看一个最简单的例子：

javascript 复制代码

// 使用括号将函数声明包裹起来，使其成为一个函数表达式
(function() {
  // 函数体内的代码会立即执行
  console.log('我是一个立即执行函数！');
})(); // 末尾的括号表示立即调用这个函数
// 输出: 我是一个立即执行函数！

这个结构看起来有点奇特，但它完美地实现了"定义即执行"的目的。

二、IIFE 的常见语法

IIFE的写法不止一种，但核心都是利用括号来告诉JavaScript引擎，我们正在处理的是一个函数表达式，而不是函数声明。

最常见的两种写法是：

写法一（推荐）： 将整个函数包裹在括号里，然后在后面再加一对括号表示调用。

javascript 复制代码

// 写法一（推荐）：将整个函数用括号包裹，使其成为一个表达式
(function() {
  console.log('这是第一种写法');
})(); // 然后立即调用它

写法二： 只将函数本身包裹在括号里，然后在外面加括号调用。

javascript 复制代码

// 写法二：将函数本身用括号包裹，同样使其成为表达式
(function() {
  console.log('这是第二种写法');
}()); // 调用括号在包裹函数的括号外部

这两种写法在功能上完全等价，社区中第一种写法更为普遍。关键在于，function() {}被()包裹，使其从一个函数声明变成了一个函数表达式，只有表达式才能被立即调用。

三、IIFE 的核心用途：创建独立作用域

IIFE最重要的作用就是创建一个独立、私有的作用域。

在ES6的let和const出现之前，JavaScript只有全局作用域和函数作用域。var声明的变量存在变量提升（hoisting）且没有块级作用域，很容易导致全局变量污染。

全局污染的例子

javascript 复制代码

// 在全局作用域中声明一个变量 message
var message = 'Hello from the global scope!';

// 假设这里的代码是另一个库或者模块的
// 这里不小心又声明了一个同名变量，覆盖了之前的值
var message = 'Oops, I overwrote the message!';

// 最终输出的是被覆盖后的值，这就是全局污染
console.log(message); // 输出: Oops, I overwrote the message!

这在大型项目中是灾难性的。而IIFE可以完美解决这个问题。

使用IIFE避免全局污染

javascript 复制代码

// 全局作用域中的变量
var globalMessage = 'Hello from the global scope!';

// 使用 IIFE 创建一个私有作用域
(function() {
  // 这个 'message' 变量只存在于 IIFE 的函数作用域内
  var message = '这是一个私有消息，不会影响全局';
  console.log(message); // 输出: 这是一个私有消息，不会影响全局
})(); // 函数执行完毕，其内部作用域被销毁

// 全局的 globalMessage 变量不受影响
console.log(globalMessage); // 输出: Hello from the global scope!
// 尝试在外部访问 IIFE 内部的 message 变量会导致错误
console.log(message); // 输出: ReferenceError: message is not defined
// 因为在全局作用域中找不到 message

在IIFE内部用var声明的message变量，其作用域被限制在了这个匿名函数内部，执行完毕后，这个作用域连同其中的变量一同被销毁（除非形成闭包），因此它不会泄露到全局，也不会与全局中的同名变量产生冲突。

四、IIFE 与闭包的结合：强大的模块化

当IIFE与闭包结合时，它最强大的能力才真正显现出来。我们知道，闭包是指函数与其词法环境的引用捆绑的组合。即使外部函数执行完毕，内部函数仍能访问其词法作用域（外部函数作用域）中的变量。

IIFE本身就是一个父函数，如果它返回另一个函数或者一个对象，那么返回的函数/对象就形成了对IIFE内部作用域的闭包 。这使得IIFE内部的变量既能保持私有，又能被外部以受控的方式访问。这就是 模块模式（Module Pattern） 的核心实现方式。

使用IIFE和闭包创建计数器模块：

javascript 复制代码

// counterModule 接收 IIFE 的返回值，即一个包含公共方法的对象
const counterModule = (function() {
  // 'privateCounter' 是一个私有变量，外部无法直接访问
  let privateCounter = 0;

  // 'changeBy' 是一个私有函数，同样只能在 IIFE 内部使用
  function changeBy(val) {
    privateCounter += val;
  }

  // 返回一个对象，这个对象就是模块的公共 API
  return {
    // 'increment' 是一个公共方法，它形成了一个闭包
    // 它可以访问和修改 IIFE 作用域中的 'privateCounter'
    increment: function() {
      changeBy(1);
    },
    // 'decrement' 也是一个公共方法，同样是闭包
    decrement: function() {
      changeBy(-1);
    },
    // 'value' 方法用于安全地读取私有变量的值
    value: function() {
      return privateCounter;
    }
  };
})(); // IIFE 立即执行

// 通过公共 API 调用
console.log(counterModule.value()); // 0

counterModule.increment();
counterModule.increment();
console.log(counterModule.value()); // 2

counterModule.decrement();
console.log(counterModule.value()); // 1

// 在外部无法访问私有变量，实现了数据封装
console.log(typeof privateCounter); // "undefined"
// console.log(counterModule.privateCounter); // undefined，公共对象上没有这个属性

在这个例子中：

1. IIFE创建了一个私有作用域。
1. privateCounter和changeBy是这个作用域内的私有成员。
1. IIFE执行后返回一个对象，该对象包含了三个方法：increment、decrement和value。
1. 这三个方法因为定义在IIFE内部，所以它们形成了闭包，可以持续访问和修改privateCounter。
1. 外部代码只能通过counterModule暴露的这三个公共接口来与privateCounter交互，而无法直接读取或修改它，从而实现了数据的封装和保护。

五、向 IIFE 传递参数

IIFE也是函数，因此可以接受参数。这是一个非常实用的特性，常用于为内部代码提供一个稳定的变量别名，减少作用域链的查找，或者引入全局对象。

一个经典的用法是传入window和jQuery对象：

javascript 复制代码

// 将全局对象 jQuery 和 window 作为参数传递给 IIFE
(function($, global) {
  // 在这个作用域内，参数 '$' 就是传入的 jQuery 对象
  // 参数 'global' 就是传入的 window 对象
  // 这样做可以确保 '$' 的含义不会因为其他库的冲突而改变

  // 示例：使用别名 '$' 操作 DOM
  // $('body').addClass('my-class');

  // 验证传入的 global 对象就是 window
  console.log(global === window); // true

})(jQuery, window); // 立即调用函数，并传入实际的全局变量

这样做的好处是：

代码更清晰：明确声明了依赖的外部变量。
性能微优化：将全局变量以参数形式传入，在函数内部访问它时，引擎只需在当前作用域查找，比沿着作用域链一直查找到全局要快（尽管在现代JS引擎中这个优势已不明显）。
避免冲突 ：如果外部环境中的$符号被其他库占用，IIFE内部的$依然可以安全地作为jQuery的别名使用。

六、现代 JavaScript 中的 IIFE

随着ES6（ES2015）的普及，IIFE的某些传统用途被新的语言特性所替代：

块级作用域 ：let和const的出现，使得我们可以用{}块来创建作用域，从而在很多场景下不再需要IIFE来避免变量污染。
ES模块（ESM） ：import/export语法提供了官方的、更强大的模块化解决方案。每个ES模块文件本身就是一个独立的作用域。

尽管如此，IIFE并没有完全过时。它在某些场景下依然有用：

当你需要执行一段一次性的初始化代码，并且不想留下任何全局变量时。
在一些不支持ESM的旧环境中，或者需要将代码打包成一个文件（UMD规范等）时，IIFE仍然是模块化封装的核心。

结语

立即执行函数（IIFE）是JavaScript中一个优雅而强大的编程模式。它通过函数表达式和立即调用，巧妙地实现了创建独立作用域的目的。虽然现代JavaScript提供了新的工具来解决同样的问题，但理解IIFE及其背后的作用域和闭包原理，对于成为一名更出色的JavaScript开发者来说，依然是必不可少的一步。

希望这篇文章有帮助到你，如果文章有错误，请你在评论区指出，大家一起进步，谢谢🙏。