JavaScript匿名函数与立即执行函数详解

作者:青柠

时间:2026-10-28

浏览:197

本文深入解析JavaScript中函数的两种定义方式及其差异,重点讲解匿名函数与立即执行函数表达式(IIFE)的原理。通过jQuery源码示例,阐述利用参数传递window和undefined优化变量查找速度及保证安全性的技巧,帮助开发者理解闭包与局部作用域的应用。

文章目录

本文通过具体实例介绍JavaScript中匿名函数的使用方法,旨在为读者提供实用的参考与学习素材。

函数的定义方式

一、函数的定义方式

在JavaScript语言中,定义函数主要存在两种途径:函数声明和函数表达式。例如:

1、使用“函数声明”方式定义函数


function t1(){}

2、使用“函数表达式”方式定义函数


t2 = function(){}

尽管上述两种方式都能创建函数,但它们的执行机制存在显著差异。t1属于函数声明,在代码的“词法分析”阶段,解释器会预先处理,此时AO.t1被赋值为function(){},这意味着它在词法分析阶段就已生效。而t2属于赋值操作,仅在代码“运行”阶段才执行,此时AO.t2被赋值为右侧表达式返回的结果,即函数在运行阶段才发挥作用。

匿名函数的概念

二、匿名函数的概念

在JavaScript中,包裹在小括号()内的语句会被当作表达式来执行。基于前文提到的“函数表达式”定义方式,我们可以在小括号内部定义一个函数,例如:


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

若该函数未指定名称,代码可修改为:


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

由于包含在小括号()内的语句属于表达式,因此它具有返回值。例如(function(){alert(' i am t3');})的返回值即为所定义的函数本身。既然有返回值,即可对其进行立即调用,如:


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

综上所述,在小括号()内定义一个没有名称的函数,这种函数被称为匿名函数。通过这种手法实现匿名函数的立即执行,既能保证功能运行,又不会污染全局命名空间,这种模式被称为立即执行函数表达式(IIFE)。

jQuery中的匿名函数应用

三、jQuery中的匿名函数应用

jQuery库的核心代码封装在一个匿名函数中,这是jQuery最外层的代码结构:


(function(window,undefined){})(window);//立即调用

然而,一个值得探讨的问题是:为什么jQuery在传递参数时选择传递window,而不是undefined?

解答:传递window的主要目的是为了提升查找速度,从而减少查询变量所需的时间。参考以下JS代码示例:


function(){
 function(){
   function(){
  function(){
   document.getElementById();
//这个document将会沿作用域层层上找,直到最外层window全局。
  }
   }
 }
}

jQuery通过将window作为参数直接传入,从而加快内部对局部变量的查找速度。这样,window变量便直接存在于jQuery内部的AO(Activation Object)中。

不传递undefined则是出于安全考虑。在低版本的Internet Explorer和Firefox浏览器中,undefined变量竟然可以被重新赋值,例如执行undefined=3;

通过声明一个名为undefined的局部变量,同时不传递对应的参数,该变量的值自然保持为undefined。

希望本文的阐述能对各位的JavaScript程序设计工作有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章