在es5中只有全局作用域和函数作用域,导致一些场景不合理
1. 内层变量会覆盖外层变量
var tmp = new Date();
function f(){
console.log(tmp)
if(false){
var tmp = 'hello'
}
}
f()//undefined
原因: 变量提升,导致内层变量tmp覆盖了外层tmp变量
2. 用来计数的循环变量泄漏为全局变量
var s = 'hello'
for(var i=0;i<s.length;i++){
console.log(s[i])
}
console.log(i)//5
原因: 变量i只用来控制循环,但是循环结束后,i变量并没有消失,而是泄漏为全局变量。
es6中的块级作用域,解决上述问题
3. 使得立即执行匿名函数(IIFE)不再必要
立即执行匿名函数的作用:创建一个独立作用域,该域中的变量,外面访问不到
//IIFE的写法
(function(){
var tmp;
...
}()
);
//块级作用域写法
{
let tmp = ...;
}
4. 这里了解一下立即执行函数
概念: 声明一个函数,然后马上调用该函数
function(){alert('此为匿名函数')}()
经典案例
var ul = document.getElementsByTagName('ul')[0];
var liList = ul.getElementsByTagName('li');
for(var i=0; i<6; i++){
//第一部分
// !function(ii){
// liList[ii].onclick = function(){
// alert(ii); // 为什么 alert 出来的总是 6,而不是 1、2、3、4、5
// }
// }(i)
//第二部分
// liList[i].onclick = function(){
// alert(i)
// }
上述代码中的第一部分,运用了立即执行匿名函数,每次点击弹出i值
第二部分,每次点击都会弹出6
这里,即执行匿名函数的作用:给每个 li 创造一个独立作用域
这里看到一篇文章中,有个回复醍醐灌顶
IFEE 相当于创建一个匿名函数并执行,当函数被理解成表达式时就会执行,如+(function(){})(),作用时避免全局污染
这里说:当函数被理解为表达式时就会执行,我们上面的代码,就是被当成表达式执行的。