JavaScript 变量声明终极指南：var/let/const 深度解析（2025 版）

JavaScript 变量声明终极指南：var/let/const 深度解析（2025 版）

变量声明是 JavaScript 的基础，但 var、let、const 三者的差异远不止 "是否可修改" 这么简单。很多开发者因混淆作用域、提升机制等核心逻辑，导致变量污染、意外修改等隐蔽 bug。本文从 "引擎原理→语法差异→实战陷阱→性能优化" 四层逻辑，结合 V8 执行机制和 React/Vue 实战案例，彻底讲透三者的使用规则与选型技巧，帮你写出更健壮的代码。

一、底层原理：为什么需要 let/const？

要理解三者的差异，首先要明确 let/const 的设计初衷 ------ 解决 var 的 "先天缺陷"。ES5 时代仅有的 var 声明存在作用域模糊、变量提升异常等问题，ES6 引入 let/const 正是为了弥补这些漏洞。

1. var 的核心缺陷（let/const 的诞生背景）

javascript

// 缺陷1：无块级作用域，变量泄露到外部
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：3 3 3（而非预期的0 1 2）

// 缺陷2：重复声明覆盖，无语法报错
var name = "张三";
var name = "李四";
console.log(name); // 输出：李四（无任何警告）

// 缺陷3：变量提升异常，允许在声明前使用
console.log(age); // 输出：undefined（无报错，逻辑上不合理）
var age = 25;

这些缺陷的根源是 ES5 没有 "块级作用域" 概念，var 声明的变量仅存在全局作用域和函数作用域，且变量提升机制设计粗糙。ES6 引入块级作用域（由{}包裹），并通过 let/const 实现严格的作用域规则。

2. V8 引擎视角的变量处理机制

V8 引擎执行 JavaScript 时分为 "编译阶段" 和 "执行阶段"，三者的核心差异体现在编译阶段的作用域创建和变量绑定：

• var：编译阶段将变量绑定到当前函数作用域（或全局作用域），无论声明位置在哪，都会提升到作用域顶部（仅声明提升，赋值不提升）；

• let/const：编译阶段将变量绑定到当前块级作用域，同样会提升，但会形成 "暂时性死区（TDZ）"------ 声明前无法访问变量；

• const：与 let 机制基本一致，仅多了 "绑定不可修改" 的约束（注意：是绑定不可改，非值不可改）。

关键结论：let/const 并非 "没有变量提升"，而是提升后存在暂时性死区，避免了 var 的 "声明前使用" 漏洞。

二、三大核心差异：从语法到行为

var、let、const 的差异集中在 "作用域范围""重复声明""变量提升""修改限制" 四个维度，这也是开发中最易踩坑的点。

1. 作用域范围：函数 / 全局 vs 块级

作用域决定了变量的可访问范围，这是三者最核心的差异：

var：仅支持函数作用域和全局作用域

var 声明的变量会 "穿透" 块级结构（如 if、for、while），泄露到外部作用域：

javascript

// 示例1：if块中的var泄露到全局
if (true) {
  var city = "北京";
}
console.log(city); // 输出：北京（块级结构未限制作用域）

// 示例2：for循环中的var泄露到外部
for (var j = 0; j < 3; j++) {
  // 循环体逻辑
}
console.log(j); // 输出：3（循环变量泄露为全局变量）

// 示例3：函数作用域限制var（唯一例外）
function test() {
  var msg = "hello";
}
console.log(msg); // 报错：ReferenceError: msg is not defined

let/const：支持块级作用域

let/const 声明的变量被限制在最近的块级作用域内（由{}包裹，包括 if、for、函数体等），不会泄露：

javascript

// 示例1：if块中的let被限制在块内
if (true) {
  let city = "上海";
  const code = "310000";
}
console.log(city); // 报错：ReferenceError: city is not defined
console.log(code); // 报错：ReferenceError: code is not defined

// 示例2：for循环中的let形成独立块级作用域（解决经典问题）
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：0 1 2（每次循环创建独立作用域，保留i的当前值）

// 示例3：嵌套块级作用域
{
  let a = 1;
  {
    let a = 2; // 内层块级作用域，与外层a独立
    console.log(a); // 输出：2
  }
  console.log(a); // 输出：1
}

块级作用域的识别：所有被{}包裹的区域都是块级作用域，包括函数体、if/switch 代码块、for/while 循环体、单独的{}块。

2. 重复声明：允许 vs 禁止

重复声明指同一作用域内多次声明同名变量，三者的约束不同：

var：允许重复声明，后声明覆盖前声明

