深入理解JavaScript

前面的话

严格来讲，IIFE并不是闭包，因为它并不满足函数成为闭包的三个条件。但一般地，人们认为IIFE就是闭包，毕竟闭包有多个定义，本文将详细介绍IIFE的实现和用途。

实现

函数跟随一对圆括号()表示函数调用：

//函数声明语句写法function test(){};test();//函数表达式写法var test = function(){};test();

但有时需要在定义函数之后，立即调用该函数。这种函数就叫做立即执行函数，全称为立即调用的函数表达式IIFE(Imdiately Invoked Function Expression)。

【注意】javascript引擎规定，如果function关键字出现在行首，一律解释成函数声明语句。

1、 函数声明语句需要一个函数名，由于没有函数名，所以报错。

// SyntaxError: Unexpected tokenfunction(){}();

2、函数声明语句后面加上一对圆括号，只是函数声明语句与分组操作符的组合而已。由于分组操作符不能为空，所以报错。

// SyntaxError: Unexpected tokenfunction foo(){}();// 等价于function foo(){}; (); // SyntaxError: Unexpected token

3、函数声明语句加上一对有值的圆括号，也仅仅是函数声明语句与不报错的分组操作符的组合而已。

function foo(){}(1);// 等价于function foo(){};(1);

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

最常用的两种办法

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

其他写法

var i = function(){ return 10; }();true && function(){ /* code */ }();0, function(){ /* code */ }();!function(){ /* code */ }();~function(){ /* code */ }();-function(){ /* code */ }();+function(){ /* code */ }();new function(){ /* code */ };new function(){ /* code */ }(); 

作用域

对于IIFE来说，通过作用域链来查找变量与普通函数有一些不同的地方。

with
with语句中的IIFE会先在with语句中查找，然后再向上查找。在下列代码中，标准浏览器下f()函数和IIFE都返回‘abc’，但IE10-浏览器中的f()函数返回‘abc’。

var foo = "abc";with({    foo:"bar"}){    function f(){        console.log(foo);    };    (function(){        console.log(foo);    })();    f();}

try-catch
在下列代码中，标准浏览器下f()函数和IIFE都返回‘error’，但IE10-浏览器中的f()函数返回‘10’。

try{    var e = 10;    throw new Error();}catch(e){    function f(){        console.log(e);    }    (function (){        console.log(e);    })();    f();}

具名函数表达式
在下列代码中，标准浏览器下a()函数返回1，而IIFE返回a函数代码；但IE8-浏览器中，二者都返回1。

function a(){    a = 1;    console.log(a);};a();(function a(){    a = 1;    console.log(a);})();

用途

IIFE一般用于构造私有变量，避免全局空间污染。

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

全局变量
一般情况下，我们会使用全局变量来保存该数字状态。

var a = 0;function add(){    return ++a;}console.log(add()); // 1console.log(add()); // 2

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

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

function add(){    return ++add.count;}add.count = 0;console.log(add()); // 1console.log(add()); // 2

IIFE
其实这样做，还是有问题，有些代码可能会无意中将add.count重置。

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

var add = (function(){    var counter = 0;    return function(){        return ++counter;     }})();console.log(add()); // 1console.log(add()); // 2

注意事项

IIFE称为立即执行函数，这个立即执行函数有多立即呢？

立即执行函数再快也得按照代码执行顺序，逐行执行，如下代码返回1：

var a = 1;(function(){    console.log(a); // 1})();

类似地，函数也是这种情况：

function a(){    return 1;}(function(){    console.log(a()); // 1})();

但，如果是函数表达式就不一样了，执行如下代码会报错，提示此时的a是undefined。

var a = function(){    return 1;}(function(){    console.log(a()); // 报错})();

函数有一个声明提升的过程，函数表达式其实分为先声明后赋值这两步。而，如果后面存在着立即执行函数IIFE，这个IIFE会快到函数表达式a执行完第一步骤函数声明之后IIFE就会立即执行，这此时a未被赋值，是undefined，所以执行a()时会报错。