简单理解IIFE

内容参考：https://segmentfault.com/a/1190000003985390

---

（一）IIFE是什么

IIFE（ Immediately Invoked Function Expression）意为立即调用的函数表达式，也就是说，用IIFE声明函数的同时也立即调用这个函数。

以下是不采用IIFE的函数声明和函数调用：

function myFunc(){var i = 0;alert(++i);}myFunc();

以下是采用IIFE的写法：

(function myFunc(){    var i = 0;    alert(++i);})();

很明显可以看出，IIFE的写法其实就是把函数用一对括号包含，然后在这对括号后面立即接上一对括号，表示调用这个函数。其原理是，当js编译器遇到第一对括号的时候，便不再把其内的function当做是函数声明，而是一个IIFE，即需要立刻执行的函数。

以上两种产生的效果都是一样的：都是生命并调用myFunc函数。

（二）为什么使用IIFE？

1、作用域问题

在ES6（ECMAScript6）之前，javascript在作用域（scope）上的控制十分薄弱，没有很好的块级作用域隔离方式，使得变量得不到封装，容易冲突出现意料之外的错误，例如：

var tmp = new Date();function f() {  console.log(tmp);  if (false) {    var tmp = 'hello world';  }}f();

这个程序会输出undefined,这是因为js的“变量提升”，函数内部变量覆盖了外层变量。

2、代码复用

在我们通常的理解中，将代码封装到函数中的目的是为了复用。在JS中，当然声明函数的目的在大多数情况下也是为了复用，但是JS迫于作用域控制手段的贫乏，我们也经常看到只使用一次的函数：这通常的目的是为了隔离作用域了！既然只使用一次，那么立即执行好了！既然只使用一次，函数的名字也省掉了！这就是IIFE的由来。

（三）IIFE的常见写法

根据表示函数执行的一对（）的位置不同，常见的IIFE写法有两种：
写法1：

(function myFunc(){    /* code... */})();

写法2：

(function myFunc(){    /* code... */}());

以上两种写法的效果完全相同，但是写法1似乎更常见，可读性也更强。

（四）IIFE的函数名和参数

根据《You Don’t Know JS:Scope & Clouses》[2]的说法，尽量避免使用匿名函数。但是IIFE确实只执行一次，给IIFE起个名字有些画蛇添足了。如果非要给IIFE起个名字，干脆就叫IIFE好了。

此外，IIFE可以带（多个）参数，比如下面的形式：

var a = 2;(function IIFE(global){    var a = 3;    console.log(a); // 3    console.log(global.a); // 2})(window);console.log(a); // 2

（五）IIFE构造单例模式

JS的模块就是函数，最常见的模块定义如下：

function myModule(){  var someThing = "123";  var otherThing = [1,2,3];  function doSomeThing(){    console.log(someThing);  }  function doOtherThing(){    console.log(otherThing);  }  return {    doSomeThing:doSomeThing,    doOtherThing:doOtherThing  }}var foo = myModule();foo.doSomeThing();foo.doOtherThing();var foo1 = myModule();foo1.doSomeThing();

如果需要一个单例模式的模块，那么可以利用IIFE：

var myModule = (function module(){  var someThing = "123";  var otherThing = [1,2,3];  function doSomeThing(){    console.log(someThing);  }  function doOtherThing(){    console.log(otherThing);  }  return {    doSomeThing:doSomeThing,    doOtherThing:doOtherThing  }})();myModule.doSomeThing();myModule.doOtherThing();

小结

总的来说，IIFE是为了隔离作用域，防止全局命名空间被污染。
而ES6中，使用let等命令也可以有效控制作用域。