記錄一下關(guān)于“ 變量提升 ”的理解：

文章參考：

• [JavaScript Scoping and Hoisting 翻譯]
• [JavaScript中變量提升 Hoisting]

**一 、 **
我們先看一段很簡(jiǎn)單的代碼：

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';
})()
結(jié)果卻是:

結(jié)果是 *** undefined ***？

其實(shí)，原因就是JavaScript中的 變量提升（Hoisting）；

二、
在解釋提升之前，首先要知道JavaScript中的作用域（scoping）。JavaScript是函數(shù)級(jí)作用域(function-level scope)。這和其他語言（比如：C語言）的塊級(jí)作用域是完全不同的。塊（比如：if語句），在JavaScript中并不會(huì)創(chuàng)建一個(gè)新的作用域，只有函數(shù)才會(huì)創(chuàng)建新的作用域。 如果你必須在函數(shù)中創(chuàng)建一個(gè)臨時(shí)的作用域，請(qǐng)像下面這樣做：

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

下面我們說變量提升

其實(shí)就是把變量提升提到函數(shù)的top的地方。而且需要說明的是，變量提升 只是提升** 變量的聲明 **，并不會(huì)把賦值也提升上來。

比如： 我們定義三個(gè)變量：

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

實(shí)際上它是這樣子的：

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

這個(gè)時(shí)候就把變量提升了。

那么，為什么上面的代碼會(huì)報(bào)錯(cuò)（undefined）呢？
我們根據(jù)上面變量提升以及JavaScript的作用域（函數(shù)級(jí)作用域）的分析，得出上面代碼真正變成如下：

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

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

所以，才會(huì)提示說“undefined”。
換句話說就是，原來的代碼中雖然沒有 var v; 這行代碼，當(dāng)執(zhí)行到 alert(v);時(shí)，會(huì)在當(dāng)前函數(shù)的作用域中尋找變量** V 的定義，而變量 V **的定義語句在alert(v);之后，所以才會(huì)報(bào)錯(cuò)。

** 三、**
同時(shí)我們也要注意： 函數(shù)提升 同樣只是是把整個(gè)函數(shù)都提到前面去。 在我們寫js code 的時(shí)候，我們有2中寫法，一種是函數(shù)表達(dá)式，另外一種是函數(shù)聲明方式。我們需要重點(diǎn)注意的是，只有函數(shù)聲明形式才能被提升。 函數(shù)聲明方式提升【成功】 復(fù)制代碼代碼如下:

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

Paste_Image.png

函數(shù)表達(dá)式方式提升【失敗】 如下:

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