我们在很多场景中使用了立即执行函数，或者看到别人写了立即执行函数，但是对它的作用和用法 还有一些疑惑，写这篇文章就是来解决这个问题的。
立即执行函数
IIFE(Immediately-Invoked Function Expression)
立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行。
函数相关的概念
函数声明、函数表达式、匿名函数
函数声明
function func() { console.log(‘this is a function’) };
首先使用 function 关键字声明一个函数，再执行一个函数名，叫函数声明。
函数表达式
let func = function() { console.log(‘this is a function’) }；
使用 function 关键字声明一个函数，但未给函数命名，将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。
匿名函数：
function() { console.log(‘this is a function’) } ；
使用 function 关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。
函数声明和函数表达式区别
1、JavaScript 引擎在解析 JavaScript 代码时会“函数声明提升”当前执行环境(作用域)上的函数声明，而函数表达式必须等到 JavaScript 引擎执行到它所在行时，才会从上而下一行一行地解析函数表达式。
2、函数表达式后面可以加括号立即调用该函数，函数声明不可以，只能以 func() 形式调用。
我们看一下下面的例子就会明白
函数声明
func(); //正常输出this is a function
function func() {
console.log('this is a function')
};
函数表达式
func();// Uncaught SyntaxError: Invalid or unexpected token
////函数表达式报错，func未保存对函数的引用，函数调用需放在函数表达式后面
var func = function() {
console.log('this is a function')
}；
立即执行函数的两种写法
//第一种写法
(function(){
console.log('this is a function')
})();
//第二种写法
(function(){
console.log('this is a function')
}());
为什么立即执行函数要加(),不加可不可以呢，我们来试一下
function(){
console.log('this is a function')
}()
//Uncaught SyntaxError: Function statements require a function name
//报错，意思是函数声明需要一个函数名
上面这个例子其实是一个匿名函数，
虽然匿名函数属于函数表达式，但未进行赋值，所以javascript解析时将开头的function当做函数声明，故报错提示需要函数名;
立即执行函数里面的函数必须是函数表达式
立即执行函数是否可以有返回值
let func = function() {
return 1;
}();
console.log(func) //1
我们在浏览器的控制台可以看到,立即执行函数是可以有返回值的。
为什么给一个匿名函数赋值就可以正常了呢？
我们可以理解为在匿名函数前加了 “=” 有了运算符后，将函数声明转化为函数表达式。
我们拿！，+，-，（）…等运算符来进行测试：
!function(){
console.log('this is a function1')
}()
// this is a function1
+function(){
console.log('this is a function2')
}()
// this is a function2
-function(){
console.log('this is a function3')
}()
// this is a function3
;(function(){
console.log('this is a function4')
})()
// this is a function4
由此可见，加运算符确实可将函数声明转化为函数表达式
需要注意的地方
注意在代码console.log(‘this is a function4’)这个函数我在最前面加上了一个“;”(分号)，
为什么要加这分号，不加行不行呢，大家可以验证一下。
不加会报错,会报下面的错
(Uncaught TypeError: (intermediate value)(…) is not a function)
上面的代码有一些多，我们截取一部分来讲
-function(){
console.log('this is a function3')
}()
(function(){
console.log('this is a function4')
})()
这段代码一样会报错，因为ECMAScript规范具有分号自动插入规则，但是在上面代码中，在第一个立即执行函数末尾却不会插入，因为第二个立即执行函数，会被解释为如下形式：
-function(){
console.log('this is a function3')
}()(function(){console.log('this is a function4')})()
因此我们在最后一个立即执行函数前面加一个分号;(是为了防止前一个立即函数尾部没有的分号;)
其实还有其它的方式也可以实现，使用void 运算符，个人感觉这种方式更优雅
-function(){
console.log('this is a function3')
}()
void (function(){
console.log('this is a function4')
})()
立即执行函数的作用
**创造一个作用域空间，防止变量冲突或覆盖 **
我们下面来看一个精典的面试题
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
输出一个数据，从0-4,按常理会输出//0 1 2 3 4,结果输出了5个5。
这样的需求我们可以用立即执行函数来做，
我们可以把代码稍微改一下可以了，
for (var i = 0; i < 5; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, 1000);
})(i);
}
首先 JS中调用函数传递参数都是值传递 ，所以当立即执行函数执行时，首先会把参数 i 的值复制一份，然后再创建函数作用域来执行函数，循环5次就会创建5个作用域，所以1秒后几乎会同时输出 0 1 2 3 4 。
其实还有其它的方式可以来实现，把原代码中的var改成let(ES6的块级作用域)也是可以正常输出 0 1 2 3 4
for (let i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
立即执行函数的应用场景
1、代码在页面加载完成之后，不得不执行一些设置工作，比如时间处理器，创建对象等等。
2、所有的这些动作只需要执行一次，比如只需要显示一个事件。
3、将代码包裹在它的局部作用域中，不会让任何变量泄漏成全局变量。