实际开发中声明变量我们可以使用 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 不会抛出错误。
网友评论