深入理解JavaScript变量提升与函数提升机制

在撰写本文时，参考了园友的相关资料，内容十分详实。出于保留原意的考虑，文中借鉴了部分观点与素材。

参考资料：[翻译]JavaScript Scoping and Hoisting

感谢原作者的分享，希望读者能理解这种借鉴方式。

JavaScript作用域与变量提升现象

首先，我们来看一段基础的代码示例：

 
var v='Hello World';
alert(v);

这段代码的执行结果毫无疑问是弹出“Hello World”。接下来，我们继续深入。

再看一段代码：

 
var v='Hello World';
(function(){
alert(v);
})() 

运行这段代码后，结果依然符合预期，弹出了“Hello World”。

接下来，我们看一个更具挑战性的例子：

 
var v='Hello World';
(function(){
alert(v);
var v='I love you';
})() 

如果这是一道面试题，询问执行结果，你会如何回答？

先揭晓答案：

结果是 undefined。这与你预期的结果一致吗？

这里隐藏着一个关键概念——JavaScript中的变量提升（Hoisting）。

所谓“提升”，顾名思义，就是将定义在代码后部的变量或函数声明移动到作用域的顶部。

深入理解JavaScript作用域

在解释提升之前，必须先理解JavaScript中的作用域（scoping）机制。

对于JavaScript初学者而言，作用域是最容易混淆的概念之一。即便是许多经验丰富的开发者，也可能对其理解不够透彻。JavaScript的作用域之所以复杂，是因为它表面上看起来与C系语言相似。请看下面的C语言程序示例：

 
#include <stdio.h>
int main() {
int x = 1;
printf("%d, ", x); // 1
if (1) {
int x = 2;
printf("%d, ", x); // 2
} 
printf("%d\n", x); // 1
} 

这段C语言程序的输出结果是 1, 2, 1。这是因为C系语言具备块级作用域（block-level scope）。当进入一个代码块（如if语句）时，会声明新的变量，这些变量不会影响外部作用域。然而，JavaScript并非如此。在Firebug中测试以下代码：

 
var x = 1;
console.log(x); // 1
if (true) {
var x = 2;
console.log(x); //2
} 
console.log(x);// 2

在Firebug中，上述代码的输出结果为 1, 2, 2。这是因为JavaScript采用的是函数级作用域（function-level scope），这与C系语言截然不同。在JavaScript中，像if语句这样的代码块并不会创建新的作用域，只有函数才能创建新的作用域。

对于熟悉C、C++、C#或Java的程序员来说，这一点可能出乎意料且不太习惯。幸运的是，利用JavaScript函数的灵活性，我们可以解决这个问题。如果必须在函数内创建一个临时作用域，可以采用如下方式：

 
function foo() {
var x = 1;
if (x) {
(function () {
var x = 2;
// some other code
}()); 
} 
// x is still 1.
} 

这种方式非常灵活，适用于任何需要创建临时作用域的场景，而不仅仅局限于代码块内部。强烈建议花时间深入理解JavaScript的作用域机制，它非常强大，也是我最喜欢的语言特性之一。透彻理解作用域后，掌握变量提升将变得容易得多。

变量提升机制详解

2.1 变量提升

变量提升是指将变量声明移动到函数作用域的顶部。需要明确的是，变量提升仅提升变量的声明部分，并不会将赋值操作一起提升。

例如：

我们定义三个变量：

 
(function(){
var a='One';
var b='Two';
var c='Three';
})() 

实际上，JavaScript引擎会将其处理为：

 
(function(){
var a,b,c;
a='One';
b='Two';
c='Three';
})() 

这就是变量提升的体现。

回到之前的代码示例，为什么会报错呢？根据变量提升原理及JavaScript作用域（非块级作用域）的分析，上述代码实际上被转换为以下形式：

 
var v='Hello World';
(function(){
var v;
alert(v);
v='I love you';
})() 

因此，弹出的结果是“undefined”。

由此我们得出结论：在编写JavaScript代码时，应将变量声明放在作用域的顶部（例如 var a,b,c;），以避免此类意外情况。

函数提升与表达式差异

2.2 函数提升

函数提升是指将整个函数定义移动到前面执行。

在编写JavaScript代码时，有两种函数定义方式：函数表达式和函数声明。需要注意的是，只有函数声明形式才能被提升。

函数声明方式提升【成功】

 
function myTest(){
foo();
function foo(){
alert("我来自 foo");
} 
} 
myTest();

函数表达式方式提升【失败】

 
function myTest(){
foo();
var foo =function foo(){
alert("我来自 foo");
} 
} 
myTest();

运行结果如下：

左侧代码会报错，这并非玩笑。

到这里，应该已经能够理解这些概念了。

呵呵。

再次感谢Beta Rabbit。

作者：Lanny☆兰东才