理解 立即执行函数

概念：

声明一个函数，并马上调用这个匿名函数就叫做立即执行函数。

声明方式：

//第一种：用括号把整个函数定义和调用包裹起来
(function(){
 //function body
}())

//第二种：用括号把函数定义包裹起来，后面再加括号
(function (){
 //function body
})()

作用：

创建一个独立的作用域，这个作用域里面的变量，外面访问不到，即避免「变量污染」。

分析下面代码：

<ul id="list">
　　<li>1</li>
　　<li>2</li>
　　<li>3</li>
</ul>
<script>
var list = document.getElementById("list");　　
var li = list.children;　　
for (var i = 0; i < li.length; i++) {　　　　
　　li[i].onclick = function() {　　　　
　　　　console.log(i); // 结果总是3.而不是0，1，2                    　　
　　}
}
</script>

解析：因为i是贯穿整个作用域的，而不是给每一个li分配一个i,点击事件使异步，用户一定是在for运行完了以后，才点击，此时i已经变成3了。

那么该如何解决这个问题：

// 使用立即执行函数

var list = document.getElementById("list");

var li = list.children;

for (var i = 0; i < li.length; i++) {　　

　　(function(j) {　　　　

　　　　li[j].onclick = function() {　　　　　　

　　　　　　console.log(j);　　　　

　　　　}　　

　　})(i)

}

如果立即执行函数中需要全局变量，全局变量会被作为一个参数传递给立即执行函数（上例中的i就是一个全局变量，i代表的是实参，j是i在立即执行函数中的形参）。

// 或者使用ES6的块级作用域

var list = document.getElementById("list");

var li = list.children;

for (let i = 0; i < li.length; i++) {　　

　　li[i].onclick = function() {　　　　

　　　　console.log(i);　　

　　}

}

应用场景：

• 改变变量作用域；

　　上述代码就是改变变量作用域，一个很好的例子。

• 封装临时变量；

　　加载只需要执行一次的代码，比如显示时间。这些代码也需要一些临时的变量，但是初始化过程结束之后，就再也不会被用到。这些变量不适合作为全局变量，产生初始化代码遗留。可以用立即执行函数将所有的代码包裹在它的局部作用域中，这些变量都不会在全局变量中存在，以后也不会其他地方使用，有效的避免了污染全局变量。