web面试之JS预解析与变量提升区别

JS预解析与变量提升区别

在JS代码执行之前，浏览器会对JS代码进行预编译，其中有两个非常重要的步骤，分别是JS预解析和变量提升。虽然它们都涉及到JS代码的解析和执行顺序，但它们的作用和执行过程有所不同，下面我们来详细讲解它们之间的区别。

JS预解析

当浏览器解析JS代码时，它会在执行之前，先把所有的var关键字以及函数的声明提取到当前作用域的顶部，而不是按照顺序逐行执行代码。这个过程被称为JS预解析，目的是使得代码更易读、易维护，避免出现变量未定义等语法错误。

我们来看一个例子：

// 这段代码会输出什么？
console.log(a); // undefined
var a = 1;

根据JS的预解析机制，JS引擎在代码执行之前会把变量a的声明提升到当前作用域的顶部，等价于以下代码：

var a;
console.log(a); // undefined
a = 1;

因此，当我们使用未经声明的变量a时，得到的结果是undefined，而不是ReferenceError错误。

变量提升

JS中的变量提升，指的是将变量声明提升到作用域的顶部，而变量的赋值操作并不会被提升。在变量提升的过程中，函数声明的优先级高于变量声明，并且会覆盖变量声明，因此函数声明可以突破作用域链的限制，从而允许在声明之前使用函数。

我们再来看一些例子：

// 这段代码会输出什么？
console.log(a); // undefined
var a = 1;

和JS预解析的案例一样，变量提升不会将变量的值提升到顶部，所以我们仍然得到undefined的结果。

而对于函数声明，变量提升则会将整个函数声明提升到作用域的顶部，同样的，函数内部也可以使用变量提升。

// 这段代码会输出什么？
foo(); // "Hello, World!"

function foo() {
  console.log("Hello, World!");
}

在这个例子中，函数foo的声明被提升到作用域的顶部，因此即使在声明之前调用了函数foo，也不会出现ReferenceError错误。

总结

JS预解析和变量提升都是JS代码在执行之前的预处理过程，它们可以使得代码更加易读、易维护，并且可以避免一些常见的语法错误。JS预解析将变量和函数的声明提升到当前作用域的顶部，而变量提升仅将变量的声明提升到作用域的顶部，函数声明优先级高于变量声明，并且会覆盖变量声明，从而可以在声明之前使用函数。

学好JS变量预解析都对我们的学习和掌握JS都非常有帮助。

参考文献：JavaScript 变量提升与 JS 预解析 对于实际工作的帮助?