JavaScript 变量预解析与函数声明提升机制详解

变量预编译机制

1、var 变量预编译

JavaScript 的语法结构与 C、Java、C# 等语言相似，均属于 C 类语法体系。具备 C 或 Java 编程经验的开发者通常熟悉“先声明、后使用”的规则，若在编译阶段使用未声明的变量或函数，程序会直接报错。然而，JavaScript 允许在变量和函数正式声明之前进行调用，这背后存在特定的解析机制。

首先观察一段基础代码：

(function() {
 console.log(noSuchVariable);//ReferenceError: noSuchVariable is not defined
})();

执行上述代码会立即抛出错误，这符合预期，因为 noSuchVariable 变量确实未被定义。接着查看另一段代码：

(function() {
 console.log(declaredLater); //undefined
 var declaredLater = "Now it's defined!";
 console.log(declaredLater);// "Now it's defined!"
})();

上述代码执行正确且无报错。但为何 declaredLater 变量在调用语句之后才定义，却未报错且输出为 undefined？

这是 JavaScript 解析器的行为所致。解析器会将当前作用域内声明的所有变量和函数移至作用域的起始位置，但仅变量的声明被提前，赋值操作仍保留在原代码位置。因此，上述代码在解析器眼中等效于如下形式：

(function() {
 var declaredLater; //声明被提前到作用域开始处了！
 console.log(declaredLater); // undefined
 declaredLater = "Now it's defined!"; //赋值操作还在原地!
 console.log(declaredLater);//"Now it's defined!"
})();

这便是代码不报错的原因。变量和函数经过“提升”处理后，declaredLater 变量的声明实际上位于调用语句之前。根据 JavaScript 语法定义，已声明但未赋值的变量默认值为 undefined，因此第一次打印输出 undefined。随后执行赋值操作，第二次打印则输出 Now it's defined!。

再看一个示例：

var name = "Baggins";
(function () {
 console.log("Original name was " + name);// "Original name was undefined"
 var name = "Underhill";
 console.log("New name is " + name);// "New name is Underhill"
})();

上述代码中，我们声明了一个变量 name，初衷是第一次打印时输出全局范围内的 name，随后在函数内定义局部 name 以覆盖全局变量，最后输出局部变量值。然而，第一次输出结果与预期不符，原因是局部变量在其作用域内被“提升”，等效于以下形式：

var name = "Baggins";
(function () {
 var name; //注意：name 变量被提前了！
 console.log("Original name was " + name);// "Original name was undefined"
 name = "Underhill";
 console.log("New name is " + name);//"New name is Underhill"
})();

由于 JavaScript 存在此类特性，建议将变量声明置于作用域的最顶端，以便时刻注意变量提升带来的影响。

函数声明提升

2、函数声明“被提前”

前文讨论了变量，接下来探讨函数。

函数的“提升”分为两种情况：函数声明和函数表达式（即函数作为值赋值给变量）。

首先讨论第一种情况，代码如下：

isItHoisted();//"Yes!"
function isItHoisted() { 
 console.log("Yes!");
}

如上所示，JavaScript 解释器允许在函数声明之前调用该函数。这意味着函数声明不仅是函数名被提升，整个函数定义也被提升，因此上述代码能够正确执行。

接着讨论第二种情况：函数表达式。代码如下：

definitionHoisted();// "Definition hoisted!"
definitionNotHoisted();// TypeError: undefined is not a function
function definitionHoisted() { 
 console.log("Definition hoisted!");
}
var definitionNotHoisted = function () { 
 console.log("Definition not hoisted!");
};

通过对比可见，definitionHoisted 函数被正常执行，符合第一种类型；而 definitionNotHoisted 变量虽被提升，但其赋值（即函数定义）并未提升。这一点与前文所述的变量提升完全一致，由于被提升的变量默认值为 undefined，因此调用时抛出“类型不匹配”错误，因为 undefined 不是函数，无法被调用。

var 的副作用

总结 通过上述讲解，可得出以下结论：

变量的声明被提升至作用域顶部，赋值保留在原地 函数声明整个“被提前” 函数表达式时，只有变量“被提前”了，函数没有“被提前” 3、var的副作用

隐式全局变量与明确定义的全局变量之间存在细微差异，主要体现在使用 delete 操作符使变量未定义的能力上。

通过 var 创建的全局变量（在任何函数之外的程序中创建）无法被删除。 无 var 创建的隐式全局变量（无论是否在函数中创建）可以被删除。 这表明，从技术上讲，隐式全局变量并非真正的全局变量，而是全局对象的属性。属性可以通过 delete 操作符删除，而变量则不能：

// 定义三个全局变量
var global_var = 1;
global_novar = 2;  // 反面教材
(function () {
 global_fromfunc = 3; // 反面教材
}());

// 试图删除
delete global_var;  // false
delete global_novar; // true
delete global_fromfunc; // true

// 测试该删除
typeof global_var;  // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"

在 ES5 严格模式下，未声明的变量（如前文代码片段中的两个反面教材）在运行时将抛出错误。

单 var 声明实践

4、单var形式声明变量

在函数顶部使用单个 var 语句是一种较为实用的形式，其优势在于：

提供了一个单一的位置来查找功能所需的所有局部变量 防止变量在定义之前被使用的逻辑错误 减少代码量（类型定义与传值单线完成） 单 var 形式的代码结构如下：

function func() {
 var a = 1,
  b = 2,
  sum = a + b,
  myobject = {},
  i,
  j;
 // function body...
}

你可以使用一个 var 语句声明多个变量，并以逗号分隔。在声明变量的同时初始化值是一种良好的做法，这样可以防止逻辑错误（所有未初始化但已声明的变量初始值为 undefined）并提高代码可读性。查看代码时，你可以根据初始化的值推断这些变量的大致用途。

以上即为针对 JavaScript 的 var 预解析与函数声明提升的学习内容，希望对大家的学习有所帮助。