JavaScript没有块级作用域，准确来说，ES5没有块级作用域，其只有全局作用域和函数作用域，没有块级作用域，这样会带来很多问题，So，ES6引入了块级作用域。
块由左花括号开始，由右花括号结束 ,即 { } 中间的部分是一个块级作用域。 例如：for循环、if逻辑判断、while 循环等语句后面的{ } 都是一个块级作用域。
var let const 的区别：
- var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
- let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
- const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
ES5中会存在块内变量变成全局变量的现象，而采用ES6的let和const就不会出现下列情况
//块级作用域对var命令无效，a变量泄露到外层作用域
if (flag) {
var a = "Burc";
}
console.log(a); //Burc
下面看一个更详细的例子
<script type="text/javascript">
// 块作用域
{
var a = 1;
let b = 2;
const c = 3;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
}
console.log(a); // 1
console.log(b); // 报错
console.log(c); // 报错
// 函数作用域
(function A() {
var d = 5;
let e = 6;
const f = 7;
console.log(d); // 5
console.log(e); // 6
console.log(f); // 7
})();
// console.log(d); // 报错 咦，是不是和上面不太一样，访问不到，我们可以利用它来模拟块级作用域
// console.log(e); // 报错
// console.log(f); // 报错
</script>
ES5模仿块级作用域 ，ES5 环境中只有全局作用域和函数作用域，那么要想实现类似块级作用域的效果，我们通常可以通过封装函数或封装匿名自调用立即执行函数来实现
//函数作用域
function testFn() {
var a = "Burc";
}
console.log(a); //Error: a is not defined
//匿名自调用实现类似“块级作用域”的效果
(function () {
var b = "Burc";
})();
console.log(b); //Error: b is not defined
我们利用ES5模仿块级作用域可以解决一个经典问题，当然，用ES6的let会使该问题变得更容易解决，代码如下
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<script>
// 获取页面所有的input
var aBtn = document.getElementsByTagName("input");
// 循环绑定点击事件,当然毫无疑问这里点击之后会弹出3，
//因为我们知道js是单线程的，当基本逻辑语句执行完之后，才会执行点击事件
//而当你触发点击事件的时候，for循环都已经跑完了，所以i已经变成了3；
// for(var i = 0; i < aBtn.length; i++){
// aBtn[i].onclick = function(){
// console.log(i);
// }
// }
// 解决方法1:也是最简单的方法，就是将for循环的var变成let
//这样当点击每个按钮的时候，就会依次弹出0,1,2；
//let是ES6新增的一个变量声明方式，拥有块级作用域；
for(let i = 0; i < aBtn.length; i++){
aBtn[i].onclick = function(){
console.log(i);
}
}
//解决方法2：利用闭包(说是闭包，貌似也不完全是)，也就是函数作用域访问原则的特性
//函数内部可以访问外部的变量，外部却访问不了里边的；
// for(var i = 0; i < aBtn.length; i++){
// (function(i){
// aBtn[i].onclick = function(){
// console.log(i);
// }
// })(i);
// }
</script>
</body>
参考链接
