1. 为什么需要块级作用域
ES6之前只有全局作用域和局部作用域(函数作用域),没有块级作用域,会带来很多不合理的情况。
第一:内层变量可能会覆盖外层变量
// 1.内部变量可能会覆盖外部变量
var num = 100
function fn() {
console.log(num);
if(true){
var num = 200;
}
}
fn() //undefined
这段代码的原意是: if语句外部使用外层的num, if语句的内部使用内层的num,但是由于函数fn的定义的num存在变量提升,覆盖了外层的num变量,所以输出结果为undefined。
第二: 用来计数的循环变量泄露为全局变量
// 2.用来计数的循环变量泄露为全局变量
var arr = [1,2,3,4,5];
for(var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log(i); // 5
变量 i 只用来控制循环,但是循环结束后,他并没有消失,泄露成为了全局变量。
2. 什么是块级作用域?
块级作用域由{ }包裹,例如if语句和for语句,通过let声明变量可以实现块级作用域。
例1:
function fn() {
let num = 10;
if(true) {
let num = 20;
}
console.log(num);
}
fn() // 10
if 语句的外层和内层都声明了num变量,输出的结果为10,说明if语句的块级作用域不会影响到外层作用域,如果是都用var声明则输出的结果为 20。
例2:
var arr = [1,2,3];
for(let i = 0; i < arr.length; i++) {
arr[i] = function() {
console.log(i);
}
}
arr[0](); //0
arr[1](); //1
arr[2](); //2
let在代码块中都有自己的作用域,在for循环中 i 的每一个值都会单独存在一个独立的作用域,arr[i]不会被之前的arr[i]给覆盖掉。