好的，各位观众老爷们，欢迎来到“闭包与IIFE不得不说的故事”专场。我是你们的老朋友，代码界的段子手——程序猿老王。今天咱们不聊高并发，不扯大数据，就来聊聊JavaScript这门“妖娆”语言里两个看似简单，实则深不见底的概念：闭包和IIFE（立即执行函数表达式）。
准备好了吗？系好安全带，咱们要开车了！🚌💨
第一幕：江湖中的“闭包”传说
话说，在JavaScript的武林中，闭包是一位神秘莫测的高手。它的身形飘忽不定，能力却异常强大。有人说它是“内存泄漏的罪魁祸首”，有人说它是“实现模块化的基石”。那么，闭包究竟是何方神圣呢？
简单来说，闭包就是函数与其周围状态（词法环境）的捆绑。 也就是说，闭包允许函数访问并操作函数外部的变量，即使在外部函数已经执行完毕后。这就像你拿着一把钥匙🔑，即使离开了房子，仍然可以打开房门进入。
为了更好地理解，咱们先来看一段“喜闻乐见”的代码：
function outerFunction() {
let outerVar = "Hello, Closure!";
function innerFunction() {
console.log(outerVar);
}
return innerFunction;
}
let myClosure = outerFunction();
myClosure(); // 输出: Hello, Closure!在这个例子中，innerFunction 就是一个闭包。它访问了 outerFunction 作用域中的 outerVar 变量。即使 outerFunction 已经执行完毕，innerFunction 仍然可以访问 outerVar 的值。
闭包的“三段论”
为了更清晰地理解闭包，我们可以将它分解为以下三个步骤：
- 创建函数： 定义一个函数，这个函数内部引用了外部函数的变量。
- 返回函数： 外部函数返回内部函数。
- 执行返回的函数： 在外部函数执行完毕后，执行返回的内部函数。
闭包的“爱恨情仇”
闭包的优点有很多，例如：
- 封装性： 闭包可以创建私有变量，防止外部直接访问和修改，提高代码的安全性。
- 持久性： 闭包可以保存函数的状态，实现更复杂的功能。
- 模块化： 闭包可以用于创建模块，将代码组织成独立的单元。
但是，闭包也有一些缺点，例如：
- 内存占用： 闭包会持有对外部变量的引用，可能导致内存泄漏。
- 性能损耗： 闭包的创建和执行需要额外的开销。
第二幕：横空出世的“IIFE”英雄
话说，闭包虽好，但如果使用不当，就会带来一些问题。例如，全局变量污染。想象一下，如果在你的代码中，到处都是全局变量，那简直就像一个堆满了垃圾的房间，让人无从下手。
为了解决这个问题，江湖上出现了一位英雄——IIFE（立即执行函数表达式）。它就像一位神秘的侠客，来无影去无踪，却能瞬间解决问题。
IIFE的定义很简单：一个声明后立即执行的函数表达式。
它的语法也很容易理解：
(function() {
// 这里是IIFE的代码
console.log("Hello, IIFE!");
})();或者：
(function() {
// 这里是IIFE的代码
console.log("Hello, IIFE!");
}());IIFE的“独门绝技”
IIFE的主要作用是创建一个独立的作用域，防止全局变量污染。 它可以把一段代码包裹在一个函数内部，使其中的变量不会泄露到全局作用域中。
这就像给你家的院子围上了一堵墙，别人就不能随便进入了。
IIFE的历史作用
在ES6之前，JavaScript没有块级作用域（let 和 const）。这意味着，如果你在 for 循环中使用 var 声明变量，那么这个变量就会泄露到全局作用域中。
这可不是闹着玩的！想想看，如果你在不同的循环中使用了相同的变量名，那就会造成混乱，甚至导致程序出错。
为了解决这个问题，开发者们开始大量使用IIFE。通过将循环代码包裹在IIFE中，可以创建一个独立的作用域，防止变量泄露。
例如：
for (var i = 0; i < 5; i++) {
(function(index) {
setTimeout(function() {
console.log("Index: " + index);
}, 1000);
})(i);
}
// 如果没有IIFE，输出的将是五个 5在这个例子中，如果没有IIFE，那么 setTimeout 中的回调函数访问的将是循环结束后 i 的值，也就是 5。但是，通过使用IIFE，我们可以将每次循环的 i 值传递给IIFE，并将其保存在 index 变量中。这样，setTimeout 中的回调函数就可以访问到正确的 index 值。
表格对比：IIFE的“前世今生”
| 特性 | ES5时代（没有块级作用域） | ES6时代（有了块级作用域） |
|---|---|---|
| 主要作用 | 防止全局变量污染，模拟块级作用域 | 防止全局变量污染，模块化 |
| 使用频率 | 非常高 | 仍然常用，但有所下降 |
| 替代方案 | 无 | let 和 const |
第三幕：闭包与IIFE的“完美邂逅”
闭包和IIFE就像一对天作之合，它们可以相互配合，发挥出更大的威力。
1. 创建私有变量
IIFE可以创建一个独立的作用域，而闭包可以访问和操作这个作用域中的变量。通过将变量定义在IIFE中，并使用闭包返回一个可以访问这些变量的函数，我们可以创建私有变量。
例如：
let counter = (function() {
let count = 0;
return {
increment: function() {
count++;
},
decrement: function() {
count--;
},
getCount: function() {
return count;
}
};
})();
counter.increment();
counter.increment();
console.log(counter.getCount()); // 输出: 2
console.log(counter.count); // 输出: undefined (无法直接访问count)在这个例子中，count 变量被定义在IIFE中，无法从外部直接访问。但是，我们可以通过 counter 对象提供的 increment、decrement 和 getCount 方法来操作和访问 count 变量。
2. 模块化
闭包和IIFE可以用于创建模块，将代码组织成独立的单元。通过将模块的代码包裹在IIFE中，可以防止模块中的变量泄露到全局作用域中。
例如：
let myModule = (function() {
let privateVar = "Secret!";
function privateFunction() {
console.log("Inside private function");
}
return {
publicVar: "Hello from module!",
publicFunction: function() {
console.log("Inside public function");
privateFunction();
console.log(privateVar);
}
};
})();
console.log(myModule.publicVar); // 输出: Hello from module!
myModule.publicFunction();
// 输出: Inside public function
// 输出: Inside private function
// 输出: Secret!
console.log(myModule.privateVar); // 输出: undefined (无法直接访问privateVar)
myModule.privateFunction(); // 报错: myModule.privateFunction is not a function在这个例子中，privateVar 和 privateFunction 是模块的私有变量和函数，无法从外部直接访问。但是，我们可以通过 myModule 对象提供的 publicVar 和 publicFunction 来访问和使用模块的功能。
第四幕：现代JavaScript中的IIFE
随着ES6的普及，let 和 const 提供了块级作用域，这使得IIFE在某些场景下的作用有所减弱。但是，IIFE仍然是一种非常有用的技术，尤其是在以下场景中：
- 模块化： IIFE仍然是创建模块的一种简单有效的方式。
- 代码封装： IIFE可以用于封装代码，防止全局变量污染。
- 兼容旧代码： 在需要兼容旧代码时，IIFE可以用于模拟块级作用域。
总结
闭包和IIFE是JavaScript中两个非常重要的概念。它们可以相互配合，发挥出强大的威力。虽然随着ES6的普及，IIFE的作用有所减弱，但它仍然是一种非常有用的技术，值得我们深入学习和掌握。
彩蛋
最后，给大家分享一个关于闭包的段子：
程序员A：听说你最近在研究闭包？
程序员B：是啊，这玩意儿太烧脑了！
程序员A：烧脑？我跟你说，闭包就像你前女友，虽然分手了，但她永远住在你的心里，时不时出来折磨你一下！ 😂
希望今天的分享对大家有所帮助。记住，代码之路漫漫，唯有坚持不懈，才能成为真正的编程高手！ 感谢各位的观看，我们下期再见！ 👋