怎么向JavaScript立即执行函数传递参数

向 JavaScript 立即执行函数（IIFE, Immediately Invoked Function Expression）传递参数的核心方法，就是在声明函数表达式时于函数括号内定义形参，并在紧随其后的调用圆括号内传入具体实参。JavaScript 引擎在解析并执行该表达式的瞬间，会将外部传入的实参精准绑定到函数内部的私有作用域中。

一、基础语法与调用形式

立即执行函数本质上是一个在定义之后立即被调用的函数表达式。在日常开发中，向其传递参数主要有两种最常见的标准括号写法，两者在语义和参数接收机制上完全等价：

// 形式一：先用括号包裹函数表达式，再在末尾调用（最常用）
(function (name, version) {
  console.log("模块名：" + name + "，版本：" + version);
})("AuthModule", 1.2);

// 形式二：将整个调用括号一同包裹在最外层括号内（Douglas Crockford 推荐风格）
(function (name, version) {
  console.log("模块名：" + name + "，版本：" + version);
}("DataService", 2.0));

除传统函数表达式外，在现代 ES6+ 语法中，也可以结合箭头函数编写立即执行函数并传递参数：

// 箭头函数形式的 IIFE 传参
((apiUrl, timeout) => {
  console.log("请求地址：" + apiUrl + "，超时阈值：" + timeout + "ms");
})("https://api.example.com", 5000);

二、常见实战应用场景

向立即执行函数传参并不只是为了传递字面量，在工程实践中它解决了作用域隔离、全局依赖清晰化和性能优化等多个关键痛点。

1. 捕获循环索引：解决闭包共享变量问题

在 ES6 引入 let 之前，for 循环中的 var 变量具有函数作用域或全局作用域。当在循环内部注册异步回调（如 setTimeout 或 DOM 点击事件）时，所有回调都会共享同一个最终的计数器变量。通过引入 IIFE 并将当前计数器作为实参传入，每次循环都能开辟一个全新的作用域，将当前数值“固化”为局部参数：

// 未使用 IIFE 传参：最终输出三次 3
for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log("常规循环 i:", i); // 3, 3, 3
  }, 100);
}

// 使用 IIFE 传递参数：每次循环保留独立的参数副本
for (var i = 0; i < 3; i++) {
  (function (index) {
    setTimeout(function () {
      console.log("IIFE 保存的 index:", index); // 0, 1, 2
    }, 100);
  })(i); // 此处将当前的 i 作为实参传入
}

2. 传递全局对象：提升性能与压缩率

在早期各类经典库（如 jQuery、Lodash、Underscore）的源码中，向 IIFE 传递 window 和 document 是最标志性的设计模式：

(function (global, doc, undefined) {
  // 1. 将全局对象转化为函数局部变量，查找速度更快
  var body = doc.body;

  // 2. 防御旧版环境中 undefined 可能被恶意篡改的问题
  if (body === undefined) {
    // ...
  }

  // 3. 将对外 API 显式挂载到传入的宿主上
  global.MyPlugin = {
    init: function () {
      console.log("插件初始化成功");
    }
  };
})(typeof window !== "undefined" ? window : this, document);

三、核心差异对比：显式入参传递 vs 隐式作用域穿透

许多初学者常有疑问：既然立即执行函数处于父级作用域内，可以直接“看到”外层的变量，为什么还要大费周章地通过圆括号将 window、配置对象等作为参数显式传进去？

这是因为显式参数传递与隐式作用域链穿透查找在底层执行机制、资源打包和架构维护上存在本质区别：

为了更直观地展示为什么这种差异在工程上至关重要，我们可以从以下维度进行综合对照：

四、关键注意事项与防错守则

1. 警惕自动分号插入（ASI）陷阱：前置分号保护

由于立即执行函数通常以圆括号 ( 开头，如果上方代码行末尾省略了分号，JavaScript 解释器会将两行合并解析，把上一行的末尾表达式当作函数来调用，导致意料之外的 TypeError: ... is not a function：

// 错误示范：上一行没有加分号
var name = "Antigravity"
(function (prefix) {
  console.log(prefix + name);
})("Hello, ")
// 引擎会解析为：var name = "Antigravity"(function(...){...})("Hello, ");
// 抛出错误：TypeError: "Antigravity" is not a function

// 正确防御：在 IIFE 前加防御性分号（Defensive Semicolon）
;var name = "Antigravity";
;(function (prefix) {
  console.log(prefix + name);
})("Hello, ");

2. 按值传递 vs 按引用传递的区别

向 IIFE 传递参数同样严格遵循 JavaScript 的参数传递规则：基本类型按值传递，对象/数组等引用类型按共享传递（即复制引用地址）。

• 若传递数字、字符串或布尔值，在 IIFE 内部修改该形参，绝不会影响外部原生变量；
• 若传递的是对象（如配置字典或状态对象），在 IIFE 内部修改对象的属性，外部所引用的对象内容会同步发生改变。

var config = { theme: "light" };
var count = 10;

(function (cfg, num) {
  cfg.theme = "dark"; // 改变了传入对象的属性，外部 config.theme 随之变为 "dark"
  num = 20;            // 仅改变了局部形参的原始数值，外部 count 仍是 10
})(config, count);

五、核心要点总结

向立即执行函数传递参数是 JavaScript 模块化演进史中的基石模式。无论是在维护早期项目、编写轻量级单文件插件，还是深入理解现代前端构建工具的输出产物，掌握其参数传递的规律都至关重要。