深入理解 JavaScript 匿名函数与 IIFE

函数声明与函数表达式的区别

在 JavaScript 中，定义函数主要有两种形式：函数声明和函数表达式。两者虽然在功能上都能创建函数，但在内存分配和执行时机上存在本质差异。

1. 函数声明

function t1() { }

2. 函数表达式

t2 = function() { }

这两种方式的区别在于“词法分析”与“运行时”的处理不同：

• 函数声明 (t1)：
  在进行“词法分析”阶段，解析器会优先处理函数声明，将其直接挂载到当前执行上下文的 AO (Activation Object) 对象上。这意味着即使调用发生在声明之前，也能正常访问该函数（即函数提升）。
• 函数表达式 (t2)：
  这是一个赋值操作。在“运行”阶段，解析器才会执行赋值语句，将右侧匿名函数的引用赋值给变量 t2。如果在声明前调用，则会报错 TypeError。

匿名函数与立即执行函数 (IIFE)

匿名函数是指没有具体名称的函数。由于函数名通常用于递归或调试栈追踪，匿名函数常配合表达式或事件监听使用。当我们将匿名函数包裹在小括号 () 中时，它被视为一个表达式。

第1步：构建表达式结构

通过在括号内定义函数，可以强制解析器将其视为表达式。例如：

(function t3() {
  alert('i am t3');
})

如果去掉名字 t3，即为标准的匿名函数：

(function () {
  alert('i am t3');
})

第2步：理解返回值与立即执行

小括号内的表达式是有返回值的，其返回值即为该函数本身。既然结果是函数，就可以通过追加一对小括号 () 来立即调用它：

(function () {
  alert('i am t3');
})();

这种写法被称为**立即执行函数表达式 (IIFE - Immediately Invoked Function Expression)**。其核心优势在于隔离作用域：内部定义的变量不会泄漏到全局环境，避免了命名冲突和全局污染。

IIFE 的经典实战：jQuery 源码原理

现代前端库（如 jQuery）广泛使用 IIFE 进行模块封装。以 jQuery 外层代码为例：

(function (window, undefined) {
  // ... jQuery 逻辑 ...
})(window);

这种设计包含两个关键策略：

第3步：优化变量查找速度（传递 window）

在 JavaScript 作用域链中，查找变量是从当前局部作用域向上逐层搜索至全局作用域的。如果频繁使用 window，需要在每一层都进行一次查找。

通过将 window 作为参数传入 IIFE：

1. 目的：缩短变量作用域链的查找层级。
2. 效果：在 IIFE 内部，window 变成了局部变量，位于最外层的 AO 中。访问速度远快于从深层嵌套函数逐级上溯到全局对象的速度。

第4步：安全性防御（处理 undefined）

在现代 ES5+ 环境中，undefined 是全局属性且不可写，但在早期浏览器（如 IE8 及以下或部分旧版 Firefox）中，undefined 是一个可变的局部变量。攻击者或错误代码可能执行 undefined = 3 从而破坏程序逻辑。

IIFE 的定义方式是接收参数但调用时不传参：

// 参数位留空
(function (window, undefined) { ... })(window);

此时，形参 undefined 处于未定义状态（即初始值为 undefined）。即使外部全局作用域的 undefined 被篡改，IIFE 内部的这个局部变量依然保持正确的原始值。这是一种低成本且高效的防御手段。

以上就是 JavaScript 匿名函数与 IIFE 的详细内容，更多关于 JavaScript 高阶用法的资料请关注本站其它相关文章！