一、前言
我们知道在原生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);
}
};