快捷導(dǎo)航

JavaScript var聲明變量背后的原理示例解析

更新時(shí)間：2013年10月12日 16:52:41 作者：

只要是寫過(guò)點(diǎn)JS代碼，很簡(jiǎn)單一個(gè)var 就完事了,那么JS編譯器背后它又發(fā)生了什么呢？在本文將為大家詳細(xì)介紹下，感興趣的朋友不要錯(cuò)過(guò)

只要是寫過(guò)點(diǎn)JS代碼，很簡(jiǎn)單一個(gè)var 就完事了。那對(duì)于JS編譯器背后它又發(fā)生了什么呢？那就一步步通過(guò)代碼來(lái)講起。

 
x = 1; 
alert(x); 
var y = function() { 
alert(x); 
var x = 2; 
alert(x); 
} 
y(); 

上面的代碼也會(huì)你答對(duì)了它會(huì)分別輸出：1,undefined,2。對(duì)于我來(lái)說(shuō)，第一反應(yīng)它會(huì)輸出：1,1,2。為什么第二個(gè)會(huì)輸出undefined？在上面我明確定義了一個(gè)全局變量x，為何找不到？

那是因?yàn)椋簀s編譯器在執(zhí)行這個(gè)y函數(shù)的時(shí)候，會(huì)把把它body里面的聲明變量提前到最前面進(jìn)行聲明。比如：var x=2; 編譯器先會(huì)在body最前面進(jìn)行var x 聲明。其實(shí)上面的代碼等同于下面的這段代碼：

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

 
x = 1; 
alert(x); 
var y = function() {<BR>var x;//此時(shí)x還未賦值，所以為undefined。 
alert(x); 
x = 2; 
alert(x); 
} 
y(); 

所以也就不難理解x=undefined的了.但是如果把var x = 2;這段代碼給刪掉，在內(nèi)部它沒(méi)有進(jìn)行var聲明。它會(huì)一直沿著作用域向上找，此時(shí)的x 就為全局x.
接下來(lái)再看一個(gè)更有趣的例子。

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

 
var a = 1; 
function b() { 
a = 10; 
return; 
} 
b(); 
alert(a); 
/////////////////////////////////// 
var a = 1; 
function b() { 
a = 10; 
return; 
function a() {} 
} b(); alert(a); 

例子很簡(jiǎn)單。第一個(gè)例子為輸出10，第二個(gè)會(huì)輸出1。這是為什么呢？況且第二個(gè)例子我都return 了。按理都應(yīng)當(dāng)輸出10才對(duì)呀！那時(shí)因?yàn)镴S編譯器在背后作怪。
兩段代碼差別就是第二個(gè)例子多了個(gè)function a(){};便這個(gè)函數(shù)體里面什么也沒(méi)有，并且也沒(méi)有對(duì)它進(jìn)行任何調(diào)用。

其實(shí)JS編譯器在背后會(huì)把function a() {}編譯成 var a=function (){}。此時(shí)對(duì)于函數(shù)內(nèi)部也有一個(gè)a=10; 外面的a些也還是1;根據(jù)JS作用域。會(huì)先找內(nèi)部的a,如果找不到再向上一級(jí)一級(jí)找。
最張alert(a) 就會(huì)顯示1;

您可能感興趣的文章: