【JS】var与let的区别

-凌凌漆-2026-01-14 11:38

1. 作用域（Scope）

var：函数作用域（function-scoped）
let：块级作用域（block-scoped）

javascript 复制代码

// var 例子
function varExample() {
  if (true) {
    var x = 10; // 在整个函数内都可用
  }
  console.log(x); // 10 - 可以访问
}

// let 例子
function letExample() {
  if (true) {
    let y = 20; // 只在块内可用
  }
  console.log(y); // ReferenceError: y is not defined
}

2. 重复声明

var：允许重复声明
let：不允许重复声明

javascript 复制代码

var a = 1;
var a = 2; // ✅ 允许

let b = 1;
let b = 2; // ❌ SyntaxError: Identifier 'b' has already been declared

3. 变量提升（Hoisting）

var ：会变量提升，但初始化为 undefined
let：也会提升，但存在"暂时性死区"

javascript 复制代码

console.log(c); // undefined
var c = 5;

console.log(d); // ReferenceError: Cannot access 'd' before initialization
let d = 5;

4. 全局对象属性

var 在全局作用域声明时，会成为全局对象的属性
let 在全局作用域声明时，不会成为全局对象的属性

javascript 复制代码

var globalVar = "hello";
let globalLet = "world";

console.log(window.globalVar); // "hello"（在浏览器中）
console.log(window.globalLet); // undefined

5. 循环中的表现差异

javascript 复制代码

// var 在循环中的问题
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 输出 3 3 3
  }, 100);
}

// let 解决这个问题
for (let j = 0; j < 3; j++) {
  setTimeout(() => {
    console.log(j); // 输出 0 1 2
  }, 100);
}

最佳实践建议

优先使用 let ，避免 var 带来的意外行为
只在需要变量提升特性时才使用 var（现在基本不需要）
使用 const 声明不应重新赋值的变量
保持代码的块级作用域清晰

现代JavaScript开发中，基本已经完全用 let 和 const 替代 var。