JavaScript 作用域与预解析机制深度解析

JavaScript 作用域基础概念

作用域可以简单理解为代码中变量可读写的区域。尽管部分开发者认为 JavaScript 不存在块级作用域，但除了全局作用域外，只有函数能够创建独立的作用域。作用域的核心价值在于实现变量的隔离，避免命名冲突。

为了更直观地理解 JavaScript 中的作用域，我们将通过一系列具体代码示例进行逐步剖析。

 alert(a);
 var a = 1; 

对于不了解作用域机制的开发者，可能会误以为代码会输出 1 或报错，但实际运行结果却是 undefined。

预解析与变量提升机制

在深入分析之前，首先需要了解 JavaScript 引擎在逐行执行代码前所进行的准备工作。

JavaScript 引擎在正式读取代码前会执行“预解析”阶段。在此阶段，引擎会优先查找特定的语法结构，主要关注 var 关键字、function 声明以及函数参数。

JavaScript 引擎在预解析阶段表现得较为“保守”，在正式运行代码前，会将所有由 var 声明的变量初始化为 undefined，即执行类似 var a = undefined 的操作。引擎将整个函数视为一个独立的代码块，忽略内部具体逻辑。函数参数的处理将在后续示例中详细说明。

当所有预准备工作完成后，JavaScript 引擎开始逐行执行代码。基于上述机制，我们可以轻松理解为何前文示例的输出结果为 undefined。

接下来分析另一个典型示例。

 alert(a);
 var a = 1;
 alert(a);
 var a = 2;
 alert(a); 

我们将对该代码片段进行逐步拆解分析。

首先进行“预解析”：引擎扫描代码寻找 var 声明。

当处理到第二行时，变量 a 被赋值为 undefined。

处理到第四行时，变量 a 依然保持为 undefined。

预解析结束后，进入正式逐行执行代码阶段：

第一行执行 alert 时，输出 undefined。

第二行执行 a = 1 赋值操作。

第三行执行 alert 时，输出 1。

第五行执行 alert 时，输出 2。

继续分析下一个示例。

 alert(a); 
 var a = 1;
 alert(a); 
 function a (){ alert(2); }
 alert(a); 
 var a = 3; 
 alert(a); 
 function a (){ alert(4); }
 alert(a);

我们依然采用逐步拆解的方式进行分析。

首先进行“预解析”：引擎同时查找 var 和 function 声明。

当处理到第二行时，变量 a 被赋值为 undefined。

当处理到第四行时，a 被赋值为函数表达式 function a() { alert(2); }。需要注意的是，所有函数在正式运行前都会以整个函数块的形式被注册。如果变量名与函数名重复，最终保留的是函数声明。

当处理到第六行时，a 被赋值为 function a() { alert(2); }。

当处理到第八行时，a 被赋值为 function a() { alert(4); }。

预解析结束后，进入正式逐行执行代码阶段：

第一行执行 alert 时，输出函数定义 function a() { alert(4); }。

第二行执行 a = 1，这表明表达式赋值可以覆盖预解析阶段设置的值。

第三行执行 alert 时，输出 1。

第四行定义的函数未被调用，因此跳过执行。

第五行执行 alert 时，输出 1。

第六行执行 a = 3 赋值操作。

第七行执行 alert 时，输出 3。

第八行定义的函数未被调用，因此跳过执行。

第九行执行 alert 时，输出 3。

具体执行流程如图所示：

函数作用域与变量查找规则

继续观察下一个示例。

var a = 1;
function fn1(){
 alert(a); //undefined   
 var a = 2;
}
fn1();
alert(a); //1

首先进行“预解析”：引擎查找 var 和 function 声明。

当处理到第一行时，变量 a 被赋值为 undefined。

当处理到第二行时，fn1 被赋值为函数定义 function fn1() { alert(2); var a = 2; }。

正式逐行执行代码：第一行执行 a = 1。

第六行调用函数 fn1()，进入函数作用域。在函数作用域内，依然遵循先预解析、再逐行执行的规则。

函数内部预解析阶段：变量 a 被初始化为 undefined。

执行 alert 时，输出 undefined。

执行 a = 2，此时的 a 仅作用于函数作用域内部，不会影响全局变量 a。

函数执行完毕后，控制权返回全局作用域。

第七行执行 alert 时，输出 1。

继续分析下一个示例。

var a = 1;
function fn1(){
 alert(a); //1  
 a = 2;
}
fn1();
alert(a); //2

该示例与上一个示例的唯一区别在于函数内部的变量 a 没有使用 var 声明，我们仅分析其中的关键差异。

在函数作用域中，第三行执行 alert(a) 时，由于函数内部没有 var a 声明，解析器会向上一级作用域查找变量 a。作用域的层级关系由函数的创建位置决定，即函数在哪个作用域下创建，就属于该作用域的子级。此时函数的上一级是全局作用域，全局作用域中 a = 1，因此第三行输出 1。接着第四行执行 a = 2 赋值，由于函数内部仍无局部变量 a，解析器再次在全局作用域中找到 a 并将其修改为 2。因此，全局作用域中的 a 变为 2，第七行执行 alert 时输出 2。

这一点需要清晰理解，关键在于是否使用 var 声明变量。

接着分析下一个示例。

 var a = 1;
 function fn1(a){
 alert(a); //undefined 
 a = 2;
 }
 fn1();
 alert(a); // 1

该示例与上一个的区别在于函数增加了参数。参数的作用等同于局部变量，即在函数预解析阶段会执行 var a = undefined。因此，第三行输出 undefined，第四行 a = 2 修改的是函数作用域内的局部变量 a，不影响全局变量 a，第七行输出 1。

继续分析下一个示例。

var a = 1;
function fn1(a){
alert(a); // 1
a = 2;
}
fn1(a);
alert(a); // 1

该示例与前一个的区别在于第六行调用函数时传入了实参。此时，函数实参 a 的值取自全局变量 a = 1 的值 1。函数执行时，第二行 a = 1，因此第三行输出 1，第七行输出 1。

请注意这几个示例之间的细微区别，避免混淆。

再来看一个示例。

var a = 1;
function en(){
var a = 2;
fn();
}
function fn(){
alert(a); //1
}
en();

函数 fn 中的变量 a 未声明，因此需要到创建该函数的作用域中取值——注意是“创建”时的作用域，而非“调用”时的作用域。

作用域与上下文（Context）的区别

补充说明：JavaScript 中的作用域（Scope）与上下文（Context）概念。

JavaScript 中的作用域（scope）和上下文（context）是语言的核心特性，赋予了代码极大的灵活性。每个函数都拥有独立的变量上下文和作用域。这些概念支撑了 JavaScript 中许多强大的设计模式，但也常令开发者感到困惑。下文将全面揭示作用域与上下文的区别，以及它们在设计模式中的应用。

上下文与作用域的区别

首先需要澄清的是，上下文和作用域是两个不同的概念。多年来，许多开发者经常混淆这两个术语，错误地将其中一个描述为另一个。客观来说，这些术语的使用确实容易引发混乱。

每个函数调用都关联着特定的作用域和上下文。从根本上说，作用域是基于函数（function-based）的，而上下文是基于对象（object-based）的。换言之，作用域涉及每次函数调用时变量的访问权限，且每次调用都是独立的；而上下文始终指关键字 this 的值，即调用当前可执行代码的对象的引用。

以上是对 JavaScript 作用域的详细解析，希望能对大家有所帮助。如有任何疑问，欢迎留言交流，小编会及时回复。同时感谢大家对本站的支持！