深入理解JavaScript的预解析机制

PanZonghui
175 阅读8分钟

JavaScript作为一门动态脚本语言，其代码执行机制与编译型语言有显著差异。其中，预解析（Hoisting） 是JavaScript执行过程中一个至关重要的环节，理解这一机制能帮助开发者避开许多“诡异”的代码陷阱。本文将从预解析的执行过程入手，通过实例解析变量与函数提升的细节，最后对比ES6中var、let、const的核心区别。

一、JavaScript代码的执行步骤

JavaScript代码由浏览器的JS解析器执行，整个过程分为预解析和代码执行两个阶段，缺一不可。

1. 预解析：执行前的“准备工作”

预解析是代码执行前的关键步骤，主要完成两项任务：

  • 检查语法错误：解析器会先扫描代码，若存在括号不匹配、关键字错误等语法问题，会直接终止执行并抛出错误。
  • 声明提升：将当前作用域内的变量和函数声明“移动”到作用域的最顶端（注意：是逻辑上的提升，物理代码并未改变）。

2. 代码执行：按顺序逐行运行

预解析完成后，解析器会按从上到下的顺序执行代码，包括变量赋值、函数调用、逻辑判断等操作。此时，提升后的声明已处于作用域顶端，代码执行会遵循提升后的逻辑。

二、声明提升的核心规则

声明提升是预解析的核心，分为变量提升和函数提升，二者有明确的优先级和行为差异。

1. 变量提升（var声明）

  • 仅提升声明，不提升赋值：例如var a = 10，提升后会拆分为var a;（声明提升到顶端）和a = 10（赋值留在原地）。
  • 声明前访问的结果：变量提升后，声明前访问变量会返回undefined（而非报错）。

示例：

console.log(a); // 输出：undefined（声明已提升，赋值未执行）
var a = 10;

// 提升后等价于：
var a; // 变量声明提升
console.log(a);
a = 10; // 赋值留在原地

2. 函数提升

函数提升的行为取决于声明方式，分为函数声明和函数表达式两种情况：

  • 函数声明（function声明）：

整个函数体被提升到作用域顶端，因此可以在声明前直接调用。

示例：

fun1(); // 输出："fun1"（整个函数体被提升）
function fun1() {
  console.log("fun1");
}

// 提升后等价于：
function fun1() { // 函数声明整体提升
  console.log("fun1");
}
fun1();
  • 函数表达式（var赋值）：

仅变量声明被提升，函数体不提升（本质是变量提升的规则）。

声明前调用会报错（此时变量值为undefined，不是函数）。

示例：

fun2(); // 报错：TypeError: fun2 is not a function
var fun2 = function() {
  console.log("fun2");
};

// 提升后等价于：
var fun2; // 仅变量声明提升
fun2(); // 此时fun2是undefined，调用报错
fun2 = function() { // 函数体留在原地
  console.log("fun2");
};

3. 提升优先级：函数提升 > 变量提升

若函数名与变量名同名，函数声明会优先提升并覆盖变量声明；后续变量赋值可覆盖函数。

示例：

console.log(fn); // 输出：[Function: fn]（函数声明覆盖变量声明）
var fn = "变量";
function fn() {}

// 提升后等价于：
function fn() {} // 函数声明先提升
var fn; // 变量声明后提升，被函数覆盖（无实际效果）
console.log(fn);
fn = "变量"; // 变量赋值覆盖函数

三、预解析实战案例解析

通过具体案例可更直观理解提升机制在复杂场景中的表现。

案例1：函数作用域内的变量提升

var bar = 1;
function test() {
  console.log(bar); // 输出：undefined（函数内变量bar提升）
  var bar = 2;
  console.log(bar); // 输出：2
}
test();

// 提升后等价于：
var bar;
function test() {
  var bar; // 函数内变量bar提升到作用域顶端
  console.log(bar); // undefined（未赋值）
  bar = 2; // 赋值执行
  console.log(bar); // 2
}
bar = 1;
test();

解析：函数test内的var bar会提升到函数作用域顶端，因此第一个console.log访问的是未赋值的局部变量bar（值为undefined），而非全局变量bar。

案例2：函数提升与变量赋值的覆盖

var bar = 1;
function test() {
  console.log(bar); // 输出：[Function: bar]（函数声明提升）
  var bar = 2;
  console.log(bar); // 输出：2（变量赋值覆盖函数）
  function bar() {
    return 111;
  }
}
test();

// 提升后等价于：
var bar;
function test() {
  function bar() { return 111; } // 函数声明提升（优先级更高）
  var bar; // 变量声明提升，不影响已提升的函数
  console.log(bar); // 访问函数
  bar = 2; // 变量赋值覆盖函数
  console.log(bar); // 访问赋值后的变量
}
bar = 1;
test();

案例3：隐式全局变量与作用域

f1();
console.log(c); // 输出：6
console.log(b); // 输出：6
console.log(a); // 报错：ReferenceError: a is not defined

