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í)上面的代碼等同于下面的這段代碼:
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è)更有趣的例子。
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;
復(fù)制代碼 代碼如下:
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;
您可能感興趣的文章:
- JScript中的''var''定義變量的作用域
- Javascript中的var_dump函數(shù)實(shí)現(xiàn)代碼
- var與Javascript變量隱式聲明
- Javascript var變量隱式聲明方法
- js for循環(huán),為什么一定要加var定義i變量
- 關(guān)于JavaScript中var聲明變量作用域的推斷
- 解讀JavaScript代碼 var ie = !-[1,] 最短的IE判定代碼
- 在Javascript中 聲明時(shí)用"var"與不用"var"的區(qū)別
- javascript定義變量時(shí)有var和沒(méi)有var的區(qū)別探討
- JavaScript中var關(guān)鍵字的使用詳解
- javascript中加var和不加var的區(qū)別 你真的懂嗎
相關(guān)文章
javascript cookie用法基礎(chǔ)教程(概念,設(shè)置,讀取及刪除)
這篇文章主要介紹了javascript cookie用法,結(jié)合實(shí)例形式總結(jié)分析了javascript中cookie的定義、特點(diǎn)及獲取、設(shè)置、刪除等基本操作技巧,需要的朋友可以參考下2016-09-09有關(guān)JavaScript中call()和apply() 的一些理解
下面小編就為大家?guī)?lái)一篇有關(guān)JavaScript中call()和apply() 的一些理解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05談?wù)勱P(guān)于JavaScript 中的 MVC 模式
本文介紹了模型-視圖-控制器模式在 JavaScript 中的實(shí)現(xiàn),有需要的朋友可以參考一下2013-04-04JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記7 js函數(shù)(上)
如果說(shuō)對(duì)象是房間,那么函數(shù)就是有魔幻效應(yīng)的房間了。函數(shù)首先是對(duì)象,然后這個(gè)函數(shù)對(duì)象還具有很多魔幻功能2012-10-10