文章列表

var? let?? const???

Champ2026.05.19 19:30访问量0 次阅读
var? let?? const???
var,let,const三者的区别到底是什么?
特性varletconst
作用域函数作用域块级作用域块级作用域
变量提升会提升,初始化为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了?

  1. 块级作用域更符合直觉,减少变量泄露
  2. 暂时性死区帮助发现引用错误
  3. 禁止重复声明避免命名冲突
  4. 更严格的规则让代码更健壮
  5. const的不可变性提高代码可预测性
历史留言 (0)
ICP备案号浙ICP备2026065730号-1公安备案号浙公网安备33019202003213号