IIFE(Immediately Invoked Function Expression)代表立即执行函数表达式。
下面看一段代码
var a=2;
(function foo(){
var a=3;
console.log(a); //3
})();
console.log(2); //2
由于函数被包含在一对()括号内部,成为了一个表达式,通过在末尾加上另外一个()可以立即执行这个函数。格式:(function foo(){…})().第一个()将函数变成一个表达式,第二个()执行这个函数。
这种模式就是IIFE立即执行函数表达式。
IIFE最常见的用法就是使用一个匿名函数表达式。如:
var a=4;
(function IIFE(){
var a=5;
console.log(a);//5
})();
console.log(a);//4
传统的IIFE是第一种形式(function foo(){…})(),很多人更喜欢第二种形式:(funtion(){…}())。第一种函数表达式被包含在()中,然后在后面用一个()来调用。第二种形式中用来调用的()被一斤了用来包装的()中。
IIFE的另一种普遍的进阶用法是把它们当做函数调用并传递参数进去。
如:
var a=6;
(function IIFE(global){
var a=7;
console.log(a);//7
console.log(global.a);//6
})(window);
console.log(a);//6
在这里我们将window对象的引用传递进去,将参数命名为global,因此在代码风格上对全局对象的引用变得比引用一个没有“全局”字样的变量更加清晰。
IIFE还有一种变化的用途是倒置代码的运行顺序,将需要运行的函数放在第二位,在IIFE执行后当做参数传递进去。
var a=8;
(function IIFE(def){
def(window);
})(function def(global){
var a=9;
console.log(a); //9
console.log(global.a);//8
})
函数表达式def定义在片段的第二部分,然后当做参数(这个参数也叫作def)被传递进IIFE函数定义的第一部分中。最后,参数def(也就是传递进去的函数)被调用,并将window传入当做global参数的值。
通过学习,IIFE 的作用可以简单概括为:第一,隐藏实现;第二,不污染外部(全局)变名空间;第三,用来编码js模块。
以上为个人对《你不知道的JavaScript》中对IIFE讲解的笔记以及个人理解。
知识来源:《你不知道的JavaScript》