JavaScript 变量提升

记录一下关于“ 变量提升 ”的理解：

文章参考：

• [JavaScript Scoping and Hoisting 翻译]
• [JavaScript中变量提升 Hoisting]

**一 、 **
我们先看一段很简单的代码：

var v='Hello World';
alert(v);
//弹出“Hello World”

再看一段Code：

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中的作用域（scoping）。JavaScript是函数级作用域(function-level scope)。这和其他语言（比如：C语言）的块级作用域是完全不同的。块（比如：if语句），在JavaScript中并不会创建一个新的作用域，只有函数才会创建新的作用域。 如果你必须在函数中创建一个临时的作用域，请像下面这样做：

function foo() {
　　var x = 1;
　　if (x) {
　　　(function () {
　　　　var x = 2;
　　 　}());
　　}
　　// 此处ｘ仍然等于１
}

下面我们说变量提升

其实就是把变量提升提到函数的top的地方。而且需要说明的是，变量提升 只是提升** 变量的声明 **，并不会把赋值也提升上来。

比如： 我们定义三个变量：

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

实际上它是这样子的：

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

这个时候就把变量提升了。

那么，为什么上面的代码会报错（undefined）呢？
我们根据上面变量提升以及JavaScript的作用域（函数级作用域）的分析，得出上面代码真正变成如下：

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

alert(v);
　v='I love you';
})()

所以，才会提示说“undefined”。
换句话说就是，原来的代码中虽然没有 var v; 这行代码，当执行到 alert(v);时，会在当前函数的作用域中寻找变量** V 的定义，而变量 V **的定义语句在alert(v);之后，所以才会报错。

** 三、**
同时我们也要注意： 函数提升 同样只是是把整个函数都提到前面去。 在我们写js code 的时候，我们有2中写法，一种是函数表达式，另外一种是函数声明方式。我们需要重点注意的是，只有函数声明形式才能被提升。 函数声明方式提升【成功】 复制代码代码如下:

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

Paste_Image.png

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

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

结果如下：

此时就报错了。