#40
var? let?? const???
Champ2026.05.19 19:30created at 2026.05.19 19:30updated at 2026.05.19 19:30
0 次阅读

var,let,const三者的区别到底是什么?
| 特性 | var | let | const |
|---|---|---|---|
| 作用域 | 函数作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 会提升,初始化为undefined | 会提升,但存在暂时性死区 | 会提升,但存在暂时性死区 |
| 重复声明 | ✅ 允许 | ❌ 不允许 | ❌ 不允许 |
| 重新赋值 | ✅ 允许 | ✅ 允许 | ❌ 不允许(基本类型) |
| 初始值要求 | ❌ 可不初始化 | ❌ 可不初始化 | ✅ 必须初始化 |
| 全局作用域行为 | 成为全局对象属性 | 不成为全局对象属性 | 不成为全局对象属性 |
1. 作用域的不同
var - 函数作用域
function varExample() {
if (true) {
var x = 10; // 函数作用域
}
console.log(x); // 10 - 在if块外也能访问
}
varExample();
for (var i = 0; i < 3; i++) {
// i在循环中
}
console.log(i); // 3 - 在循环外也能访问
let/const - 块级作用域
function letExample() {
if (true) {
let x = 10; // 块级作用域
const y = 20; // 块级作用域
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined
}
for (let i = 0; i < 3; i++) {
// i在循环中
}
console.log(i); // ReferenceError: i is not defined
2. 变量提升的差异
函数提升
// 函数声明会被完全提升
console.log(add(2, 3)); // 5 - 可以在声明前调用
function add(a, b) {
return a + b;
}
console.log(typeof multiply); //"undefined"
//console.log(multiply(2,3)); //multiply is not defined
//使用了const,无法提升
const multiply = function(a, b) {
return a * b;
};
console.log(multiply(2, 3)); // 6 - 只能在定义后调用
// 使用var,提升为undefined
console.log(typeof myFunc); // "undefined"
myFunc();//报错:myFunc is not a function;
var myFunc = function() {
console.log("函数表达式");
};
console.log(typeof myFunc); // "function"
myFunc(); // "函数表达式"
// const声明的函数表达式
console.log(typeof myFunc); // "undefined"
// myFunc(); // 报错:myFunc is not defined(变量根本没有被创建)
const myFunc = function() {//let也一样
console.log("函数表达式");
};
console.log(typeof myFunc); // "function"
myFunc(); // "函数表达式"
变量提升
// var - 变量提升,初始化为undefined
console.log(a); // undefined (不会报错)
var a = 5;
// 等价于:
var a; // 声明提升到顶部
console.log(a); // undefined
a = 5; // 赋值留在原地
// let/const - 暂时性死区(Temporal Dead Zone)
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 5;
console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 10;
3. 重复声明的问题
// var允许重复声明(可能导致bug)
var x = 5;
var x = 10; // ✅ 允许
console.log(x); // 10
// let/const不允许重复声明
let y = 5;
let y = 10; // ❌ SyntaxError: Identifier 'y' has already been declared
const z = 5;
const z = 10; // ❌ SyntaxError: Identifier 'z' has already been declared
4. 全局作用域的行为
// var在全局作用域声明会成为全局对象的属性
var globalVar = 'I am var';
console.log(window.globalVar); // 'I am var' (在浏览器中)
console.log(globalThis.globalVar); // 'I am var'
// let/const在全局作用域声明不会成为全局对象的属性
let globalLet = 'I am let';
const globalConst = 'I am const';
console.log(window.globalLet); // undefined
console.log(window.globalConst); // undefined
为什么现在很少用var了?
- 块级作用域更符合直觉,减少变量泄露
- 暂时性死区帮助发现引用错误
- 禁止重复声明避免命名冲突
- 更严格的规则让代码更健壮
- const的不可变性提高代码可预测性