早上好，各位代码界的弄潮儿！今天咱们来聊聊一个挺有意思的话题：JS立即执行函数表达式（IIFE）的“老朋友”，以及它在现代JavaScript世界中的“新邻居”——块级作用域。
咱们先热热身：啥是IIFE？
IIFE，也就是Immediately Invoked Function Expression，直译过来就是“立即调用的函数表达式”。 别被这名字吓跑，其实它很简单，就是一个函数，定义完之后立刻执行。
传统写法大概长这样：
(function() {
var message = "Hello from IIFE!";
console.log(message);
})();或者这样：
(function(){
var message = "Hello from IIFE!";
console.log(message);
}());再或者这样，加个叹号、加号、减号、波浪号，都能让它“立即执行”起来，神奇吧？
!function() {
var message = "Hello from IIFE!";
console.log(message);
}();
+function() {
var message = "Hello from IIFE!";
console.log(message);
}();
-function() {
var message = "Hello from IIFE!";
console.log(message);
}();
~function() {
var message = "Hello from IIFE!";
console.log(message);
}();IIFE的主要作用是创建私有作用域，避免变量污染全局命名空间。 在ES5时代，这可是个宝贝，因为那时候只有函数作用域和全局作用域。
IIFE的“前世今生”：为什么要用它？
在ES5及更早的版本中，JavaScript只有两种作用域：全局作用域和函数作用域。这意味着，如果你在一个函数内部定义一个变量，这个变量只在这个函数内部可见。但是，如果你在函数外部定义一个变量，这个变量就会成为全局变量，可以在任何地方访问到。
全局变量的问题在于，它们很容易被覆盖或修改，导致意想不到的错误。尤其是在大型项目中，多个JavaScript文件可能会定义相同名称的全局变量，造成冲突。
IIFE的出现就是为了解决这个问题。通过将代码包裹在一个立即执行的函数中，IIFE可以创建一个独立的作用域，其中的变量不会污染全局命名空间。
IIFE的好处:
- 避免全局变量污染： 这是它最核心的作用。IIFE就像一个“小房间”，里面的东西（变量、函数）只在房间里有效，不会影响到外面的世界。
- 模块化代码： 可以把一些相关的代码封装在一个IIFE里，形成一个简单的模块。
- 解决循环闭包问题： 这是个经典面试题，后面会讲到。
IIFE的“老朋友”：var的“坑”
在ES6之前，我们声明变量主要用var。var声明的变量，作用域是函数级别的。 这意味着，在函数内部声明的var变量，在整个函数内部都是可见的，即使是在循环或条件语句中声明的。
举个例子：
function example() {
if (true) {
var x = 10;
}
console.log(x); // 输出 10，即使 x 是在 if 语句块中声明的
}
example();这就导致一个问题：变量可能会在不应该存在的地方存在，造成意料之外的bug。
循环闭包问题：IIFE的经典应用
这是一个经典的例子，也是IIFE大显身手的地方。
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i); // 输出 5, 5, 5, 5, 5
}, 1000);
}你可能期望输出0, 1, 2, 3, 4，但实际上输出的是五个5。这是因为setTimeout是异步的，当setTimeout中的函数执行时，循环已经结束，i的值变成了5。 所有定时器都引用了同一个i变量。
IIFE可以解决这个问题：
for (var i = 0; i < 5; i++) {
(function(j) {
setTimeout(function() {
console.log(j); // 输出 0, 1, 2, 3, 4
}, 1000);
})(i);
}在这个例子中，我们使用IIFE创建了一个新的作用域，并将当前的i的值作为参数传递给IIFE。这样，每个setTimeout中的函数都引用了不同的j变量，从而解决了循环闭包问题。
ES6的“新邻居”：块级作用域的崛起
ES6引入了let和const，它们声明的变量具有块级作用域。 块级作用域指的是变量只在声明它的代码块（通常是由花括号{}包围的代码）中可见。
function example() {
if (true) {
let y = 20;
const z = 30;
}
console.log(y); // 报错：y is not defined
console.log(z); // 报错：z is not defined
}
example();let和const的出现，让我们可以更精确地控制变量的作用域，避免变量污染和意外的bug。
let和const的“脾气”：
let: 声明一个块级作用域的变量，可以重新赋值。const: 声明一个块级作用域的常量，一旦赋值，就不能再改变。 注意，如果const声明的是一个对象，对象本身的属性是可以修改的。
块级作用域的“妙用”：
- 替代IIFE： 块级作用域可以用来创建私有作用域，避免全局变量污染，从而在很多情况下替代IIFE。
- 更清晰的代码： 块级作用域让代码的结构更清晰，更容易理解和维护。
- 避免循环闭包问题：
let可以更容易地解决循环闭包问题，无需使用IIFE。
用let解决循环闭包问题：
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i); // 输出 0, 1, 2, 3, 4
}, 1000);
}在这个例子中，let声明的i变量具有块级作用域。每次循环都会创建一个新的i变量，因此每个setTimeout中的函数都引用了不同的i变量，从而解决了循环闭包问题。 是不是觉得代码简洁了很多？
IIFE vs. 块级作用域：一场“新老对话”
| 特性 | IIFE | 块级作用域 (let, const) |
|---|---|---|
| 作用域 | 函数作用域 | 块级作用域 |
| 声明方式 | 函数表达式 | let, const |
| 可变性 | 取决于IIFE内部的变量声明 (var, let, const) |
let 可变, const 不可变 |
| 解决循环闭包问题 | 需要手动传递变量到IIFE中 | let 直接解决 |
| 代码简洁性 | 相对冗长 | 更简洁 |
| 兼容性 | ES5及以上 | ES6及以上 |
什么时候用IIFE？什么时候用块级作用域？
- 如果你需要兼容ES5： 只能用IIFE。
- 如果你的代码库已经大量使用了IIFE： 可以继续使用，毕竟代码的稳定性也很重要。
- 如果你的目标是编写更简洁、更易于维护的现代JavaScript代码： 优先考虑使用块级作用域。
- 需要更精细的作用域控制： 块级作用域可以让你更灵活地控制变量的可见性。
- 需要避免
var带来的变量提升问题：let和const不存在变量提升，可以避免一些潜在的bug。
总结：
IIFE是ES5时代解决作用域问题的利器，但在现代JavaScript中，块级作用域提供了更简洁、更强大的解决方案。 let和const的出现，让我们可以编写更清晰、更易于维护的代码。
虽然IIFE在某些情况下仍然有用，但你应该优先考虑使用块级作用域，尤其是在编写新的JavaScript代码时。 拥抱ES6的新特性，让你的代码更上一层楼！
最后，给大家留个小思考题： const声明的对象，对象本身的属性可以修改，这和const的“常量”的定义是否冲突？ 欢迎大家积极讨论，分享你的看法！
感谢各位的聆听，今天的讲座就到这里。希望大家有所收获，在代码的道路上越走越远！