JS 立即执行箭头函数：`(() => { /* … */ })()`

嘿，大家好！今天咱们来聊聊 JavaScript 里一个挺有意思的小东西：立即执行的箭头函数 (Immediately Invoked Arrow Function Expression, IIAFE)。 名字有点长哈，但其实这玩意儿超级实用，而且理解起来也没那么玄乎。 准备好了吗？Let’s dive in!

什么是立即执行函数？

首先，咱们得知道什么是立即执行函数。 简单来说，就是一个函数定义完之后立刻就执行了。 想象一下，你做好了一份早餐，不是放在冰箱里等明天吃，而是直接端起来就开吃。 立即执行函数也是这个道理。

在 JavaScript 早期，我们通常用这样的方式来创建立即执行函数：

(function() {
  console.log("Hello from IIFE!");
})();

或者：

(function() {
  console.log("Hello from IIFE!");
}());

这两种写法效果一样，区别在于包裹函数的括号的位置。 重点在于：

• function() { ... }：这是一个匿名函数表达式。
• ()： 这第一个括号把匿名函数表达式变成了表达式，避免 JavaScript 引擎把它当作函数声明来处理。函数声明需要一个名字，而这里我们是匿名的。
• ()：这第二个括号是函数调用运算符，用来立即执行这个匿名函数。

为什么需要立即执行函数？

你可能会问，干嘛这么费劲儿？ 直接写个函数然后调用不就完了吗？ 问得好！ 立即执行函数主要有以下几个好处：

1. 避免全局变量污染：

   这是最常见也是最重要的一个原因。 在 IIFE 内部声明的变量和函数，作用域仅限于 IIFE 内部，不会污染全局作用域。 想象一下，你的房间就是 IIFE，你在房间里随便放东西，都不会影响到隔壁老王。

   (function() {
     var myVariable = "I'm local!";
     console.log(myVariable); // 输出 "I'm local!"
   })();
   
   console.log(myVariable); // 报错：myVariable is not defined

   如果在没有 IIFE 的情况下，myVariable 会变成全局变量，这可能会导致与其他脚本中的变量冲突，引起各种奇奇怪怪的问题。

2. 创建私有变量：

   利用闭包的特性，IIFE 可以创建私有变量。 私有变量只能在 IIFE 内部访问，外部无法直接修改。 这就像你有一个保险箱，只有你知道密码，别人没法打开。

   var counter = (function() {
     var privateCounter = 0;
     function changeBy(val) {
       privateCounter += val;
     }
     return {
       increment: function() {
         changeBy(1);
       },
       decrement: function() {
         changeBy(-1);
       },
       value: function() {
         return privateCounter;
       }
     };
   })();
   
   console.log(counter.value()); // 输出 0
   counter.increment();
   counter.increment();
   console.log(counter.value()); // 输出 2
   counter.decrement();
   console.log(counter.value()); // 输出 1
   
   // counter.privateCounter; // 报错：undefined (无法直接访问私有变量)

   在这个例子中，privateCounter 是一个私有变量，只能通过 increment、decrement 和 value 方法来访问和修改。 外部无法直接访问 privateCounter，保证了数据的安全性。

3. 模块化：

   IIFE 可以用来创建简单的模块。 模块可以封装一些功能，并提供一些公共接口供外部使用。 这就像你把一些零件组装成一个模块，然后提供一些接口让别人可以使用这个模块的功能。

   var myModule = (function() {
     var privateVar = "Secret!";
   
     function privateFunction() {
       console.log("I'm a private function!");
     }
   
     return {
       publicVar: "Hello!",
       publicFunction: function() {
         console.log("I'm a public function!");
         privateFunction(); // 可以访问私有函数
         console.log(privateVar); // 可以访问私有变量
       }
     };
   })();
   
   console.log(myModule.publicVar); // 输出 "Hello!"
   myModule.publicFunction(); // 输出 "I'm a public function!" 和 "I'm a private function!" 和 "Secret!"
   // myModule.privateVar; // 报错：undefined (无法直接访问私有变量)
   // myModule.privateFunction(); // 报错：myModule.privateFunction is not a function (无法直接访问私有函数)

   在这个例子中，myModule 封装了一些私有变量和函数，并提供了一些公共变量和函数供外部使用。 这样可以更好地组织代码，提高代码的可维护性。

箭头函数登场！

好了，铺垫了这么多，终于轮到我们的主角——箭头函数出场了！ 箭头函数是 ES6 引入的一种更简洁的函数语法。 用箭头函数来创建 IIFE，代码会更加简洁。

