JS块级作用域（var、let、const）

很多语言中都有块级作用域，但JS没有，它使用var声明变量，以function来划分作用域，大括号“{}” 却限定不了var的作用域。用var声明的变量具有变量提升（declaration hoisting）的效果。ES6里增加了一个let，可以在{}， if， for里声明。用法同var，但作用域限定在块级，let声明的变量不存在变量提升。

一、块级作用域if

function getVal(boo) {
  if (boo) {
    var val = 'blue'
    return val
  } else {
    console.log(val) // 不报错，可以访问到val
    return null
  }
  console.log(val)// 不报错，也可以访问到val
}

变量val是在if里面声明的，但是在else和if外都可以访问

把var换成let，如下示例：

function getVal(boo) {
  if (boo) {
    let val = 'blue'
    return val
  } else {
    console.log(val) // 报错，访问不到val， 报错：val is not defined
    return null
  }
  console.log(val) // 报错，访问不到val， 报错：val is not defined
}

二、块级作用域for

function func() {
  for (var i = 0; i < 3; i++) {
     console.log(i) // 0、1、2
  }
  console.log(i) // 输出 i 为 3 
}

把var换成let，如下示例：

function func() {
  for (let i = 0; i < 3; i++) {
    console.log(i) // 0、1、2
  }
  console.log(i) // 报错： i is not defined
}

三、变量提升（先使用后声明）

function func() {
    // val先使用后声明，不报错
    alert(val) // undefined
    var val;
}

变量val先使用后声明，输出undefined，不报错。
把var换成let，就报错了

function func() {
    // val先使用后声明，报语法错 Uncaught ReferenceError: Cannot access 'val' before initialization (引用错误，不能访问val在初始化之前)
    alert(val)
    let val;
}
func()

三、变量提升（先判断后声明）

function func() {
    if (typeof val == 'undefined') {
        // ...
    }
    var val = ''
}

使用typeof判断时也可以再var语句的前面
但把var换成let，if处报语法错 Uncaught ReferenceError: Cannot access ‘val’ before initialization (引用错误，不能访问val在初始化之前)

function func() {
    if (typeof val == 'undefined') {
        // ...
    }
    let val = '';
}

ES6规定，如果代码块中存在let，这个区块从一开始就形成了封闭作用域。凡是在声明之前就使用，就会报错。即在代码块内，在let声明之前使用变量都是不可用的。语法上有个术语叫“暂时性死区”（temporal dead zone），简称TDZ。当然TDZ并没有出现在ES规范里，它只是用来形象的描述。

let的注意事项

不能重复声明

// var和let重复声明
var name = 'Jack';
let  name = 'John';
 // 报错： Uncaught SyntaxError: Identifier 'name' has already been declared（语法错误，name在声明之前已经是唯一标识）
 
// 两个let重复声明
let age = 24;
let age = 30;
// 报错： Uncaught SyntaxError: Identifier 'age' has already been declared（语法错误，age在声明之前已经是唯一标识）

有了let后，匿名函数自执行就可以去掉了

// 匿名函数写法
(function () {
  var jQuery = function() {};
  // ...
  window.$ = jQuery
})();
 
// 块级作用域写法
{
  let jQuery = function() {};
  // ...
  window.$ = jQuery;
}

总结：var、let、const的区别
1、var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2、let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3、const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
4、同一个变量只能使用一种方式声明，不然会报错

JS块级作用域（var、let、const）

悦读