JS自执行箭头函数：简洁高效的立即执行技巧

自执行的箭头函数（也常叫立即执行的箭头函数），简单来说就是定义后立刻执行的箭头函数，这是 JavaScript 中一种常用的代码封装和立即执行的写法。

一、自执行箭头函数的基础写法

首先先看最核心的写法，核心思路是：用括号包裹箭头函数（让解析器识别为函数表达式而非函数声明），再紧跟一对括号触发执行。

基础格式

javascript

运行

// 最常用的标准写法
(() => {
  // 函数体：这里的代码会立即执行
  console.log("我是自执行的箭头函数，立刻执行！");
})();

// 带参数的自执行箭头函数
((name, age) => {
  console.log(`你好，我是${name}，今年${age}岁`);
})(["张三"], 20); // 执行时传入参数

// 有返回值的自执行箭头函数
const result = (() => {
  const a = 10;
  const b = 20;
  return a + b;
})();
console.log(result); // 输出：30

写法细节说明

1. 外层括号 (...)：必须加！因为直接写 () => {}() 会报错 ——JavaScript 解析器会把开头的 () 当成语句开头，而非函数表达式，括号能强制把箭头函数转为函数表达式，才能被后面的 () 执行。
2. 执行括号 ()：紧跟在函数表达式后，触发函数立即执行，还能在这里传入参数（如第二个例子的 ["张三"], 20）。
3. 简化写法（不推荐，可读性差）：

   javascript

   运行

   // 少数场景会看到这种写法，效果一致，但可读性不如标准写法
   (() => console.log("简化写法"))();
   

二、自执行箭头函数的用途

1. 创建独立作用域：避免变量污染全局作用域（ES6 前常用，现在更多用 let/const，但封装临时逻辑仍有用）：

   javascript

   运行

   // 全局作用域中，这里的 temp 不会泄露到外部
   (() => {
     const temp = "临时变量";
     console.log(temp); // 输出：临时变量
   })();
   console.log(temp); // 报错：temp is not defined
   

2. 立即执行一次性逻辑：比如页面加载后立刻初始化数据、执行一次性计算：

   javascript

   运行

   // 页面加载后立即计算并渲染数据
   (() => {
     const userList = [1, 2, 3].map(id => ({ id, name: `用户${id}` }));
     console.log("初始化用户列表：", userList);
   })();
   

三、和传统自执行函数的对比

javascript

运行

// ES5 传统自执行函数（IIFE）
(function() {
  console.log("ES5 自执行函数");
})();

// ES6 自执行箭头函数（更简洁）
(() => {
  console.log("ES6 自执行箭头函数");
})();

箭头函数的优势：更简洁、不绑定 this（继承外层作用域的 this），适合不需要自定义 this 的场景。

总结

1. 自执行箭头函数核心写法：(() => { 逻辑 })()，外层括号将箭头函数转为表达式，末尾括号触发立即执行；
2. 核心用途是创建独立作用域、执行一次性逻辑，避免变量污染全局；
3. 相比 ES5 传统自执行函数，箭头函数更简洁，且继承外层 this，无自定义 this 需求时优先用。