前端-IIFE（立即执行函数表达式）IIFE（立即执行函数表达式）讲解 🚀 IIFE（Immediately Invo

IIFE（立即执行函数表达式）讲解 🚀

IIFE（Immediately Invoked Function Expression，立即执行函数表达式）是一种 定义后立即执行 的 JavaScript 函数，它的主要作用是 创建独立作用域，避免变量污染。

1. IIFE 的基本语法

IIFE 的语法格式如下：

(function() {
  console.log("我是 IIFE，我会立即执行！");
})();

🔹 特点：

使用 (function() { ... })() 立即执行（() 立刻调用函数）。
不会污染全局作用域，所有变量都在这个函数内部作用域里。
适用于 一次性初始化代码，比如封装模块、避免变量冲突等。

2. 为什么要用 IIFE？

在 ES6 模块 之前，JavaScript 只有一个全局作用域，容易导致 变量污染。IIFE 通过 创建局部作用域 来解决这个问题。

❌ 没用 IIFE 的问题

var name = "张三";  // 变量污染，可能影响其他代码

function sayHello() {
  console.log("你好, " + name);
}

name 是全局变量，如果其他地方也使用 name 变量，就可能被覆盖。
这可能导致 sayHello() 输出错误的值。

✅ 使用 IIFE 解决

(function() {
  var name = "张三";  // 局部变量，外部无法访问
  function sayHello() {
    console.log("你好, " + name);
  }
  sayHello();
})();
console.log(typeof name); // undefined ✅ 避免了变量污染

name 不会污染全局作用域，只能在 IIFE 里访问。
外部无法访问 name，提高代码安全性。

3. IIFE 的多种写法

IIFE 有多种不同的语法形式，但本质上都是**“定义函数” + “立即执行”**。

🔹 方式 1：常见写法

(function() {
  console.log("立即执行！");
})();

() 里包裹函数 (function() { ... })，然后 ()` 立即执行。

🔹 方式 2：使用箭头函数

(() => {
  console.log("我是箭头函数 IIFE！");
})();

适用于简单的 IIFE，但不能使用 this 关键字。

🔹 方式 3：传参的 IIFE

(function(name) {
  console.log("你好, " + name);
})("张三");

这种写法适用于 模块化封装，可以传递参数进去。

🔹 方式 4：命名 IIFE

(function myIIFE() {
  console.log("我有名字，但只能在 IIFE 内部使用！");
})();
console.log(typeof myIIFE); // undefined ✅ 函数不会污染全局

myIIFE 只能在函数内部访问，外部无法调用。

🔹 方式 5：与 void 结合

void function() {
  console.log("用 void 触发 IIFE");
}();

void 关键字会让 JavaScript 解析器认为它是一个 表达式，所以 () 立即执行。

4. IIFE 的应用场景

✅ 1. 保护变量，避免全局污染

(function() {
  var apiKey = "123456";
  console.log("API Key:", apiKey);
})();
console.log(typeof apiKey); // undefined ✅ 避免污染

apiKey 不会暴露到全局环境，提高安全性。

✅ 2. 封装私有模块

var Counter = (function() {
  var count = 0; // 私有变量
  return {
    increment: function() {
      count++;
      console.log("计数:", count);
    }
  };
})();
Counter.increment(); // 计数: 1
Counter.increment(); // 计数: 2

count 变量不会泄露到全局，只有 increment() 方法能访问它。

✅ 3. 兼容 require / export 之前的模块

在 ES6 之前，没有 import / export，IIFE 让我们可以封装模块：

var myModule = (function() {
  var privateVar = "这是私有变量";
  return {
    getVar: function() {
      return privateVar;
    }
  };
})();
console.log(myModule.getVar()); // 这是私有变量

privateVar 是私有变量，外部无法直接访问，只能通过 getVar() 获取。

5. IIFE VS ES6 模块

特性

IIFE

ES6 模块

作用域

只在当前文件生效

只在模块内生效

变量污染

不会污染全局

适用场景

旧浏览器、无模块环境

现代 JavaScript 项目

依赖管理

手动引入

import/export 自动管理

结论：

现代项目 ✅ 使用 import/export 进行模块化。
老代码或无模块环境 ✅ IIFE 仍然适用。

6. 结论

💡 总结 IIFE 的作用：

创建独立作用域，避免变量污染。
适用于封装模块，让变量变成私有的。
适用于一次性初始化代码（如事件监听）。
兼容老代码，不需要 import/export。

IIFE 是 JavaScript 早期模块化编程的方式，现在虽然有了 import/export，但在某些场景（如 立即执行的代码、避免变量冲突）仍然很好用！😃 🚀