JS聲明變量背后的編譯原理剖析
更新時(shí)間:2012年12月28日 15:02:25 作者:
只要是寫過點(diǎn)JS代碼,很簡單一個(gè)var 就完事了。那對(duì)于JS編譯器背后它又發(fā)生了什么呢?那就一步步通過代碼來講起,需要了解的朋友研究下哦
只要是寫過點(diǎn)JS代碼,很簡單一個(gè)var 就完事了。那對(duì)于JS編譯器背后它又發(fā)生了什么呢?那就一步步通過代碼來講起。
x = 1;
alert(x);
var y = function() {
alert(x);
var x = 2;
alert(x);
}
y();
上面的代碼也會(huì)你答對(duì)了它會(huì)分別輸出:1,undefined,2。對(duì)于我來說,第一反應(yīng)它會(huì)輸出:1,1,2。為什么第二個(gè)會(huì)輸出undefined?在上面我明確定義了一個(gè)全局變量x,為何找不到?
那是因?yàn)?/STRONG>:js編譯器在執(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)部它沒有進(jìn)行var聲明。它會(huì)一直沿著作用域向上找,此時(shí)的x 就為全局x.
接下來再看一個(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);
例子很簡單。第一個(gè)例子為輸出10,第二個(gè)會(huì)輸出1。這是為什么呢?況且第二個(gè)例子我都return 了。按理都應(yīng)當(dāng)輸出10才對(duì)呀!那時(shí)因?yàn)镴S編譯器在背后作怪。
兩段代碼差別就是第二個(gè)例子多了個(gè)function a(){};便這個(gè)函數(shù)體里面什么也沒有,并且也沒有對(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ì)于我來說,第一反應(yīng)它會(huì)輸出:1,1,2。為什么第二個(gè)會(huì)輸出undefined?在上面我明確定義了一個(gè)全局變量x,為何找不到?
那是因?yàn)?/STRONG>:js編譯器在執(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)部它沒有進(jìn)行var聲明。它會(huì)一直沿著作用域向上找,此時(shí)的x 就為全局x.
接下來再看一個(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);
例子很簡單。第一個(gè)例子為輸出10,第二個(gè)會(huì)輸出1。這是為什么呢?況且第二個(gè)例子我都return 了。按理都應(yīng)當(dāng)輸出10才對(duì)呀!那時(shí)因?yàn)镴S編譯器在背后作怪。
兩段代碼差別就是第二個(gè)例子多了個(gè)function a(){};便這個(gè)函數(shù)體里面什么也沒有,并且也沒有對(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;
您可能感興趣的文章:
相關(guān)文章
JavaScript DOM學(xué)習(xí)第八章 表單錯(cuò)誤提示
這一章詳細(xì)介紹的表單錯(cuò)誤提示的方法比那種大多數(shù)使用警告框的方法要好的多。2010-02-02Javascript 動(dòng)態(tài)改變imput type屬性
這篇文章主要介紹了Javascript 動(dòng)態(tài)改變imput type屬性的相關(guān)資料,并附簡單實(shí)例代碼,需要的朋友可以參考下2016-11-11Javascript 學(xué)習(xí)筆記之 對(duì)象篇(二) : 原型對(duì)象
Javascript 并沒有類繼承模型,而是使用原型對(duì)象 prototype 進(jìn)行原型式繼承。盡管人們經(jīng)常將此看做是 Javascript 的一個(gè)缺點(diǎn),然而事實(shí)上,原型式繼承比傳統(tǒng)的類繼承模型要更加強(qiáng)大。舉個(gè)例子,在原型式繼承頂端構(gòu)建一個(gè)類模型很簡單,然而反過來則是個(gè)困難得多的任務(wù)。2014-06-06舉例講解JavaScript中將數(shù)組元素轉(zhuǎn)換為字符串的方法
這篇文章主要介紹了JavaScript中將數(shù)組元素轉(zhuǎn)換為字符串的方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-10-10JavaScript入門教程(7) History歷史對(duì)象
JavaScript中的History歷史對(duì)象包含了用戶已瀏覽的 URL 的信息,是指歷史對(duì)象指瀏覽器的瀏覽歷史。2009-01-01JavaScript入門教程(10) 認(rèn)識(shí)其他對(duì)象
對(duì)于需要更好的控制html的一些元素,就需要了解這些了。大家知道就行,有需要時(shí)可以再看。2009-01-01