立即执行函数
一、前言
我们知道在原生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);
}
}
