JavaScriptvar聲明變量背后的原理示例解析_基礎(chǔ)知識

只要是寫過點JS代碼，很簡單一個var 就完事了。那對于JS編譯器背后它又發(fā)生了什么呢？那就一步步通過代碼來講起。
代碼如下:
x = 1;
alert(x);
var y = function() {
alert(x);
var x = 2;
alert(x);
}
y();

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

那是因為：js編譯器在執(zhí)行這個y函數(shù)的時候，會把把它body里面的聲明變量提前到最前面進(jìn)行聲明。比如：var x=2; 編譯器先會在body最前面進(jìn)行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;這段代碼給刪掉，在內(nèi)部它沒有進(jìn)行var聲明。它會一直沿著作用域向上找，此時的x 就為全局x.
接下來再看一個更有趣的例子。
代碼如下:
var a = 1;
function b() {
a = 10;
return;
}
b();
alert(a);
///////////////////////////////////
var a = 1;
function b() {
a = 10;
return;
function a() {}
} b(); alert(a);

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com