var，let， const的区别

• var声明变量的历史包袱
• let 和 const 如何解决的
• 什么是暂时性死区（TDZ）
• 答案

1. var -ES6 前的唯一选择

特点

• 作用域： 函数作用域 或 全局作用域
• 变量提升： 声明提升， 初始化 undefined
• 重复声明： 允许
• 可变性： 可重新赋值

痛点

1. 变量提升
   - 在声明前访问不报错，值为undefined， 违反编码直觉， 易导致 bug；
2. 缺乏块级作用域
   - if， for 语句中的变量 会泄露到外部
   示例

function varExample(){
  console.log(a);  // a 为 undefined
  var a = 10;  // 声明提升了
  console.log(a); // a 为 10
  if(true){
    var a = 20; // 覆盖了 外侧的a
    console.log(a);// a 为 20
  }
  console.log(a); // a 被if语句 修改 为 20
}

2. ES6 解决方法--let & const

暂时性死区
ES6 规定，如果代码区块中存在 let 和 const 命令声明的变量，这个区块对这些变量从一开始就形成了封闭作用域，直到声明语句完成，这些变量才能被访问（获取或设置），否则会报错ReferenceError。这在语法上称为“暂时性死区”（英temporal dead zone，简 TDZ），即代码块开始到变量声明语句完成之间的区域。({... let/const ...})

2.1 let 新一代变量声明

特点

• 作用域： 块级作用域（{...}）
• 暂时性死区(TDZ)：声明前无法访问
• 重复声明： 块级作用域内不允许
• 可变性：可重复赋值
  示例

function letExample(){
  let a = 10; 
  console.log(a); // a 为 10
  if(true){
    let a = 20; // 块级作用域不会覆盖外侧的a
    console.log(a);// a 为 20
  }
  console.log(a); // 不受if影响 a  为 10
}

2.2 const 声明即永恒

特点

• 作用域： 块级作用域（{...}）
• 暂时性死区(TDZ)：声明前无法访问
• 重复声明： 块级作用域内不允许
• 可变性：不可重复赋值
• 核心：保证变量的引用的不变性

const 与引用类型的数据

可以改变引用数据的内部的值， 引用地址仍不变

function constExample(){
  const a = {m: 10}; 
  console.log(a.m); //10
  if(true){
    a.m = 20; 
    console.log(a.m);// 20
  }
  a = {m:30}; // TypeError!
}

3. 补充

全局对象

• var 在全局作用域 定义 会成为 window 的属性
• let，const 在全局作用域定义 不会成为 window 的属性

  vat globalVar = 10; 
  let globalLet = 20;
  const  globalConst  = 30;
  console.log(window.globalVar); //10
  console.log(window.globalLet); // undefined
  console.log(window.globalConst); //undefined

4. 请谈谈 var，let， const 的区别

1. 作用域

• var 函数作用域/全局作用域
• let/const 块级作用域
  -解决了var 在if/for中的变量泄露问题

2. 提升和TDZ

• var: 声明提升
  -声明之前可访问，值为undefined
• let/const： 存在暂时性死区（TDZ）
  -声明前访问，直接抛出 ReferenceError

3. 重复声明

• var: 可重复声明，可重复赋值
• let/const： 块级作用域内不可重复声明，其中const不可重复赋值，当数据为引用数据，数据的引用不变但可改变内部的值