深入理解javascript闭包系利第三篇——IIFE

前面的话

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

实现

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

//函数声明语句写法
function test(){};
test();

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

但有时需要在定义函数之后，立即调用该函数。这种函数就叫做立即执行函数，全称为立即调用的函数表达式IIFE（Imdiately Invoked Function Expression）
【注意点】：javascript引擎规定，如果function关键字出现在行首，一律解释成函数声明语句。

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

//SyntaxError: Unexpected token (
function(){}();

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

//SyntaxError: Unexpected token )
function foo(){}();

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

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

function foo(){}(1);

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

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

因此最用的解决办法是：

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

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

【with】：with语句中的IIFE会先在with语句中查找，然后再向上查找。在下列代码中，标准浏览器下f()函数和IIFE都返回’bar’，但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)。

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

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

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

复制代码
function add(){
    return ++add.count;
}
add.count = 0; //函数本身就是一个对象，所以可以通过函数名扩展对象的属性。
console.log(add());//1
console.log(add());//2

【3】：IIFE
其实这么做，还是存在问题的，有些代码可能会无意中将add.count重置。
使用IIFE把计数器变量保存为私有变量更安全，同时也可以减少对全局空间的污染（其实这里还是使用到了闭包）

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

注意事项

执行如下代码会报错，提示此时的a是undefined。

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

这是因为没有加分号，浏览器将上面代码解释成如下所示。

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

如果加上分号，就不会出错了

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