立即执行函数表达式（Immediately Invoked Function Expression，IIFE）是一种在定义后立即执行的 JavaScript 函数。它主要用于创建独立的作用域，避免全局变量污染，并且能在代码加载时就执行特定的逻辑。
语法结构
IIFE 有两种常见的语法形式：
形式一：使用括号将函数包裹起来，然后紧跟另一对括号来调用函数
(function() {
// 函数体
console.log('这是一个 IIFE');
})();
形式二：使用括号将整个函数表达式和调用都包裹起来
(function() {
// 函数体
console.log('这也是一个 IIFE');
}());
特点
- 立即执行：定义后马上执行，无需额外调用。
- 创建独立作用域：函数内部的变量和函数不会影响到全局作用域，避免了变量名冲突。
用途
1. 避免全局变量污染
在大型项目中，如果有大量的变量和函数定义在全局作用域，容易造成命名冲突。使用 IIFE 可以创建独立的作用域，将变量和函数封装在内部。
(function() {
let privateVariable = '我是私有变量';
function privateFunction() {
console.log(privateVariable);
}
privateFunction();
})();
// 下面这行代码会报错，因为 privateVariable 和 privateFunction 在 IIFE 外部不可访问
// console.log(privateVariable);
2. 实现私有变量和方法
通过 IIFE 可以模拟面向对象编程中的私有属性和方法。
const counter = (function() {
let count = 0;
return {
increment: function() {
count++;
return count;
},
decrement: function() {
count--;
return count;
},
getValue: function() {
return count;
}
};
})();
console.log(counter.increment());
console.log(counter.decrement());
在这个例子中，count 变量被封装在 IIFE 内部，外部无法直接访问，只能通过返回对象的方法来操作和获取其值。
3. 处理循环中的闭包问题
在循环中使用闭包时，如果不使用 IIFE，可能会出现所有闭包共享同一个变量的问题。使用 IIFE 可以为每个闭包创建独立的变量副本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const listItems = document.querySelectorAll('li');
for (let i = 0; i < listItems.length; i++) {
(function(index) {
listItems[index].addEventListener('click', function() {
alert(`You clicked item ${index + 1}`);
});
})(i);
}
</script>
</body>
</html>
在这个例子中，使用 IIFE 为每个点击事件处理程序创建了独立的 index 值，避免了所有事件处理程序都使用相同的 i 值的问题。
总之，IIFE 是 JavaScript 中一个非常实用的技术，在很多场景下都能发挥重要作用。
