var
var 语句用来在 JavaScript 中声明一个变量，该变量遵守以下规则：
- 作用域范围是函数作用域或全局作用域的。
- 不受暂存死区（TDZ）的限制。
- 它会在
window上以相同的名称创建一个全局属性。 - 是可分配的。
- 是可声明的。
函数作用域和全局作用域
当出现在全局作用域内时，var 创建一个全局变量。另外它还会在 window 上创建一个具有相同名称的 全局属性：
var city = "Florence";
console.log(window.city); // "Florence"
当在函数内部声明时，变量的作用域为该函数：
var city = "Florence";
function bubble() {
var city = "Siena";
console.log(city);
}
bubble(); // "Siena"
console.log(city); // "Florence"
var 声明会被提升：
function bubble() {
city = "Siena";
console.log(city);
var city; // hoists
}
bubble(); // "Siena"
意外的全局变量
在没有任何声明的情况下所分配的变量（无论是 var，let 还是 const）在默认情况下会成为全局变量：
function bubble() {
city = "Siena";
console.log(window.city);
}
bubble(); // "Siena"
为了消除这种行为，需要使用严格模式：
"use strict";
function bubble() {
city = "Siena";
console.log(window.city);
}
bubble(); // ReferenceError: assignment to undeclared variable city
可重新分配和重新声明
任何用 var 声明的变量都可以在以后进行重新分配或重新声明。重新声明的例子：
function bubble() {
var city = "Florence";
var city = "Siena";
console.log(city);
}
bubble(); // "Siena"
重新分配的例子：
function bubble() {
var city = "Siena";
city = "Florence";
console.log(city);
}
bubble(); // "Florence"
let
let 语句在 JavaScript 中声明一个变量，该变量遵守以下规则：
- 属于块作用域。
- 受到暂存死区的约束。
- 它不会在
window上创建任何全局属性。 - 是可分配的。
- 不可重新声明。
块作用域
用 let 声明的变量不会在 window 上创建任何全局属性：
let city = "Florence";
console.log(window.city); // undefined
当在函数内部声明时，变量的作用域为该函数：
let city = "Florence";
function bubble() {
let city = "Siena";
console.log(city);
}
bubble(); // "Siena"
console.log(city); // "Florence"
当在块中声明时，变量的作用域为该块。以下是在块中使用的例子：
let city = "Florence";
{
let city = "Siena";
console.log(city); // "Siena";
}
console.log(city); // "Florence"
一个带有 if 块的例子：
let city = "Florence";
if (true) {
let city = "Siena";
console.log(city); // "Siena";
}
console.log(city); // "Florence"
相反，var 并不受到块的限制：
var city = "Florence";
{
var city = "Siena";
console.log(city); // "Siena";
}
console.log(window.city); // "Siena"
暂存死区
let 声明可能会被提升，但是会产生暂存死区：
function bubble() {
city = "Siena";
console.log(city); // TDZ
let city;
}
bubble();
// ReferenceError: can't access lexical declaration 'city' before initialization
暂存死区可防止在初始化之前访问 let 声明。另外一个例子：
function bubble() {
console.log(city); // TDZ
let city = "Siena";
}
bubble();
// ReferenceError: can't access lexical declaration 'city' before initialization
可以看到两个例子中产生的异常都是一样的：证明了“暂存死区”的出现。
可重新分配，不可重新声明
任何用 let 声明的变量都不能重新声明。重新声明引发异常的例子：
function bubble() {
let city = "Siena";
let city = "Florence";
console.log(city);
}
bubble(); // SyntaxError: redeclaration of let city
这是一个有效的重新分配的例子：
function bubble() {
let city = "Siena";
city = "Florence";
console.log(city);
}
bubble(); // "Florence"
const
const 语句用来在 JavaScript 中声明一个变量，该变量遵守以下规则：
- 是属于块作用域的。
- 受到“暂存死区”的约束。
- 它不会在
window上创建任何全局属性。 - 不可重新分配。
- 不可重新声明。
块作用域
用 const 声明的变量不会在 window 上创建任何全局属性：
const city = "Florence";
console.log(window.city); // undefined
当在函数内部声明时，变量的作用域为该函数：
const city = "Florence";
function bubble() {
const city = "Siena";
console.log(city);
}
bubble(); // "Siena"
console.log(city); // "Florence"
当在块中声明时，变量的作用域为该块。块语句 {} 的例子：
const city = "Florence";
{
const city = "Siena";
console.log(city); // "Siena";
}
console.log(city); // "Florence"
在 if 块中的例子：
const city = "Florence";
if (true) {
const city = "Siena";
console.log(city); // "Siena";
}
console.log(city); // "Florence"
暂存死区
const 声明可能会被提升，但是会进入暂存死区：
function bubble() {
console.log(city);
const city = "Siena";
}
bubble();
// ReferenceError: can't access lexical declaration 'city' before initialization
不可重新分配，不可重新声明
用 const 声明的任何变量都不能重新声明，也不能重新分配。 一个在重新声明时抛出异常的例子：
function bubble() {
const city = "Siena";
const city = "Florence";
console.log(city);
}
bubble(); // SyntaxError: redeclaration of const city
重新分配的例子示例：
function bubble() {
const city = "Siena";
city = "Florence";
console.log(city);
}
bubble(); // TypeError: invalid assignment to const 'city'
总结
| 块作用域 | 暂存死区 | 创建全局属性 | 可重新分配 | 可重新声明 | |
|---|---|---|---|---|---|
var | ❌ | ❌ | ✅ | ✅ | ✅ |
let | ✅ | ✅ | ❌ | ✅ | ❌ |
const | ✅ | ✅ | ❌ | ❌ | ❌ |