实际开发中声明变量我们可以使用 var，let 和 const，不正确的使用它们会带来很多不必要的麻烦，今天就让我们来梳理一下这三者的区别吧。

var 关键字

var 声明的变量可以保存任何类型的值，在没有变量赋值的情况下，会保存一个特殊值 undefined。

var 声明作用域

使用 var 定义的变量会成为包含它的函数的局部变量。如使用 var 在一个函数内部定义一个变量，就意味着该变量将在函数退出时被销毁：

function Student() {
  var name = "山呱呱";
}
Student();
console.log(name); // ReferenceError: name is not defined

值得注意的是，如果在函数内定义变量时省略 var 操作符，那么这个变量就会成为全局变量：

function Student() {
  name = "山呱呱";
}
Student();
console.log(name); // 山呱呱

var 变量提升

不管是在全局作用域还是局部作用域中，使用 var 声明的变量都会被提升到顶部。

function Student(status) {
  if (status) {
    var name = "山呱呱";
  } else {
    console.log(name); // undefined
  }
  console.log(name); // undefined
}
Student(false);

上面代码中，if 代码块 var 声明的变量就被提升到了函数的顶端。 if 代码块都还没有执行，name 变量怎么就提升到函数顶端了呢？
这是因为 JavaScript 引擎在代码预编译时，会自动将所有代码中 var 声明的变量提升到当前作用域顶部。也就是：

function Student(status) {
  var name; // 变量的声明
  if (status) {
    name = "山呱呱"; // 变量赋值
  } else {
    console.log(name); // undefined
  }
  console.log(name); // undefined
}
Student(false);

此外 var 在全局作用域声明的变量会挂在到 window 对象上，它会创建一个新的全局变量作为全局变量的属性，有可能会覆盖 window 对象上的某个属性。

var pageYOffset = 8888; // 会覆盖window对象上的pageYOffset属性值

在实际开发中，尽量不使用 var 声明变量。

let 声明

let 和 var 的作用差不多，但有非常重要的区别：let 是块作用域，而 var 是函数作用域，块作用域是函数作用域的子集，所以适用于 var 的作用域限制同样适用于 let。
块级声明有两个特点：

只在当前函数下声明的变量有效
在代码块和 {} 括号之内有效

let 声明的变量只在当前作用域中有效

function Student(status) {
  if (status) {
    let name = "山呱呱";
  } else {
    console.log(name); // 报错
  }
  console.log(name); // 报错
}
Student(false);

let 声明的变量不存在变量提升

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "山呱呱";

console.log(name); // undefined
var name = "山呱呱";

注意，var 和 let 声明的并不是不同类型的变量，它们只是指出变量在相关作用域如何存在，重复定义将会报错。

var name = "山呱呱";
let name = "山呱呱"; // SyntaxError: Identifier 'name' has already been declared

let name = "山呱呱"; // SyntaxError: Identifier 'name' has already been declared
var name = "山呱呱";

// 不同作用域的情况
var name = "小明";
if (true) {
  let name = "山呱呱";
}

可以看出，只有在相同作用域中重复声明变量才会报错。

for 循环中的 let

在 let 出现之前，for 循环定义的迭代变量会渗透到循环体外部：

for (var i = 0; i < 5; i++) {
  // 循环逻辑
}
console.log(i); // 5

当我们使用 let 之后，这个头痛的问题便迎刃而解，因为迭代变量的作用仅限于 for 循环的内部：

for (let i = 0; i < 5; i++) {
  // 循环逻辑
}
console.log(i); // ReferenceError: i is not defined

一个常见的问题：

for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i); // 期望输出0,1,2,3,4,实际输出5,5,5,5,5
  });
}

这是因为在退出循环时，迭代变量保存的是导致循环退出的值：5，在之后执行超时逻辑时，所有的 i 都是同一个变量，因而输出的是用一个变量，因而输出的都是同一个最终值。
而在使用 let 声明迭代变量时，JavaScript 引擎在后台会为每个迭代循环声明一个新的迭代变量。每个 setTimeout 引用的都是不同的变量实例。
改为 let 就解决了：

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i); // 0,1,2,3,4
  });
}

const 声明

const 声明是常量，常量被定义后就不能被修改。注意，常量在定义的时候就必须初始化，否则就会报错。

const name = "山呱呱";
const weight; // 报错 SyntaxError: Missing initializer in const declaration

const 也是块级作用域，const 声明的常量只会在当前代码块内有效，也不能在当前作用域中重复定义相同的变量，同时也不存在变量提升。

const 声明的限制只适用于它指向的变量的引用。也就是说，如果 const 变量引用的是一个对象，那么修改这个对象内部的属性并不违反 const 的限制。

const Student = {
  name: "山呱呱",
  age: 23,
};
Student.age = 18; // 没问题
Student = {}; // TypeError: Assignment to constant variable.

暂时性死区

JavaScript 所谓的暂时死区（temporal dead zone）简称为 TDZ 中，虽然 JavaScript 没有明确标准 TDZ，但常用它来描述 let 和 const 定义的变量不会提升。

console.log(typeof name); // ReferenceError: Cannot access 'name' before initialization
let name = "山呱呱";

所谓的 TDZ，JavaScript 引擎在扫描代码时发现变量声明时，如果遇到 var 就会将它们提升到当前作用域的顶端，如果遇到 let 或 const 就会将声明放到 TDZ 中。在 let 声明之前的执行瞬间被称为“暂时性死区”，在此阶段引用任何后面才声明的变量都会抛出 ReferenceError。

console.log(typeof name); // undefined
if (true) {
  let name = "山呱呱";
}

let 和 const 声明的变量会被放到 TDZ 中，注意只会对当前作用域有效，所以执行 typeof name 不会抛出错误。

JavaScript中var,let,const的区别