欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中變量提升 Hoisting

 更新時間：2012年07月03日 11:39:19   作者：  
因?yàn)檫@個問題很是經(jīng)典，而且容易出錯，所以在介紹一次。哈哈。莫怪哦。
因?yàn)槲以趯戇@文章的時候，百度里找資料，找到了園友的一篇文章，寫的很好，可是我寫了又不想放棄，所以就在里面拿了很多東西過來！~~

[翻譯]JavaScript Scoping and Hoisting

希望得到大家諒解。

一。案發(fā)現(xiàn)場

我們先看一段很簡單的代碼：
復(fù)制代碼 代碼如下:

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

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

我們在看一段Code：
復(fù)制代碼 代碼如下:

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

經(jīng)過運(yùn)行之后，我們發(fā)現(xiàn)，還是和我們預(yù)期的一樣，彈出了“Hello World”。

好了，有意思的來了。接著在看一段下面的代碼：
復(fù)制代碼 代碼如下:

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

如果這個是一個面試題，面試官問你這個結(jié)果是多少？你怎么回答？

我們先看結(jié)果吧！

結(jié)果是 undefined？和你上面自己想的一樣嗎？

好吧，我就不故弄玄虛了。其實(shí)，這里面隱藏了一個陷阱-----JavaScript中的變量提升（Hoisting）；

二。深度剖析

現(xiàn)在我來解釋下提升是什么意思？顧名思義，就是把下面的東西提到上面。在JS中，就是把定義在后面的東東（變量或函數(shù)）提升到前面中定義。

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

對于JavaScript新手來說scoping是最令人困惑的部分之一。事實(shí)上，不僅僅是新手，我遇到或很多有經(jīng)驗(yàn)的JavaScript程序員也不能完全理解scoping。JavaScript的scoping如此復(fù)雜的原因是它看上去非常像C系語言的成員。請看下面的C程序：

復(fù)制代碼 代碼如下:

#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。這是因?yàn)樵贑系語言有塊級作用域(block-level scope),當(dāng)進(jìn)入到一個塊時，就像if語句，在這個塊級作用域中會聲明新的變量，這些變量不會影響到外部作用域。但是JavaScript卻不是這樣。在Firebug中試試下面的代碼：

復(fù)制代碼 代碼如下:

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


在這段代碼中，F(xiàn)irebug顯示1，2,2。這是因?yàn)镴avaScript是函數(shù)級作用域(function-level scope)。這和C系語言是完全不同的。塊，就像if語句，并不會創(chuàng)建一個新的作用域。只有函數(shù)才會創(chuàng)建新的作用域。

對于大部分熟悉C，C++，C#或是Java的程序員來說，這是意料之外并且不被待見的。幸運(yùn)的是，因?yàn)镴avaScript函數(shù)的靈活性，對于這個問題我們有一個解決方案。如果你必須在函數(shù)中創(chuàng)建一個臨時的作用域，請像下面這樣做：

復(fù)制代碼 代碼如下:

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


這種方面確實(shí)非常靈活，它使用在任何需要創(chuàng)建一個臨時作用域的地方，不僅僅是某個塊中。但是，我強(qiáng)烈建議你花點(diǎn)時間好好理解下JavaScript scoping。它實(shí)在是非常強(qiáng)力，而且它也是我最喜歡的語言特性之一。如果你很好的理解了scoping，理解hoisting將會更加容易。

2.1變量提升
變量提升，很簡單，就是把變量提升提到函數(shù)的top的地方。我么需要說明的是，變量提升 只是提升變量的聲明，并不會把賦值也提升上來。

比如：

我們定義三個變量：
復(fù)制代碼 代碼如下:

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

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

復(fù)制代碼 代碼如下:

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

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

好，我們現(xiàn)在回到第一段code里面。為什么會報錯呢？其實(shí)，根據(jù)我么根據(jù)上面變量提升原件以及js的作用域（塊級作用域）的分析，得知 上面代碼真正變成如下：
復(fù)制代碼 代碼如下:

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

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

從這里，我們也學(xué)習(xí)到，我們在寫js code 的時候，我么需要把變量放在塊級作用域的頂端，比如我在上面所舉的例子：var a,b,c;。防止出現(xiàn)意外。

2.2 函數(shù)提升
函數(shù)提升是把整個函數(shù)都提到前面去。

在我們寫js code 的時候，我們有2中寫法，一種是函數(shù)表達(dá)式，另外一種是函數(shù)聲明方式。我們需要重點(diǎn)注意的是，只有函數(shù)聲明形式才能被提升。

函數(shù)聲明方式提升【成功】

復(fù)制代碼 代碼如下:

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


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

復(fù)制代碼 代碼如下:

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

結(jié)果如下：

左邊報錯了。沒騙你。

應(yīng)該到這里基本都可以弄懂了。~
呵呵。。
再次謝謝Beta Rabbit

作者：Lanny☆蘭東才

相關(guān)文章

最新評論