JavaScript中變量提升 Hoisting
更新時(shí)間：2012年07月03日 11:39:19 作者：
因?yàn)檫@個(gè)問(wèn)題很是經(jīng)典，而且容易出錯(cuò)，所以在介紹一次。哈哈。莫怪哦。
因?yàn)槲以趯?xiě)這文章的時(shí)候，百度里找資料，找到了園友的一篇文章，寫(xiě)的很好，可是我寫(xiě)了又不想放棄，所以就在里面拿了很多東西過(guò)來(lái)！~~
[翻譯]JavaScript Scoping and Hoisting
希望得到大家諒解。
一。案發(fā)現(xiàn)場(chǎng)
我們先看一段很簡(jiǎn)單的代碼：
var v='Hello World';
alert(v);
這個(gè)沒(méi)有疑問(wèn)吧，彈出“Hello World”。OK，我們繼續(xù)。
我們?cè)诳匆欢蜟ode：
var v='Hello World';
(function(){
alert(v);
})()
經(jīng)過(guò)運(yùn)行之后，我們發(fā)現(xiàn)，還是和我們預(yù)期的一樣，彈出了“Hello World”。
好了，有意思的來(lái)了。接著在看一段下面的代碼：
var v='Hello World';
(function(){
alert(v);
var v='I love you';
})()
如果這個(gè)是一個(gè)面試題，面試官問(wèn)你這個(gè)結(jié)果是多少？你怎么回答？
我們先看結(jié)果吧！
好吧，我就不故弄玄虛了。其實(shí)，這里面隱藏了一個(gè)陷阱-----JavaScript中的變量提升（Hoisting）；
二。深度剖析
現(xiàn)在我來(lái)解釋下提升是什么意思？顧名思義，就是把下面的東西提到上面。在JS中，就是把定義在后面的東東（變量或函數(shù)）提升到前面中定義。
在解釋提升之前，我們先來(lái)看一下js中的作用域（scoping）問(wèn)題。
對(duì)于JavaScript新手來(lái)說(shuō)scoping是最令人困惑的部分之一。事實(shí)上，不僅僅是新手，我遇到或很多有經(jīng)驗(yàn)的JavaScript程序員也不能完全理解scoping。JavaScript的scoping如此復(fù)雜的原因是它看上去非常像C系語(yǔ)言的成員。請(qǐng)看下面的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。這是因?yàn)樵贑系語(yǔ)言有塊級(jí)作用域(block-level scope),當(dāng)進(jìn)入到一個(gè)塊時(shí)，就像if語(yǔ)句，在這個(gè)塊級(jí)作用域中會(huì)聲明新的變量，這些變量不會(huì)影響到外部作用域。但是JavaScript卻不是這樣。在Firebug中試試下面的代碼：
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ù)級(jí)作用域(function-level scope)。這和C系語(yǔ)言是完全不同的。塊，就像if語(yǔ)句，并不會(huì)創(chuàng)建一個(gè)新的作用域。只有函數(shù)才會(huì)創(chuàng)建新的作用域。
對(duì)于大部分熟悉C，C++，C#或是Java的程序員來(lái)說(shuō)，這是意料之外并且不被待見(jiàn)的。幸運(yùn)的是，因?yàn)镴avaScript函數(shù)的靈活性，對(duì)于這個(gè)問(wèn)題我們有一個(gè)解決方案。如果你必須在函數(shù)中創(chuàng)建一個(gè)臨時(shí)的作用域，請(qǐng)像下面這樣做：
function foo() {
var x = 1;
if (x) {
(function () {
var x = 2;
// some other code
}());
}
// x is still 1.
}
這種方面確實(shí)非常靈活，它使用在任何需要?jiǎng)?chuàng)建一個(gè)臨時(shí)作用域的地方，不僅僅是某個(gè)塊中。但是，我強(qiáng)烈建議你花點(diǎn)時(shí)間好好理解下JavaScript scoping。它實(shí)在是非常強(qiáng)力，而且它也是我最喜歡的語(yǔ)言特性之一。如果你很好的理解了scoping，理解hoisting將會(huì)更加容易。
2.1變量提升
變量提升，很簡(jiǎn)單，就是把變量提升提到函數(shù)的top的地方。我么需要說(shuō)明的是，變量提升 只是提升變量的聲明，并不會(huì)把賦值也提升上來(lái)。
比如：
我們定義三個(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í)候就把變量提升了呀。
好，我們現(xiàn)在回到第一段code里面。為什么會(huì)報(bào)錯(cuò)呢？其實(shí)，根據(jù)我么根據(jù)上面變量提升原件以及js的作用域（塊級(jí)作用域）的分析，得知 上面代碼真正變成如下：
var v='Hello World';
(function(){
var v;
alert(v);
v='I love you';
})()
所以，才會(huì)提示說(shuō)“undefined”。
從這里，我們也學(xué)習(xí)到，我們?cè)趯?xiě)js code 的時(shí)候，我么需要把變量放在塊級(jí)作用域的頂端，比如我在上面所舉的例子：var a,b,c;。防止出現(xiàn)意外。
2.2 函數(shù)提升
函數(shù)提升是把整個(gè)函數(shù)都提到前面去。
在我們寫(xiě)js code 的時(shí)候，我們有2中寫(xiě)法，一種是函數(shù)表達(dá)式，另外一種是函數(shù)聲明方式。我們需要重點(diǎn)注意的是，只有函數(shù)聲明形式才能被提升。
函數(shù)聲明方式提升【成功】
function myTest(){
foo();
function foo(){
alert("我來(lái)自 foo");
}
}
myTest();
函數(shù)表達(dá)式方式提升【失敗】
function myTest(){
foo();
var foo =function foo(){
alert("我來(lái)自 foo");
}
}
myTest();
結(jié)果如下：
應(yīng)該到這里基本都可以弄懂了。~
呵呵。。
再次謝謝Beta Rabbit
作者：Lanny☆蘭東才
[翻譯]JavaScript Scoping and Hoisting
希望得到大家諒解。
一。案發(fā)現(xiàn)場(chǎng)
我們先看一段很簡(jiǎn)單的代碼：
復(fù)制代碼 代碼如下:
var v='Hello World';
alert(v);
這個(gè)沒(méi)有疑問(wèn)吧，彈出“Hello World”。OK，我們繼續(xù)。
我們?cè)诳匆欢蜟ode：
復(fù)制代碼 代碼如下:
var v='Hello World';
(function(){
alert(v);
})()
經(jīng)過(guò)運(yùn)行之后，我們發(fā)現(xiàn)，還是和我們預(yù)期的一樣，彈出了“Hello World”。
好了，有意思的來(lái)了。接著在看一段下面的代碼：
復(fù)制代碼 代碼如下:
var v='Hello World';
(function(){
alert(v);
var v='I love you';
})()
如果這個(gè)是一個(gè)面試題，面試官問(wèn)你這個(gè)結(jié)果是多少？你怎么回答？
我們先看結(jié)果吧！
好吧，我就不故弄玄虛了。其實(shí)，這里面隱藏了一個(gè)陷阱-----JavaScript中的變量提升（Hoisting）；
二。深度剖析
現(xiàn)在我來(lái)解釋下提升是什么意思？顧名思義，就是把下面的東西提到上面。在JS中，就是把定義在后面的東東（變量或函數(shù)）提升到前面中定義。
在解釋提升之前，我們先來(lái)看一下js中的作用域（scoping）問(wèn)題。
對(duì)于JavaScript新手來(lái)說(shuō)scoping是最令人困惑的部分之一。事實(shí)上，不僅僅是新手，我遇到或很多有經(jīng)驗(yàn)的JavaScript程序員也不能完全理解scoping。JavaScript的scoping如此復(fù)雜的原因是它看上去非常像C系語(yǔ)言的成員。請(qǐng)看下面的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)樵贑系語(yǔ)言有塊級(jí)作用域(block-level scope),當(dāng)進(jìn)入到一個(gè)塊時(shí)，就像if語(yǔ)句，在這個(gè)塊級(jí)作用域中會(huì)聲明新的變量，這些變量不會(huì)影響到外部作用域。但是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ù)級(jí)作用域(function-level scope)。這和C系語(yǔ)言是完全不同的。塊，就像if語(yǔ)句，并不會(huì)創(chuàng)建一個(gè)新的作用域。只有函數(shù)才會(huì)創(chuàng)建新的作用域。
對(duì)于大部分熟悉C，C++，C#或是Java的程序員來(lái)說(shuō)，這是意料之外并且不被待見(jiàn)的。幸運(yùn)的是，因?yàn)镴avaScript函數(shù)的靈活性，對(duì)于這個(gè)問(wèn)題我們有一個(gè)解決方案。如果你必須在函數(shù)中創(chuàng)建一個(gè)臨時(shí)的作用域，請(qǐng)像下面這樣做：
復(fù)制代碼 代碼如下:
function foo() {
var x = 1;
if (x) {
(function () {
var x = 2;
// some other code
}());
}
// x is still 1.
}
這種方面確實(shí)非常靈活，它使用在任何需要?jiǎng)?chuàng)建一個(gè)臨時(shí)作用域的地方，不僅僅是某個(gè)塊中。但是，我強(qiáng)烈建議你花點(diǎn)時(shí)間好好理解下JavaScript scoping。它實(shí)在是非常強(qiáng)力，而且它也是我最喜歡的語(yǔ)言特性之一。如果你很好的理解了scoping，理解hoisting將會(huì)更加容易。
2.1變量提升
變量提升，很簡(jiǎn)單，就是把變量提升提到函數(shù)的top的地方。我么需要說(shuō)明的是，變量提升 只是提升變量的聲明，并不會(huì)把賦值也提升上來(lái)。
比如：
我們定義三個(gè)變量：
復(fù)制代碼 代碼如下:
(function(){
var a='One';
var b='Two';
var c='Three';
})()
實(shí)際上它是這樣子的：
復(fù)制代碼 代碼如下:
(function(){
var a,b,c;
a='One';
b='Two';
c='Three';
})()
這個(gè)時(shí)候就把變量提升了呀。
好，我們現(xiàn)在回到第一段code里面。為什么會(huì)報(bào)錯(cuò)呢？其實(shí)，根據(jù)我么根據(jù)上面變量提升原件以及js的作用域（塊級(jí)作用域）的分析，得知 上面代碼真正變成如下：
復(fù)制代碼 代碼如下:
var v='Hello World';
(function(){
var v;
alert(v);
v='I love you';
})()
所以，才會(huì)提示說(shuō)“undefined”。
從這里，我們也學(xué)習(xí)到，我們?cè)趯?xiě)js code 的時(shí)候，我么需要把變量放在塊級(jí)作用域的頂端，比如我在上面所舉的例子：var a,b,c;。防止出現(xiàn)意外。
2.2 函數(shù)提升
函數(shù)提升是把整個(gè)函數(shù)都提到前面去。
在我們寫(xiě)js code 的時(shí)候，我們有2中寫(xiě)法，一種是函數(shù)表達(dá)式，另外一種是函數(shù)聲明方式。我們需要重點(diǎn)注意的是，只有函數(shù)聲明形式才能被提升。
函數(shù)聲明方式提升【成功】
復(fù)制代碼 代碼如下:
function myTest(){
foo();
function foo(){
alert("我來(lái)自 foo");
}
}
myTest();
函數(shù)表達(dá)式方式提升【失敗】
復(fù)制代碼 代碼如下:
function myTest(){
foo();
var foo =function foo(){
alert("我來(lái)自 foo");
}
}
myTest();
結(jié)果如下：
應(yīng)該到這里基本都可以弄懂了。~
呵呵。。
再次謝謝Beta Rabbit
作者：Lanny☆蘭東才
相關(guān)文章
代碼生成器 document.write()...2007-04-04
超強(qiáng)推薦的js編程中的簡(jiǎn)潔寫(xiě)法收集
超強(qiáng)推薦的js編程中的簡(jiǎn)潔寫(xiě)法收集...2007-08-08
菜鳥(niǎo)也能搞懂js中typeof與instanceof區(qū)別
instanceof和typeof是兩個(gè)運(yùn)算符，在程序設(shè)計(jì)中用到，常用來(lái)判斷一個(gè)變量是否為空，或者是什么類(lèi)型的，本文就來(lái)介紹一下typeof與instanceof區(qū)別，感興趣的可以了解一下2021-09-09
理解 JavaScript Scoping & Hoisting（二）
這篇文章主要介紹了理解 JavaScript Scoping & Hoisting,盡管對(duì)于有經(jīng)驗(yàn)的程序員來(lái)說(shuō)這只是小菜一碟，不過(guò)我還是順著初學(xué)者常見(jiàn)的思路做一番描述2015-11-11
常見(jiàn)表單重復(fù)提交問(wèn)題整理及解決方法
常見(jiàn)的重復(fù)提交問(wèn)題如點(diǎn)擊提交按鈕兩次、點(diǎn)擊刷新按鈕等等，下面為大家整理了防止表單重復(fù)提交的方法，感興趣的朋友可以參考下2013-11-11
微信小程序?qū)崙?zhàn)項(xiàng)目之富文本編輯器實(shí)現(xiàn)
富文本在Web開(kāi)發(fā)上的地位大家可想而知,很多地方都需要用到富文本編輯器,比如開(kāi)發(fā)類(lèi)似新聞管理小程序、商品簡(jiǎn)介等,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崙?zhàn)項(xiàng)目之富文本編輯器實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-10-10
JavaScript中從setTimeout與setInterval到AJAX異步
這篇文章主要介紹了JavaScript中從setTimeout與setInterval到AJAX異步,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
js 限制input只能輸入數(shù)字小數(shù)點(diǎn)也不能輸入或者是只能輸入數(shù)字,能輸小數(shù)點(diǎn)等等，本文大致整理了一些，感興趣的朋友可以收藏下2013-12-12
基于JavaScript+HTML編寫(xiě)一個(gè)日期選擇插件
在現(xiàn)代Web應(yīng)用程序中,日期選擇器是一個(gè)非常常見(jiàn)的組件,用戶(hù)可以使用它來(lái)選擇特定的日期,在本篇文章中,我們將使用JavaScript和HTML來(lái)創(chuàng)建一個(gè)簡(jiǎn)單但功能強(qiáng)大的日期選擇插件,這個(gè)日期選擇插件是比較考驗(yàn)Js基本功的,需要的朋友可以參考下2023-10-10
IE下雙擊checkbox反應(yīng)延遲問(wèn)題的解決方法
這篇文章主要介紹了IE下雙擊checkbox反應(yīng)延遲問(wèn)題的解決方法,需要的朋友可以參考下2014-03-03