JavaScript立即执行函数(IIFE)原理与写法详解

JavaScript立即执行函数(IIFE)原理与写法详解

前言

IIFE的基本概念与常见写法

JavaScript中的立即执行函数（Immediately Invoked Function Expression，简称IIFE）是一种语法模式，它允许函数在定义完成后立即执行。这种模式的本质是函数表达式（无论是命名函数还是匿名函数），其核心特征是在创建后即刻被调用。

常见的IIFE写法包括 ( function(){…} )() 和 ( function (){…} () )。起初可能误以为这只是用括号包裹匿名函数后加括号调用的简单组合，旨在实现定义后立即执行的目的，但深入分析会发现，添加括号的原因涉及JavaScript引擎对代码的解析逻辑。

接下来将详细展开介绍相关原理与用法。

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

在JavaScript中，声明函数通常有以下几种基本方式：

// 声明函数f1
function f1() {
 console.log("f1");
}
// 通过()来调用此函数
f1();


//一个匿名函数的函数表达式，被赋值给变量f2:
var f2 = function() {
 console.log("f2");
}
//通过()来调用此函数
f2();


//一个命名为f3的函数的函数表达式(这里的函数名可以随意命名，可以不必和变量f3重名)，被赋值给变量f3:
var f3 = function f3() {
 console.log("f3");
}
//通过()来调用此函数
f3();

在查看许多自定义控件或插件代码时，会发现它们大多采用这种特定的写法结构。

(function() {
 ```
 // 这里开始写功能需求
 })(); 

这就是我们常说的立即执行函数（IIFE）。顾名思义，该函数体在定义时即被执行，无需额外手动调用。通常IIFE仅用于匿名函数，这样做主要基于两个目的：

第一，无需为函数命名，从而避免了对全局变量的污染。

第二，IIFE内部形成了一个独立的作用域，可以封装一些外部无法直接访问的私有变量。

如果对上述两点尚不理解，我们可以从IIFE的运行原理入手进行分析。

由于IIFE通常用于匿名函数，这里以简单的匿名函数为例进行说明：

var f = function(){
 console.log("f");
}
f();

我们可以看到，变量 f 只是指向该匿名函数的一个引用。既然可以通过 f() 调用该函数，那么是否可以直接将 f 替换为函数本身呢？

function(){
 console.log("f"); 
}();

尝试直接运行上述代码后，会得到如下报错结果：

Uncaught SyntaxError: Unexpected token (

IIFE避免全局污染与封装私有变量的原理

产生该错误的原因是，JavaScript引擎在解析代码时，看到 function 关键字后，默认将其识别为函数声明语句。而函数声明语句不应以圆括号结尾。解决方法是明确告知引擎，圆括号前的部分不是函数定义语句，而是一个可以参与运算的表达式。这里需要区分函数声明和函数表达式：

1、函数声明（即我们通常使用的 function x(){} 形式）

function myFunction () { /* logic here */ }

2、函数表达式（类似 var myFunction = function () { /* logic here */ }; 或对象属性赋值形式）

var myFunction = function () { /* logic here */ };
var myObj = {
 myFunction: function () { /* logic here */ }
};

正如小学数学中括号具有优先执行的作用，在JavaScript中小括号也具有类似的优先级特性，例如：

1+(2+3) //这里先运行小括号里面的内容没有意见撒

在JavaScript中，小括号具有特殊作用。当JavaScript引擎遇到function关键字时，会将其视为函数声明语句。如果引擎优先识别到小括号，其行为将有所不同：

//用小括号把函数包裹起来
(function(){
  console.log("f");  
})();

此时函数能够成功执行。

f //控制台输出

在这种情况下，JavaScript引擎会将该结构识别为表达式而非函数声明。当然，让引擎将其识别为表达式的方法还有很多，例如：

!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有传递参数时，才需要最后那个圆括号。
……

IIFE在jQuery插件中的应用示例

回到之前的问题，为什么说IIFE这种形式能够避免污染全局变量？如果你阅读过别人编写的jQuery插件，通常会看到类似这样的代码结构：

(function($){
  ```
  //插件实现代码
})(jQuery);

这里的 jquery 实际上是作为该匿名函数的参数传入的。联想一下，调用普通匿名函数时是 f()，那么带参数的调用即为 f(args)。这里将 jquery 作为参数传入函数，在函数内部使用形参 $ 时，就不会影响到外部环境。因为有些插件也会用到 $ 这个符号，在函数内部可以随意使用 $ 而无需担心冲突。

以上内容的参考来源包括以下两篇文章：

javascript立即执行某个函数：插件中function(){}()再思考

JavaScript中的立即执行函数

总结

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对本站的支持。