function f1() {
  var a = b = c = 6; // a是局部变量，b和c是隐式全局变量
  console.log(a); // 6
  console.log(b); // 6
  console.log(c); // 6
}

// 提升后等价于：
function f1() {
  var a; // 变量a提升（局部作用域）
  a = b = c = 6; // b和c未声明，自动成为全局变量（挂载到window）
  console.log(a);
  console.log(b);
  console.log(c);
}
f1();
console.log(c); // 全局变量c
console.log(b); // 全局变量b
console.log(a); // 局部变量a未暴露到全局，报错

解析：var a = b = c = 6中，a是局部变量（受var约束），而b和c未用var声明，会被隐式挂载到全局作用域（浏览器中为window对象），因此函数外可访问。

案例4：综合考察函数与变量提升

function Foo() {
  getName = function () { console.log(1); };
  return this;
}

// 静态方法
Foo.getName = function () { console.log(2); };

// 原型方法
Foo.prototype.getName = function () { console.log(3); };

// 变量声明和函数声明
var getName = function () { console.log(4); };
function getName() { console.log(5); }

// 问题：
Foo.getName();    // 输出？
getName();        // 输出？
Foo().getName();  // 输出？
getName();        // 输出？

代码解析步骤：

预解析阶段（提升后的等效代码）：

// 函数声明提升（优先级最高）
function Foo() {
  getName = function () { console.log(1); };
  return this;
}
function getName() { console.log(5); } // 被后续变量赋值覆盖

// 变量声明提升
var getName; // 被函数声明覆盖，无实际效果

// 原始代码执行顺序
Foo.getName = function () { console.log(2); };
Foo.prototype.getName = function () { console.log(3); };
getName = function () { console.log(4); }; // 覆盖函数声明

执行过程分析：

Foo.getName()：

  • 访问Foo的静态方法

  • 直接调用Foo.getName = function () { console.log(2); }

  • 输出：2

getName()：

  • 当前全局getName是function () { console.log(4); } （函数声明被后面的变量赋值覆盖）

  • 输出：4

Foo().getName()：

  • 1.执行Foo()：

    getName = function () { console.log(1); } （没有var/let/const，修改全局getName）

    return this（非严格模式指向window）

  • 2.相当于window.getName()

  • 3.现在全局getName已被改为输出1的函数

    输出：1

getName()：

  • 全局getName在上一步被修改为输出1的函数
  • 输出：1

最终输出结果：

Foo.getName();    // 2
getName();        // 4
Foo().getName();  // 1
getName();        // 1

四、var、let、const的核心区别与用法

ES6引入的let和const解决了var的许多设计缺陷，三者的核心差异如下：

特性varletconst
作用域函数作用域块级作用域（{}内）块级作用域（{}内）
提升表现声明提升，可提前访问（值为undefined）声明提升但存在“暂时性死区”，提前访问报错同let
重复声明允许在同一作用域重复声明不允许在同一作用域重复声明不允许在同一作用域重复声明
初始值要求可省略（默认undefined）可省略（默认undefined）必须初始化（声明时赋值）
重新赋值允许允许不允许（基本类型）

1. 作用域差异

var无视块级作用域：

if、for、while等语句的{}不会为var创建作用域，声明的变量会“泄露”到外部。

只有函数(function)的{}能为var创建新的作用域

if (true) {
var x = 10;
}
console.log(x); // 输出：10（x泄露到全局）

let/const：受块级作用域约束，块内声明的变量仅在块内有效。

if (true) {
  let y = 20;
  const z = 30;
}
console.log(y); // 报错：y is not defined
console.log(z); // 报错：z is not defined

2. 暂时性死区（TDZ）

let/const声明的变量存在“暂时性死区”：从作用域开始到变量声明前的区域，访问变量会直接报错（而非返回undefined）。

console.log(a); // 报错：Cannot access 'a' before initialization
let a = 10;

3. 赋值与修改限制

const声明的基本类型（如数字、字符串）不可重新赋值，但引用类型（如对象、数组）的内部属性可修改。

const num = 100;
num = 200; // 报错：Assignment to constant variable

const arr = [1, 2];
arr.push(3); // 允许（修改引用类型内部属性）
console.log(arr); // 输出：[1, 2, 3]

五、最佳实践建议

  1. 优先使用const：对于不需要重新赋值的变量，用const声明可避免意外修改，增强代码可读性。
  2. 合理使用let：仅在需要重新赋值时使用let（如循环变量、状态变量）。
  3. 避免使用var：var的函数作用域和提升特性易导致变量泄露和逻辑混乱，ES6后建议淘汰。

通过理解预解析机制和变量声明的差异，我们能写出更可控、更易维护的JavaScript代码。希望本文能帮助你避开提升陷阱，用好var、let、const这三个基础工具。

avatar
文章
阅读
粉丝