JS的预解析

原创已于 2025-06-16 13:53:41 修改 · 908 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

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

于 2025-06-16 13:53:13 首次发布

前端面试题专栏收录该内容

30 篇文章

订阅专栏

JavaScript 的 "预解析"（Hoisting）是语言引擎在代码执行前的准备阶段，对变量和函数声明进行特殊处理的机制。理解这一机制是掌握 JS 变量作用域、提升代码健壮性的关键。

一、预解析的核心规则

1. 变量提升（Variable Hoisting）

var 声明：提升到当前作用域顶部，但未赋值（值为undefined）
let/const 声明：提升但存在暂时性死区（TDZ），访问会报错
函数声明：提升且已定义

2. 作用域优先级

块级作用域（let/const）优先于函数作用域
函数声明优先于变量声明

3. 执行上下文栈

全局执行上下文（Global Execution Context）
函数执行上下文（Function Execution Context）
每个执行上下文包含：
- 变量对象（Variable Object）：存储变量和函数声明
- 作用域链（Scope Chain）
- this 指针

二、变量提升的典型表现

1. var 声明的提升

javascript

console.log(a); // undefined（变量提升但未赋值）
var a = 1;
console.log(a); // 1

2. let/const 的暂时性死区（TDZ）

javascript

console.log(b); // ReferenceError（TDZ中访问let变量）
let b = 2;

3. 函数声明优先于变量声明

javascript

console.log(func); // [Function: func]（函数声明被提升）
var func = 'test';
console.log(func); // 'test'（变量赋值覆盖函数引用）

function func() {}

三、预解析的底层实现

1. 执行上下文创建阶段

创建变量对象（VO）
- 按顺序扫描函数声明，添加到 VO（键为函数名，值为函数引用）
- 按顺序扫描变量声明，添加到 VO（键为变量名，值为undefined）
- 若变量名与已存在的函数名冲突，变量声明会被忽略
建立作用域链
确定 this 值

2. 代码执行阶段

按顺序执行代码，为变量赋值，执行函数调用

四、常见误区与最佳实践

1. 函数提升与函数表达式的区别

javascript

// 函数声明（可前置调用）
funcDecl(); // 正常执行
function funcDecl() {}

// 函数表达式（不可前置调用）
funcExpr(); // TypeError: funcExpr is not a function
var funcExpr = function() {};

2. 块级作用域与变量提升

javascript

{
  console.log(x); // ReferenceError（TDZ中访问let变量）
  let x = 1;
}

3. 循环中的闭包陷阱

javascript

// 错误示例（所有定时器都输出3）
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

// 正确示例（使用let创建块级作用域）
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

五、预解析在模块化中的表现

1. ESModule 的静态特性

javascript

// module.js
export const a = 1;
export function func() {}

// main.js
console.log(func); // ReferenceError（ESModule无变量提升）
import { a, func } from './module.js';

2. CommonJS 的动态特性

javascript

// module.js
exports.a = 1;
exports.func = function() {};

// main.js
const module = require('./module.js');
console.log(module.func); // 正常访问（动态加载无提升）

六、面试高频问题

JavaScript 预解析的原理是什么？
- 引擎在执行代码前，将变量和函数声明添加到执行上下文的变量对象中。
- 函数声明优先于变量声明被处理。
var、let、const 在预解析时有什么区别？
- var：提升且初始值为undefined
- let/const：提升但存在 TDZ，访问会报错
如何避免预解析带来的问题？
- 始终在使用变量前声明（遵循 TDZ 规则）
- 优先使用let/const替代var
- 避免函数声明和变量名冲突
以下代码的输出是什么？

javascript
```
console.log(a);
var a = 1;
function a() {}
```
答案：[Function: a]（函数声明优先于变量声明被提升）