深入解析ES5 JavaScript作用域与预解析机制

尽管ES6在当前开发中应用日益普及，仍有大量项目沿用ES5规范。因此，本文旨在重新梳理并巩固ES5环境下的作用域概念及预解析机制。

基本概念

作用域（Scope）指的是代码中变量可被访问的空间或范围。具体而言，它定义了变量在源代码中的定义区域，决定了在该区域内是否可进行读写操作。

在ES5标准中，仅存在全局作用域和函数级作用域两种形式；块级作用域是ES6引入的特性。JavaScript的预解析机制主要包含两个阶段：预解析阶段和自上而下的逐行执行阶段。

预解析阶段：JavaScript引擎会预先扫描代码，将使用var声明的变量、function定义的函数以及函数参数等存储到内存中。在此阶段，var声明的变量初始值为undefined，而function声明的函数则直接存储整个函数体。

逐行执行阶段

在逐行执行过程中，赋值操作（如=）以及算术运算符（+、-、*、/）、自增自减运算符（++、--）、逻辑运算符（!、%）和类型转换函数（如number()）等均可对变量进行赋值或修改。

当遇到同名变量与函数声明时，JavaScript遵循“函数优先”原则，即只保留函数声明，忽略同名的变量声明。

函数调用机制：函数本身构成一个独立的作用域。执行时，引擎会先对该作用域进行预解析，随后逐行执行。变量查找遵循作用域链规则：先在局部作用域（包括参数）中查找，若未找到，则自下而上向外层作用域查找。

理论部分较为抽象，初学者可能感到困惑，经验丰富的开发者可快速浏览。接下来，将通过具体代码示例，结合上述理论进行深入剖析。

实践案例分析

案例一

alert(a); //error: a is not defined
a = 3;

代码分析

预解析过程

如前所述，预解析仅处理var、function和参数。因此：

在该作用域内未找到任何var声明、function定义或参数。

逐行执行过程

预解析后，内存中不存在变量a。因此，在代码执行过程中，程序直接抛出错误（ReferenceError）。

案例二

alert(a); //undefined
var a = 3;

代码分析

预解析过程

根据预解析规则，仅处理var、function和参数。因此：

当执行到第二行时，变量a的值显示为undefined。

逐行执行过程

第一行：预解析后，内存中已存在变量a，其初始值为undefined。

案例三

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

代码分析

预解析过程

根据预解析规则，仅处理var、function和参数。因此：

当执行到第二行时，变量a的值显示为undefined。

当执行到第四行时，变量a的值被更新为函数本身，即function a(){ alert(2); }。

当执行到第六行时，变量a的值仍保持为第四行时的函数值，即function a(){ alert(2); }，这是因为函数声明的优先级高于变量声明。

当执行到第八行时，变量a的值变为function a(){ alert(4); }，因为在同名函数声明中，遵循代码从上至下的执行顺序，后者覆盖前者。

逐行执行过程

预解析完成后，代码开始逐行执行：

第一行：弹出function a(){ alert(4); }，因为预解析后内存中存储的a即为该函数。

第二行：包含赋值表达式，变量a被赋予新值1。表达式会改变变量的当前值，从而覆盖预解析阶段存储的值。

第三行：此时a的值为1，因此弹出1。

第四行：仅为函数声明，未使用表达式，也未调用函数，因此不会改变a的值。

第五行：由于a的值未发生变化，仍为1。

第六行：使用赋值表达式，将a赋予新值3。

第七行：弹出3。

第八行：仅为函数声明，不改变a的值。

第九行：a的值保持不变，仍为3。

通过上述案例，相信读者已对变量作用域的预解析过程有了清晰认识。接下来，我们将通过更多函数作用域的案例进一步探讨。

案例四

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

案例五

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

案例六

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

案例七

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

上述案例无需逐一详细分析，但需注意细微改动可能导致结果截然不同。因此，建议读者仔细推敲每个案例的执行逻辑。