首頁 > web前端 > js教程 > JS宣告變數背後的編譯原理剖析_基礎知識

JS宣告變數背後的編譯原理剖析_基礎知識

WBOY
發布: 2016-05-16 17:44:51
原創
1034 人瀏覽過

只要是寫過點JS程式碼,很簡單一個var 就完事了。那對於JS編譯器背後它又發生了什麼事呢?那就一步步透過程式碼來講起。

複製程式碼 程式碼如下:

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

上面的程式碼也會你答對了它會分別輸出:1,undefined,2。對我來說,第一個反應它會輸出:1,1,2。為什麼第二個會輸出undefined?在上面我明確定義了一個全域變數x,為何找不到?

那是因為:js編譯器在執行這個y函數的時候,會把把它body裡面的宣告變數提前到最前面進行宣告。例如:var x=2; 編譯器先會在body最前面進行var x 宣告。其實上面的代碼等同於下面的這段代碼:
複製代碼 代碼如下:

x = 1;
alert(x);
var y = function() {
var x;//此時x還未賦值,所以為undefined。
alert(x);
x = 2;
alert(x);
}
y();

所以也不難理解x =undefined的了.但是如果把var x = 2;這段程式碼給刪掉,在內部它沒有進行var聲明。它會一直沿著作用域往上找,此時的x 就為全域x.
接下來再看一個更有趣的例子。
複製程式碼 程式碼如下:

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

例子很簡單。第一個範例為輸出10,第二個會輸出1。這是為什麼呢?況且第二個例子我都return 了。按理都應當輸出10才對呀!那時因為JS編譯器在背後作怪。
兩段程式碼差異就是第二個例子多了個function a(){};便這個函數體裡面什麼也沒有,也沒有對它進行任何呼叫。

其實JS編譯器在背後會把function a() {}編譯成 var a=function (){}。此時對於函數內部也有一個a=10; 外面的a些也是1;根據JS作用域。會先找內部的a,如果找不到再向上一級一級找。
最張alert(a) 就會顯示1;
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板