立即执行函数表达式
IIFE(Immediately Invoked Function Expression):立即执行函数表达式。
函数名对IIFE不是必须的,最常见的是使用一个匿名函数表达式。
var a=2;
(function foo(){
var a=3;
console.log(a);//3
})();
console.log(a);//2
由于函数被包含在一对()括号内部,因此成为了一个表达式,通过在末尾加上另外一个()可以立即执行这个函数。
(function foo(){..}( ), 第一个()将函数变成表达式,第二个()执行了这个函数。
var a=2;
(function IIFE(){
var a=3;
console.log(a);//3
})();
console.log(a);//2
相比于传统的IIFE形式,很多人跟喜欢另一个改进的形式:(function(){..}())。
这两种形式在功能上是一致的。
IIFE的另一个非常普遍的进阶用法是把它们当作函数调用并传递参数进去。
例如:
var a=2;
(function IIFE(global){
var a=3;
console.log(a);//3
console.log(global.a);//2
})(window);
console.log(a);//2
我们将window对象的引用传递进去,但将参数命名为global。
当然可以从外部作用域传递任何你需要的东西,并将变量名为任何你觉得合适的名字,这改进代码风格很有帮助。
这个模式的另外一个场景是解决undefined标识符的默认值被错误覆盖导致的异常(虽然不常见)。将一个参数命名为undefined,但是在对应的位置不传入任何值,这样可以保证在代码块中undefined标识符的值真的是undefined:如下
undefined=true;//给其他代码挖了一个大坑,不要这样
(function IIFE(undefined){
var a;
if(a===undefined){
console.log("Undefined id safe here !");
}
})();
IIFE还有一种变化的用途是倒置diamond的运行顺序,将需要运行的函数放在第二位,在IIFE执行之后当作参数传递进去。这种模式在UMD(Universal Module Definition)项目中被广泛使用。
var a=2;
(function IIFE(def){
def(window);
})(function def(global){
var a=3;
console.log(a);//3
console.log(global.a);//2
});
函数表达式def定义在片段的第二部分,然后当作参数(这个参数也叫def)被传递进IIFE函数定义的第一部分中。最后,参数def(也就是传递进去的函数)被调用,并将window传入当作global参数的值。