在前端开发中，我们经常见到以下这种形式的代码：
----------------- ---------- - -- ---- ---- ---- -----------
这种写法被称为“立即执行函数表达式”（Immediately Invoked Function Expression，IIFE），它可以让我们创建一个局部作用域并且不会污染全局命名空间。那么这个语法具体是如何工作的呢？
函数声明和函数表达式
在深入 IIFE 之前，我们需要先了解两个概念：函数声明和函数表达式。
函数声明通常是这样的：
-------- ----- - -- ---- ---- ---- -
这里的 foo 是一个函数名，后面跟着一对花括号，里面是函数体。当 JavaScript 解析器遇到这个声明时，它会在当前作用域中创建一个名为 foo 的函数对象，并将其赋值给 foo 变量。
函数表达式则是这样的：
--- --- - ---------- - -- ---- ---- ---- --
这里的 bar 是一个变量名，它指向一个函数对象，也就是所谓的匿名函数。当 JavaScript 解析器遇到这个表达式时，它会先创建一个函数对象，然后将这个对象赋值给 bar 变量。因为这个函数没有名字，所以也被称为匿名函数。
IIFE 的基本形式
了解了函数声明和函数表达式的区别之后，我们再来看一下 IIFE 的基本形式：
----------- - -- ---- ---- ---- -----
这里的 (function() {}) 是一个匿名函数表达式，它被用括号包裹起来形成了一个整体，最后用另一对括号调用了这个函数。这样做的好处是可以在定义函数的同时立即执行它，并且不会在全局命名空间中留下任何痕迹。
传递参数
上面的例子中，IIFE 并没有传递任何参数。但是实际上，我们可以在定义函数时就传递参数：
--------------- - ------------------- - - ---- - ----- ------------
这里的 name 是一个函数参数，在调用函数时通过 'World' 传递进去。这样就可以在函数内部访问到外部作用域中的变量。
IIFE 和闭包
由于 IIFE 创建了一个局部作用域，因此可以被用来创建闭包。比如下面这个例子：
--- ------- - ----------- -
--- ----- - --
------ ---------- -
------ --------
--
-----
----------------------- -- -
----------------------- -- -
----------------------- -- -这里的 counter 是一个变量，它指向一个匿名函数的返回值。这个匿名函数中定义了一个局部变量 count，然后返回了另一个匿名函数，这个函数可以访问到 count 变量并对其进行递增操作。
由于外层的匿名函数只会在定义时执行一次，所以 count 变量也只会被创建一次，不会被重置。每次调用 counter() 函数时，内层匿名函数都会被调用，并且能够访问到正确的 count 值，从而实现了计数器的功能。
IIFE 和模块化
最后，我们来看一下如何使用 IIFE 实现简单的模块化。比如下面这个例子：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9644