JavaScript预解析机制与变量函数声明深度解析

本文通过具体实例探讨JavaScript的预解析机制及相关技巧，旨在为开发者提供实用的参考与理解。

变量预解析与读写不均等

变量

首先通过两个示例的错误提示对比来引入话题。

alert(y1);     //代码段1
var y1 = 'dddd';
alert(y2);     //代码段2 // alert(typeof y2);
y2 = 'xxxxx';

思考为何一个示例提示undefined，而另一个却抛出变量未定义的错误？这需要从JavaScript的解析过程入手分析。

在JavaScript代码执行前，引擎会进行“预解析”。解析引擎以块为单位，创建所有var变量并赋予初始值undefined。因此，第一个示例弹出undefined的原因便清晰可见。

因此，第一段代码在逻辑上等价于以下形式：

var y1;
alert(typeof y1); //很自然，它此时值为undefined
y1 = 'dddd';

那么第二段代码为何报错？此时已脱离“预解析”阶段（假设浏览器遇到script标签主要进行预解析和执行）。报错原因在于执行阶段，JavaScript引擎尚不知晓y2的状态（预解析未捕获y2信息），故抛出未定义错误。这引出一个问题：JavaScript作为弱类型语言，变量未定义即可使用，为何此处会报错？

原因在于JavaScript存在“变量读写不均等”特性。未定义的变量仅可写，不可读。所谓可写，即熟悉的全局变量赋值写法：

y2 = 'exam';  
//在没出现它的定义操作之前（即在它还没有自己的scope之前）该操作会将这段代码认为是定义一个全局变量，在window上注册一个属性y2，并赋值为exam

但在尝试读取该变量时，JavaScript引擎无法找到其相关信息，便会抛出未定义错误，这是JavaScript的运行规则。然而，为何却能获取其类型？这涉及对象操作：若访问对象不存在的属性或类型，会返回undefined（因其当前作为window对象的属性存在）。

需注意：变量的读写不均等特性仅适用于变量。读取所有对象的属性时不存在此特性，若属性不存在，直接提示undefined。

结论

基于上述分析，变量和对象的写操作具有相似性，但读操作遵循各自规则，这正是前述问题的根源。因此，下面这道题的答案应显而易见。

if (!('a' in window)) {
  var a = 1;
}
alert(a);

函数声明与变量提升的优先级

函数

进一步探讨function。回顾预解析过程，JavaScript在预解析阶段不仅处理var变量，还提取函数定义。因此，函数可在script任意位置定义并调用，不受位置限制。

但函数定义方式包含一种字面量定义法，即用var声明function。观察以下示例：

alert(typeof y3); //结果?
var y3 = function (){ console.log('1'); }

回顾前述约定：调用必须出现在声明之后。若理解前文，此处答案已明。JavaScript引擎在预解析var时赋予初始值undefined，若在声明前调用，引擎尚未获取真实值，自然报“xxx is not a function”错误。这也解释了为何同为函数声明，一种受声明和调用顺序约束，另一种则无此限制。

结论

它是函数，是JavaScript动态执行的结果，仍遵循变量预解析规则（在alert时，它尚未获取字面量函数信息）。若两者混合，见下文，同时存在y4变量和function。

alert(typeof y4); //结果?
function y4(){
  console.log('y4')
}
var y4;

因JavaScript预解析时函数声明优先级更高，y4自然为function类型。但当y4赋值后（此时处于执行过程），赋值操作将覆盖函数声明。因此：

alert(typeof y5);
var y5 = 'angle';
function y5(){
  console.log('ghost');  
}
alert(y5);

第一次alert结果，因处于执行过程顶端，故为function。第二次再alert时，其值已被重写为5（勿被函数定义位置在下的表象迷惑）。

从JavaScript解析与执行分离的角度思考，许多问题答案自然浮现。正如文章作者所言：“一旦理解了执行环境、调用对象、闭包、词法作用域、作用域链这些概念，JS语言的很多现象都能迎刃而解。”

如今再看，即使在这个充满不可思议特性的语言中，许多现象仍可追溯其缘由。

基于预解析的参数判断技巧

如何更好地进行参数判断

讨论上述内容后，如何使其更贴近实际开发？鉴于JavaScript的读写不均等性，如何在不报错的情况下进行参数判断？

例如：

if(cusVar){ //这里的判断，是不是存在隐含的问题呢。 }

如何更严谨地处理？

if(window['cusVar']) { //保证它不报错。
  //或者这样的判断也是可行的 window.cusVar | typeof cusVar !== 'undefined'
  //干活咯
}

最后补充一个小测试（理解预解析与执行的分离）

var y7 = 'test';
function fun1(){
  alert(y7);
  var y7 = 'sex';
}
fun1();

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。