前端面试：var,const,let的区别

原创已于 2026-03-25 21:40:08 修改 · 331 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端

#JavaScript

于 2025-11-09 22:30:43 首次发布

1、var

缺点：

（1）变量提升 ：var 声明的变量会在代码执行前被 “提升” 到所在函数作用域的顶部，但仅提升声明，不提升赋值（此时访问值为undefined）。

function varExample() {
    console.log (a); //变量提升，值为 undefined
    var a = 10;
    console.log (a); //赋值后，值为 10
    if (true) {
        //重新定义了一个变量，但由于 var 是函数作用域且存在变量提升，
        //和外面的 var a 合并成同一个变量。最终表现为 “覆盖了外层的 a”
        var a = 20; 
        console.log (a); //输出 20
    }
    console.log (a); //值被 if 块修改，输出 20
}

（2）缺乏块级作用域：在 if 或者 for 里面的变量会泄露出去

这些缺点都在ES6里面解决了！

（3）“污染” window：

在全局作用域写：

var name = "张三";
var age = 20;

等于：

window.name = "张三";
window.age = 20;

所有 var 全局变量，都会变成 window 的属性。

结果就是：window 对象里被塞得乱七八糟，很容易变量冲突、覆盖、出错。

这就叫：全局污染。而let /const 拥有独立的全局作用域，不挂到 window

2、let

特点：

（1）块级作用域

块级作用域指的是由 { }包围的代码块内部形成的作用域，在该作用域内声明的变量只能在该代码块内访问

if (true) {
  let b = 10;
  console.log(b); // 输出 10
}
console.log(b); // 报错：b is not defined

（2）暂时性死区TDZ（Temporal Dead Zone）

从作用域开始，到 let 变量声明语句执行前的这段区域，该变量处于 “未初始化” 的不可访问状态。声明还是会被提升到作用域顶部，但不会进行默认初始化（处于 “未初始化” 状态），直到代码执行到 let 声明语句时，才会完成初始化。

3、const

核心：

变量引用的不变性：const 声明的变量绑定不可变，但绑定值的内容可能可变。

若需让引用类型（对象 / 数组）“完全不可修改”，需配合 Object.freeze()（浅冻结）。Object.freeze() 是浅冻结，嵌套对象的内部属性仍可修改，需递归冻结才能实现完全不可变。

const obj = Object.freeze({ name: '赵六' });
obj.name = '孙七'; // 非严格模式下无报错，但修改无效；严格模式下报错

关键点：暂时性死区，块级作用域

优先使用 const，其次是 let，尽量避免使用 var，这是现代 JavaScript 开发的统一最佳实践。

补充：

ES6:

ES6（ECMAScript 2015）是 JavaScript 语言的第六个正式版本，于 2015 年发布，是 JavaScript 发展史上的一个重要里程碑。

解决了 ES5 及之前版本的诸多痛点（如变量作用域混乱、缺乏模块化支持等）；
- 模块化：新增 import 和 export 语法
- 作用域：引入块级作用域（let/const）
引入了更贴近现代编程范式的特性（如类、箭头函数、解构等）；
- 引入 class 语法（语法糖，基于原型链实现）
- 箭头函数（=>）：简化函数写法，且不绑定自身 this（继承外层上下文的 this）；
- 解构赋值：快速从对象、数组中提取数据
```
const { name, age } = { name: '张三', age: 20 }; // 对象解构
const [first, second] = [10, 20]; // 数组解构
```
为复杂应用开发（如前端框架、大型项目）提供了更强大的语法支持。
- 数组方法扩展：map、filter、find 等更强大的数组操作；
- Promise：原生支持异步编程，解决回调地狱；
- Set/Map：新增数据结构，用于存储唯一值和键值对；
- 展开运算符（...）：简化数组 / 对象的浅层复制、合并等操作。

window 对象

window 是浏览器里所有 JS 代码的 “老大”、最顶层对象

它掌管：

浏览器窗口
全局变量
全局函数
弹窗（alert/confirm）
地址栏
定时器（setTimeout）
控制台（console）
…… 所有浏览器功能

平时写的这些，其实都是 window 的方法

alert("你好");
// 等于 window.alert("你好")

console.log("测试");
// 等于 window.console.log("测试")

setTimeout(()=>{},1000);
// 等于 window.setTimeout(...)

window 是浏览器 JS 的 “根对象”，所有全局东西都挂在它上面。

标签

#前端 #javascript #开发语言 #面试