笔记|ES6-块级作用域 es6|javascript

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声明变量可以实现块级作用域。
【笔记|ES6-块级作用域】例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]给覆盖掉。

笔记|ES6-块级作用域