JavaScript 作用域与预解析机制详解

JavaScript 作用域与预解析机制详解

本文主要分享 JavaScript 作用域相关的面试题与核心知识，供读者参考学习。

作用域基础概念

一、作用域基础

在深入理解作用域之前，需明确以下基本概念：

每个变量或函数都有其特定的作用范围，超出该范围即无法访问，这一机制称为作用域。

全局变量与局部变量

二、全局变量与局部变量

1. 全局变量

（1）在全局作用域内声明的变量，例如 var a=1;

（2）仅赋值而未显式声明的变量，例如 a=2;（注：若 a=2 在函数环境中执行，且未使用 var/let/const 声明，则仍被视为全局变量）

2. 局部变量

在函数内部声明或定义的变量，称为局部变量。

3. 作用域的意义

（1）保障程序的安全性，避免变量污染。

（2）有助于内存管理，局部变量在函数执行结束后通常会被释放。

作用域链查找逻辑

三、作用域链

变量查找的过程。首先在当前局部环境中查找是否声明了该变量或函数；若存在，则检查其是否有赋值或具体实现；若未在当前环境找到，则向上一级作用域继续查找。

预解析执行顺序

四、预解析顺序

JavaScript 引擎在执行代码前会进行预解析，检查语法错误、内存分配及变量声明等。若跳过预解析直接按流程执行，可能导致程序运行至末尾才发现语法错误，严重影响性能。

预解析的具体规则如下：

1. 页面中引用的多个 <script> 块会依次解析，从上到下合并为一个整体作用域。

2. 每个 <script> 块内部，var 声明的变量名会被提升到当前环境开头（注意：仅提升变量名，不提升赋值，如 var a=2; 将 var a 提升到环境开头，但赋值操作保留在 var a=2 所在行执行）；function 声明会被提升到当前块的开头。

3. 依次解析每个执行环境，将 var 和 function 提升至对应环境的开头。

常见面试题与代码分析

五、应用场景（常见作用域面试题分析）

var a="aa";
function test(){
 alert(a);//undefined，函数执行后，在函数环境内，var a会预解析，当弹出a时，首先先找本层环境内有无声明，发现有。但是代码没有执行到赋值，所以结果是undefined。
 var a="bb";//var a会预解析在函数开头，执行到这行才进行赋值
 alert(a);//“bb”
}
test();
alert(a);//"aa" 找全局环境下的声明，找到了var a="aa"

var a="aa";
function test(){
 alert(a);//“aa”，函数执行后，在函数环境内，没有找到本层环境关于a的声明，所以开始向上一层环境查找。
 a="bb";//执行到这行开始改变全局a的量
}
test();
alert(a);//"bb" 全局环境的a在函数执行时已经被改变

function test(){ 
 b();//函数b会被预解析，因此可以调用，执行了输出1；
 var a=1;
 function b(){
  console.log(1);
  console.log(a);//undefined
  var a=2;
 }
}
test();

以下代码展示了变量提升与执行顺序的影响：

总结与变量查找策略

明确变量作用域的核心在于掌握预解析机制，进而界定作用域边界，此过程遵循特定逻辑：首先检查当前层级的环境是否存在该变量的声明，若存在，则进一步判断是否已完成赋值操作；若仅有声明而未执行赋值语句，该变量的值即为 undefined。若当前层级既无声明也无赋值，则需向上层环境逐级查找，直至定位到声明为止。若所有层级的执行环境中均未找到该变量，控制台将抛出变量未定义的错误。

判断变量作用域的关键在于掌握预解析顺序。首先确定当前层环境是否有声明，若有则检查是否已执行赋值；若仅有声明未赋值，结果为 undefined。若当前层无声明，则向上层作用域查找，直至找到或报错。

对于函数，同样遵循此逻辑：先查找当前层是否有预解析的函数声明，若有即可执行；若无，则向上层查找。