var 的重复声明无语法错误，且后一次声明会覆盖前一次的赋值（仅覆盖赋值，声明本身无意义），极易导致逻辑混乱：

javascript

var name = "张三";
var name = "李四"; // 无语法报错
console.log(name); // 输出：李四（后声明覆盖前声明）

// 函数内重复声明，覆盖外部变量
var age = 20;
function test() {
  var age = 25;
  console.log(age); // 输出：25
}
test();
console.log(age); // 输出：20（函数内声明不影响外部）

let/const：禁止同一作用域重复声明

let/const 在同一作用域内不允许重复声明，包括与 var 声明的变量同名（避免变量覆盖风险）：

javascript

// 示例1：let重复声明报错
let name = "张三";
let name = "李四"; // 报错：SyntaxError: Identifier 'name' has already been declared

// 示例2：const重复声明报错
const code = "100000";
const code = "110000"; // 报错：SyntaxError: Identifier 'code' has already been declared

// 示例3：与var同名也报错（同一作用域）
var age = 20;
let age = 25; // 报错：SyntaxError: Identifier 'age' has already been declared

// 示例4：不同作用域可声明同名变量（合法）
let gender = "男";
if (true) {
  let gender = "女"; // 内层作用域，与外层独立
  console.log(gender); // 输出：女
}

3. 变量提升与暂时性死区：宽松 vs 严格

变量提升指 "变量声明在编译阶段被提升到作用域顶部"，三者的差异体现在提升后的访问规则：

var：提升后允许声明前访问（返回 undefined）

var 的变量提升是 "宽松" 的，声明前访问变量不会报错，仅返回 undefined（赋值部分不提升）：

javascript

// 变量提升示例：声明前访问
console.log(score); // 输出：undefined（声明提升，赋值未提升）
var score = 90;

// 等价于编译后的逻辑：
var score; // 声明提升到顶部
console.log(score);
score = 90; // 赋值留在原位置

let/const：提升后存在暂时性死区（TDZ）

let/const 也会变量提升，但提升后到声明语句之间的区域是 "暂时性死区"，此阶段访问变量会直接报错（而非返回 undefined），从语法上禁止 "声明前使用"：

javascript

// 示例1：let的暂时性死区
console.log(score); // 报错：ReferenceError: Cannot access 'score' before initialization
let score = 90;

// 示例2：const的暂时性死区
if (true) {
  console.log(code); // 报错（死区内访问）
  const code = "310000";
}

// 示例3：typeof检测也会触发死区
typeof x; // 报错：ReferenceError: x is not defined
let x = 10;

暂时性死区的范围：从作用域开始到变量声明语句结束，此范围内任何访问变量的操作都会报错。

4. 修改限制：可修改 vs 不可修改

这是 const 与 var/let 的核心差异，决定了变量能否被重新赋值：

var/let：支持重新赋值和修改

var 和 let 声明的变量可多次重新赋值，值的类型也可任意修改：

javascript

// var支持重新赋值
var num = 10;
num = 20;
num = "二十"; // 类型也可修改
console.log(num); // 输出：二十

// let支持重新赋值
let color = "red";
color = "blue";
console.log(color); // 输出：blue

const：绑定不可修改，值可能可修改

const 的核心规则是 "变量绑定不可修改"，而非 "值不可修改"，需区分两种场景：

javascript

// 场景1：基本类型（字符串、数字、布尔等）------值不可修改
const age = 25;
age = 26; // 报错：TypeError: Assignment to constant variable.

// 场景2：引用类型（对象、数组、函数等）------值可修改，绑定不可修改
const user = { name: "张三", age: 25 };
// 合法：修改对象的属性（值未变，仅属性变化）
user.age = 26;
user.gender = "男";
console.log(user); // 输出：{ name: '张三', age: 26, gender: '男' }

// 非法：重新赋值（修改绑定）
user = { name: "李四" }; // 报错：TypeError: Assignment to constant variable.

// 数组示例：修改元素合法，重新赋值非法
const arr = [1, 2, 3];
arr.push(4); // 合法
console.log(arr); // 输出：[1,2,3,4]
arr = [5, 6]; // 报错：TypeError: Assignment to constant variable.

关键理解：const 声明的引用类型变量，保存的是 "内存地址"（绑定），不可修改地址，但可修改地址指向的内容（对象属性、数组元素）。

三、实战对比：三大经典场景见真章

理论差异需结合实战场景才能真正掌握，以下是三个高频场景的对比分析：

1. 循环中的变量问题（经典面试题）

