块级作用域和var，let，const的区别

一.块级作用域

块级作用域：在代码块内定义的变量在代码块外不能访问，代码块对变量有一个限制作用区域

二.使用var定义变量的缺陷

• 2.1 没有块级作用域( 如 if 和 for的问题)

// 问题一
if(true){
   var name = "lxh";
   function fn() {
      console.log(name);
   }
}
console.log(name);      // lxh,可以访问内部变量name
fn();  // lxh

// 问题二: 用来计数的循环变量泄露为全局变量
var s = 'hello';
for (var i = 0; i < s.length; i++) {
   console.log(s[i]);    // h e l l o 
}
console.log(i); // 5

var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click",function () {
     console.log("第" + i + "个按钮被点击啦"); 
  })
}

点击每个按钮都输出第5个按钮被点击

可以使用闭包来解决var没有块级作用域的问题

var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
  (function(i) {
     btns[i].addEventListener("click", function () {
        console.log("第" + i + "个按钮被点击啦");
     })
  })(i);
}

此时就点击哪个按钮就会显示对应按钮索引

• 2.2 为什么闭包可以解决没有块级作用域的问题？
• 因为函数有块级作用域！

三. let , var, const的区别

• 3.1var 可以重复声明，后面的会覆盖前面的，let不允许重复声明，会报错

var name = "lxh";
var name = "bzx";
console.log(name);   // bzx
let age = 21;
let age = 18;
console.log(age); //Uncaught SyntaxError: Identifier 'age' has already been declared

• 3.2 var存在变量提升，let没有（变量提升下次写）
• 3.3 var声明的变量会绑定到window对象上，let不会

 var a = 666;
   var sum = 66;
   console.log(window.a);         //666
   console.log(window.sum);    //66
   
   let b = 20;
   const num = 30;
   console.log(window.b);         //undefined
   console.log(window.num);    //undefined

• 3.4 let声明的变量支持块级作用域，var不支持
• 3.5 const用于声明常量，const声明的值不可改变，且必须初始化