JavaScript-当即调用函数表达式（IIFE）

1、函数声明&函数表达式

1.1 函数声明 (函数语句)

（1）使用 function 关键字声明一个函数，再指定一个函数名，叫函数声明。

（2）【注意】JavaScript引擎规定，若是function关键字出如今行首，一概解释成函数声明语句

1.2 函数表达式 (function expression)

（1）使用 function 关键字声明一个函数，函数名称可被省略，此种状况下的函数是 匿名函数（anonymous）。 函数名称只是函数体中的一个本地变量。

（2）将匿名函数赋予一个变量，叫函数表达式，这是最多见的函数表达式语法形式。

1.3 匿名函数

（1）下面是匿名函数的一个例子（函数没有名字）。

（2）也能够在定义时为函数命名。

（3）命名函数表达式的好处是当咱们遇到错误时，堆栈跟踪会显示函数名，容易寻找错误。

（4）能够看到，上面的两个例子都不以function开头。不以function开头的函数语句就是函数表达式定义。

1.4 IIFE

（1）但有时须要在定义函数以后，当即调用该函数（函数只使用一次）。这种函数就叫作当即执行函数，全称为当即调用函数表达式IIFE(Imdiately Invoked Function Expression)

2、当即调用函数表达式

2.1 概念

当即调用函数表达式（IIFE）是一个在定义时就会当即执行的 JavaScript 函数。

2.2 组成

（1）这是一个被称为 自执行匿名函数 的设计模式，主要包含两部分。第一部分是包围在 圆括号运算符() 里的一个匿名函数。

（2）第二部分再一次使用 () 建立了一个当即执行函数表达式，JavaScript 引擎到此将直接执行函数。

2.3 写法

（1）【最经常使用的两种办法】

（2）【其余写法】

2.4 括号

（1）不管什么时候，给当即执行函数 加上括号 是个好习惯。

（2）经过以上的介绍，咱们大概了解经过()可使得一个函数表达式当即执行。

（3）有的时候，咱们实际上不须要使用()使之变成一个函数表达式，啥意思？好比下面这行代码，其实不加上()也不会保错。

（4）可是咱们依然推荐加上()。

（5）为何？由于咱们在阅读代码的时候，若是 function 内部代码量庞大，咱们不得不滚动到最后去查看 function(){} 后 是否带有()，用来肯定 i 的值，并判断是 function 仍是 function内部的返回值。因此为了代码的可读性，请尽可能加上()，不管是否已是表达式。

2.4 做用

（1）IIFE 中的匿名函数拥有 独立的词法做用域。这不只避免了外界访问此 IIFE 中的变量，并且又不会污染全局做用域。（另外一种说法 【构造一个函数做用域，防止污染全局变量】）

（2）JavaScript 没用私有做用域的概念，若是是在多人开发的项目，你在全局或局部做用域中声明的变量，可能会被其余人不当心用同名的变量给 覆盖，根据JavaScript 函数做用域链的特性，使用这种技术能够模仿一个私有做用域，匿名函数做为一个“容器”，“容器”内部能够访问外部的变量，而外部环境不能访问“容器”内部的变量，因此 ( function(){…} )() 内部定义的变量不会和外部的变量发生冲突，俗称“匿名包裹器”或“命名空间”。

（3）【注意】将 IIFE 分配给一个变量，不是存储 IIFE 自己，而是存储 IIFE 执行后返回的结果。

2.5 示例

接下来用一个需求实现来更直观地说明IIFE的用途。假设有一个需求，每次调用函数，都返回加1的一个数字(数字初始值为0)

【1】全局变量

通常状况下，咱们会使用全局变量来保存该数字状态

【2】自定义属性

但上面的方法中，变量a实际上只和add函数相关，却声明为全局变量，不太合适

将变量a更改成函数的自定义属性更为恰当

【3】IIFE

其实这样作，仍是有问题。有些代码可能会无心中将add.count重置

使用IIFE把计数器变量保存为私有变量更安全，同时也能够减小对全局空间的污染

阅读更多

参考文章

深刻理解JavaScript系列（4）：当即调用的函数表达式 汤姆大叔

（译）详解javascript当即执行函数表达式（IIFE） 韩子迟

深刻理解闭包系列第三篇——IIFE 小火柴的蓝色理想