循环中变量的作用域控制是 var 的经典痛点，let 完美解决此问题：

javascript

// 场景：循环中添加定时器，输出索引
// 方案1：var实现（存在问题）
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log("var:", i), 100);
}
// 输出：var: 3  var: 3  var: 3（i泄露为全局变量，定时器执行时i已变为3）

// 方案2：let实现（正确效果）
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log("let:", i), 100);
}
// 输出：let: 0  let: 1  let: 2（每次循环创建独立块级作用域，保留i的当前值）

// 方案3：var+IIFE实现（ES6前的解决方案）
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(() => console.log("var+IIFE:", j), 100);
  })(i); // 传递当前i值，创建独立函数作用域
}
// 输出：var+IIFE: 0  var+IIFE: 1  var+IIFE: 2

核心原因：let 在 for 循环中每次迭代都会创建一个新的块级作用域，定时器回调捕获的是当前迭代的 i 值；而 var 仅创建一个全局变量 i，所有回调共享同一值。

2. 函数中的变量捕获（闭包场景）

闭包中捕获变量时，let/const 的块级作用域能避免 var 的变量污染问题：

javascript

// 场景：创建多个函数，分别返回不同索引
// 方案1：var实现（存在问题）
function createFuncsVar() {
  var funcs = [];
  for (var i = 0; i < 3; i++) {
    funcs.push(() => console.log("var:", i));
  }
  return funcs;
}
const funcsVar = createFuncsVar();
funcsVar[0](); // 输出：3
funcsVar[1](); // 输出：3

// 方案2：let实现（正确效果）
function createFuncsLet() {
  var funcs = [];
  for (let i = 0; i < 3; i++) {
    funcs.push(() => console.log("let:", i));
  }
  return funcs;
}
const funcsLet = createFuncsLet();
funcsLet[0](); // 输出：0
funcsLet[1](); // 输出：1

3. 框架中的变量声明（React/Vue 实战）

现代前端框架中，let/const 已成为标配，var 因缺陷基本被淘汰，以下是框架中的实战规范：

React 组件中的变量声明

javascript

import { useState } from "react";

