JavaScript中變數提升------Hoisting

標籤：function   程式員   alt   深度   title   print   語言特性   contain   影響   

本文轉自 damonlan的文章 http://www.cnblogs.com/damonlan/archive/2012/07/01/2553425.html前言

因為我在寫這文章的時候，百度裡找資料，找到了園友的一篇文章，寫的很好，可是我寫了又不想放棄，所以就在裡面拿了很多東西過來！~~

[翻譯]JavaScript Scoping and Hoisting

希望得到大家諒解。

因為這個問題很是經典，而且容易出錯，所以在介紹一次。哈哈。莫怪哦。

一。案發現場

我們先看一段很簡單的代碼：

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

 這個沒有疑問吧，彈出“Hello World”。OK，我們繼續。

我們在看一段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）；

二。深度剖析

現在我來解釋下提升是什麼意思？顧名思義，就是把下面的東西提到上面。在JS中，就是把定義在後面的東東（變數或函數）提升到前面中定義。

在解釋提升之前，我們先來看一下js中的範圍（scoping）問題。

對於JavaScript新手來說scoping是最令人困惑的部分之一。事實上，不僅僅是新手，我遇到或很多有經驗的JavaScript程式員也不能完全理解scoping。JavaScript的scoping如此複雜的原因是它看上去非常像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}

這段程式的輸出是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系語言是完全不同的。塊，就像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 scoping。它實在是非常強力，而且它也是我最喜歡的語言特性之一。如果你很好的理解了scoping，理解hoisting將會更加容易。

2.1變數提升

變數提升，很簡單，就是把變數提升提到函數的top的地方。我麼需要說明的是，變數提升 只是提升變數的聲明，並不會把賦值也提升上來。

比如：

我們定義三個變數：

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

實際上它是這樣子的：

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

這個時候就把變數提升了呀。

好，我們現在回到第一段code裡面。為什麼會報錯呢？其實，根據我麼根據上面變數提升原件以及js的範圍（塊級範圍）的分析，得知 上面代碼真正變成如下：

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

所以，才會提示說“undefined”。

從這裡，我們也學習到，我們在寫js code 的時候，我麼需要把變數放在函數級範圍的頂端，比如我在上面所舉的例子：var a,b,c;。以防止出現意外。

2.2 函數提升

函數提升是把整個函數都提到前面去。

在我們寫js code 的時候，我們有2中寫法，一種是函數運算式，另外一種是函式宣告方式。我們需要重點注意的是，只有函式宣告形式才能被提升。

函式宣告方式提升【成功】

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

函數運算式方式提升【失敗】

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

結果如下：

 

左邊報錯了。沒騙你。

應該到這裡基本都可以弄懂了。~

呵呵。。

再次謝謝Beta Rabbit

JavaScript中變數提升------Hoisting