简单理解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等命令也可以有效控制作用域。