【前端 教程】详解 立即执行函数

【前端 教程】立即执行函数 详解

1、定义

立即执行函数：声明一个函数，并马上调用这个匿名函数就叫做立即执行函数；即立即执行函数是定义函数以后立即执行该函数。

2、立即函数的写法

在理解立即函数写法之前
需要先回顾一下JS的函数定义的几种方式
这样会便于更好理解立即执行函数、
ps：JS中函数定义方法的自行脑补

我们定义好函数之后，立即调用该函数，这时不能在函数的定义后面直接加圆括号，这会产生语法错误。

//这是错误的
function fn(){
   }()

这是因为：function 这个关键字，既可以当做语句，也可以当做表达式
比如：

//语句
function fn() {
   };

//表达式
var fn = function (){
   };

为了避免解析上的歧义，JS引擎规定，如果function出现在行首，一律解析成语句。

因此JS引擎看到行首是function关键字以后，认为这一段都是函数定义，不应该以原括号结尾，所以就报错了。

解决方法就是不要让function出现在行首，让JS引擎将其理解为一个表达式

最简单的处理就是将其放在一个圆括号里，比如下边：

//立即执行函数的两种写法

//第一种：用括号把整个函数定义和调用包裹起来
(function(){
   
 //function body
}())

//第二种：用括号把函数定义包裹起来，后面再加括号
(function (){
   
 //function body
})()

上边的两种写法，就是立即执行函数的两种写法，都是以圆括号开头，引擎会意味后面跟的是表达式，而不是一个函数定义语句，所以就避免了错误，这就叫做"立即调用的函数表达式"。

下面用一张图解释一下立即执行函数原理

立即执行函数一般也写成匿名函数，匿名函数写法为function(){/…/}，所谓匿名函数，就是使用function关键字声明一个函数，但未给函数命名，倘若需要传值，直接将参数写到括号内即可。

将它赋予一个变量则创建函数表达式，赋予一个事件则成为事件处理程序等。但是需要注意的是匿名函数不能单独使用，否则会js语法报错，至少要用()包裹起来。

了解了立即函数的原理，就可以再扩展出其他的写法：

(function foo(){
   console.log("Hello World!")}())//用括号把整个表达式包起来,正常执行
(function foo(){
   console.log("Hello World!")})()//用括号把函数包起来，正常执行
!function foo(){
   console.log("Hello World!")}()//使用！，求反，这里只想通过语法检查。
+function foo(){
   console.log("Hello World!")}()//使用+，正常执行
-