(() => {
  console.log("Hello from IIAFE!");
})();

是不是感觉清爽多了？ () => { ... } 就是一个箭头函数。 箭头函数会自动绑定 this，这在某些情况下非常有用。

IIAFE 的写法

箭头函数的 IIFE 也有几种常见的写法：

1. 最常见的写法：

   (() => {
     // Your code here
   })();

2. 加上分号：

   ;(() => {
     // Your code here
   })();

   加分号是为了防止代码压缩后与其他代码混在一起，导致语法错误。 这是一个良好的编程习惯。

3. 使用 void 运算符：

   void (() => {
     // Your code here
   })();

   void 运算符会执行一个表达式，并返回 undefined。 这种写法可以避免 IIFE 的返回值被其他代码意外使用。

4. 使用 +、-、! 运算符：

   +(() => {
     // Your code here
   })();
   
   -(() => {
     // Your code here
   })();
   
   !(() => {
     // Your code here
   })();

   这些运算符也会执行一个表达式，并返回一个值。 这种写法和 void 运算符类似，也可以避免 IIFE 的返回值被其他代码意外使用。

IIAFE 的应用场景

IIAFE 在实际开发中有很多应用场景：

1. 初始化代码：

   IIAFE 可以用来执行一些初始化代码，例如设置全局变量、绑定事件监听器等。 这些代码只需要执行一次，所以可以用 IIAFE 来保证只执行一次。

   (() => {
     // 设置全局变量
     window.myGlobalVariable = "Initialized!";
   
     // 绑定事件监听器
     document.addEventListener("DOMContentLoaded", function() {
       console.log("Document is ready!");
     });
   })();

2. 循环中的闭包问题：

   在循环中使用闭包时，可能会遇到一些问题。 IIAFE 可以用来解决这些问题。

   for (var i = 0; i < 5; i++) {
     (function(index) {
       setTimeout(function() {
         console.log("Index: " + index);
       }, 1000);
     })(i);
   }

   如果没有 IIFE，setTimeout 中的 index 始终是 5，因为循环结束后 i 的值变成了 5。 使用 IIFE 可以将每次循环的 i 的值保存下来，保证 setTimeout 中的 index 是正确的。

3. 模块化开发：

   IIAFE 可以用来创建简单的模块，封装一些功能，并提供一些公共接口供外部使用。 这可以更好地组织代码，提高代码的可维护性。

   var myModule = (() => {
     var privateVar = "Secret!";
   
     function privateFunction() {
       console.log("I'm a private function!");
     }
   
     return {
       publicVar: "Hello!",
       publicFunction: () => {
         console.log("I'm a public function!");
         privateFunction(); // 可以访问私有函数
         console.log(privateVar); // 可以访问私有变量
       }
     };
   })();
   
   console.log(myModule.publicVar); // 输出 "Hello!"
   myModule.publicFunction(); // 输出 "I'm a public function!" 和 "I'm a private function!" 和 "Secret!"
   // myModule.privateVar; // 报错：undefined (无法直接访问私有变量)
   // myModule.privateFunction(); // 报错：myModule.privateFunction is not a function (无法直接访问私有函数)

IIFE 与 ES Modules

需要注意的是，随着 ES Modules 的普及，IIFE 的使用场景正在逐渐减少。 ES Modules 提供了更好的模块化机制，可以更好地组织代码，避免全局变量污染。 但是，在一些不支持 ES Modules 的环境中，IIFE 仍然是一种非常有用的技术。

特性	IIFE (Immediately Invoked Function Expression)	ES Modules (ECMAScript Modules)
模块化	简单模块化，通过闭包实现	更强大的模块化系统，支持导入导出
作用域	函数作用域	模块作用域
全局污染	避免全局污染	天然避免全局污染
加载方式	立即执行	异步加载，按需加载
兼容性	兼容性好	需要浏览器或构建工具支持
使用场景	老旧代码，不支持 ES Modules 的环境	现代 JavaScript 开发

总结

立即执行的箭头函数 (IIAFE) 是一种非常有用的 JavaScript 技术，可以用来避免全局变量污染、创建私有变量和模块化开发。 虽然随着 ES Modules 的普及，IIFE 的使用场景正在逐渐减少，但在一些不支持 ES Modules 的环境中，IIFE 仍然是一种非常有用的技术。

希望今天的讲解对大家有所帮助！ 记住，理解 IIAFE 的关键在于理解函数表达式、函数调用和闭包的概念。 多写代码，多实践，你就能掌握这个小技巧！ 感谢大家！