一、前言
我们知道在原生JavaScript中只有全局作用域和函数作用域，公有变量很容易造成污染。
为了解决这个问题，必须要对作用域进行隔离，这个时候就想到了立即执行函数。
二、立即执行函数（IIFE）
立即执行函数会创建一个独立的作用域，这个作用域里的变量外部无法访问，其变量用完就释放，能够减小内存的压力。
1. 特点
- 只有函数表达式可以，函数声明不可以
- 函数表达式中的名字不会放在GO或者AO中
2. 常见形式
var f1 = (function(name) { console.log(name); })('Mike'); // 'Mike' var f2 = (function(name) { console.log(name); }('Nancy')); // 'Nancy' var f3 = function(name) { console.log(name); }('Lucy'); // 'Lucy'
注意：这里推荐使用第一种写法。
3. 其他形式
!function(){console.log(1);}(); // 1 +function(){console.log(2);}(); // 2 -function(){console.log(3);}(); // 3 ~function(){console.log(4);}(); // 4 void function(){console.log(5);}(); // 5 new function(){console.log(6);}(); // 6
三、案例
// 点击li标签打印其下标 window.onload = function() { for(var i = 1; i <= 6; i++) { var body = document.getElementsByTagName('body')[0]; var li = document.createElement('li'); li.innerHTML = i; body.append(li); } var liArr = document.getElementsByTagName('li'); console.log(liArr); for(var i = 0; i < 6; i++) { liArr[i].onclick = function() { console.log(i); // 每一个节点元素都打印 6 } } } // 使用立即执行函数创建独立的作用域 // 解决公有变量污染问题 window.onload = function() { for(var i = 1; i <= 6; i++) { var body = document.getElementsByTagName('body')[0]; var li = document.createElement('li'); li.innerHTML = i; body.append(li); } var liArr = document.getElementsByTagName('li'); console.log(liArr); for(var i = 0; i < liArr.length; i++) { (function(n) { liArr[n].onclick = function() { console.log(n); // 0 1 2 3 4 5 }; })(i); } }
四、本节思维导图