function UserList() {
  // 状态变量：用const（useState返回的setter修改状态，无需重新赋值）
  const [users, setUsers] = useState([]);
  // 临时变量：用let（可能重新赋值）
  let loading = false;

  // 事件处理函数：用const（函数引用不修改）
  const fetchUsers = async () => {
    loading = true;
    try {
      const res = await fetch("/api/users");
      const data = await res.json();
      setUsers(data); // 修改状态，不修改users变量本身
    } catch (err) {
      console.error(err);
    } finally {
      loading = false;
    }
  };

  return (
    <div>
      <button onClick={fetchUsers} disabled={loading}>
        加载用户
      </button>
      <ul>
        {users.map((user) => (
          // 循环中key：用const（每个迭代的user不修改）
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Vue 组件中的变量声明

javascript

<script setup>
import { ref, reactive } from "vue";

// 响应式变量：用const（ref/reactive返回的代理对象不重新赋值）
const count = ref(0);
const user = reactive({ name: "张三" });

// 普通变量：用let（可能重新赋值）
let timer = null;

// 函数：用const
const increment = () => {
  count.value++;
};

// 生命周期函数：用const
const startTimer = () => {
  timer = setInterval(() => {
    count.value++;
  }, 1000);
};
</script>

<template>
  <p>计数：{{ count }}</p>
  <button @click="increment">加1</button>
  <button @click="startTimer">开始计时</button>
</template>

四、避坑指南：90% 开发者踩过的坑

掌握三者的差异后，还需规避实战中的隐蔽陷阱，以下是高频坑点及解决方案：

1. 坑点 1：const 声明引用类型后，误以为值不可修改

javascript

// 错误认知：const声明的对象完全不可修改
const user = { name: "张三" };
// 试图修改属性时犹豫，或错误地重新赋值
user.name = "李四"; // 合法，可正常修改
user = { name: "李四" }; // 非法，报错

// 解决方案：如需"完全不可修改"的对象，使用Object.freeze()
const frozenUser = Object.freeze({ name: "张三" });
frozenUser.name = "李四"; // 非严格模式下无报错，但修改无效
console.log(frozenUser.name); // 输出：张三

2. 坑点 2：for 循环中用 var 导致变量污染全局

javascript

// 问题代码：循环变量泄露为全局变量
for (var i = 0; i < 5; i++) {
  // 逻辑代码
}
// 其他地方误修改i，导致逻辑异常
i = 10; // 全局变量被修改

// 解决方案：
// 1. 现代环境：直接替换为let
for (let i = 0; i < 5; i++) {}
// 2. 兼容ES5环境：用IIFE包裹
(function() {
  for (var i = 0; i < 5; i++) {}
})();

3. 坑点 3：暂时性死区的隐蔽触发

javascript

// 隐蔽的死区问题：typeof检测触发报错
function test() {
  // 死区范围：函数开始到let声明处
  typeof x; // 报错：ReferenceError
  let x = 10;
}

// 解决方案：确保变量声明后再访问，无论何种操作
function testFixed() {
  let x; // 提前声明（可选）
  typeof x; // 输出：undefined（安全）
  x = 10;
}

4. 坑点 4：块级作用域中的函数声明（ES6 兼容问题）

ES6 规定块级作用域中的函数声明类似 let，但部分浏览器（如旧版 Chrome）兼容时会提升到全局，需特别注意：

javascript

// 问题代码：块级作用域中的函数声明
if (true) {
  function foo() {
    return "hello";
  }
}
foo(); // 部分旧浏览器中可执行（提升到全局），现代浏览器报错

// 解决方案：用函数表达式替代函数声明
if (true) {
  const foo = () => "hello"; // 用const声明函数表达式
  foo(); // 块内可执行
}
foo(); // 报错：ReferenceError（安全）

五、终极选型指南：什么时候用 var/let/const？

结合前面的分析，现代 JavaScript 开发中，变量声明的选型逻辑已非常清晰，核心原则是 "优先 const，其次 let，杜绝 var"：

1. 优先使用 const

满足以下任一条件，优先用 const（约占 70% 的变量声明场景）：

• 变量无需重新赋值（如函数、对象、数组、固定常量）；

• 框架中的响应式变量（如 React 的 useState、Vue 的 ref/reactive 返回值）；

• 循环中的迭代变量（如 for...of、数组 map 的回调参数）；

• 声明常量（如配置项、枚举值，建议大写命名：const MAX_SIZE = 10）。

优势：const 强制 "不可重新赋值"，减少意外修改的风险，代码可读性更高（看到 const 就知道变量引用不会变）。

2. 其次使用 let

满足以下条件，用 let（约占 30% 的变量声明场景）：

• 变量需要重新赋值（如计数器、开关变量、临时状态）；

• 变量先声明后赋值（如条件判断中赋值的变量）；

• 循环中需要修改的迭代变量（如 for 循环的 i 需要自增）。

javascript

// let的典型场景
let count = 0;
count++; // 需重新赋值

let message;
if (true) {
  message = "success"; // 先声明后赋值
}

for (let i = 0; i < 10; i++) {
  // i需自增，用let
}

3. 杜绝使用 var（特殊场景除外）

var 的所有场景都可被 let/const 替代，仅在以下特殊场景可能需要使用 var：

• 维护超老旧 ES5 代码（无法升级到 ES6+）；

• 需要故意利用变量提升（极特殊场景，不推荐）。

重要提醒：现代前端工程化项目（如 React/Vue 脚手架）默认支持 ES6+，var 已无存在必要，面试中使用 var 可能被认为对 ES6 特性不熟悉。

4. 核心差异速查表（一目了然）

对比维度	var	let	const
作用域	函数 / 全局	块级 / 函数 / 全局	块级 / 函数 / 全局
重复声明	允许	禁止	禁止
变量提升	支持，声明前可访问（undefined）	支持，存在暂时性死区	支持，存在暂时性死区
重新赋值	允许	允许	禁止（绑定不可改）
适用场景	老旧代码	需重新赋值的变量	无需重新赋值的变量 / 常量

六、总结：变量声明的核心原则

var、let、const 的差异本质是 JavaScript 从 "松散类型" 到 "严格类型" 的演进体现，掌握它们的核心是理解 "块级作用域" 和 "变量绑定规则"。

最后记住三个核心原则，彻底搞定变量声明：

1. 作用域优先：需要块级作用域用 let/const，避免变量泄露；

2. 不可修改优先：变量无需重新赋值时，优先用 const，减少意外修改；

3. 杜绝 var：现代开发中 let/const 完全替代 var，提升代码健壮性。

遵循这些规则，不仅能规避 90% 的变量相关 bug，还能让代码更具可读性和可维护性，这也是前端工程化开发的基本要求。

这份博客补充了 V8 引擎原理和框架实战案例，还整理了避坑指南和速查表。如果你需要针对某类场景（如 Node.js 开发）补充案例，或调整内容深度，都可以告诉我。

编辑分享

未命名

链接