重學(xué)JavaScript第1集｜變量提升

變量提升就好比JavaScript引擎用一個(gè)很小的代碼起重機(jī)將所有var聲明和function函數(shù)聲明都舉起到所屬作用域（所謂作用域，指的是可訪問(wèn)變量和函數(shù)的區(qū)域）的最高處。這句話的意思是：如果在函數(shù)體外定義函數(shù)或使用var聲明變量。則變量和函數(shù)的作用域會(huì)提升到整個(gè)代碼的最高處，此時(shí)任何地方訪問(wèn)這個(gè)變量和調(diào)用這個(gè)函數(shù)都不會(huì)報(bào)錯(cuò)；而在函數(shù)體內(nèi)定義函數(shù)或使用var聲明變量，變量和函數(shù)的作用域則會(huì)提升到整個(gè)函數(shù)的最高處，此時(shí)在函數(shù)體內(nèi)任何地方訪問(wèn)這個(gè)變量和調(diào)用所定義的函數(shù)都不會(huì)報(bào)錯(cuò)。

示例如下：

console.log("gv1=" + gv); // 在聲明前訪問(wèn)變量
show();
var gv = "javascript";
console.log("gv2=" + gv);
function(){
 console.log("lv1= " + lv);
 vat lv = "js";
 console.log("lv2=" + lv);
}



輸出結(jié)果：

gv1 = undefined;
lv1 = undefined;
lv2 = js;
gv2 = javasript;


在上述代碼中，第一行迪馬以及show函數(shù)中的第一行代碼分別是在變量聲明前訪問(wèn)了gv和lv變量，第二行代碼在函數(shù)定義前，調(diào)用了show函數(shù)。從輸出結(jié)果來(lái)看，上述代碼在聲明之前訪問(wèn)變量以及在定義前調(diào)用函數(shù)完全沒(méi)問(wèn)題，原因是變量提升。

上述代碼在代碼運(yùn)行前，經(jīng)過(guò)預(yù)解析處理后的代碼邏輯如下:

var gv; // 變量聲明提升到當(dāng)前作用域的最高處
var show = function show (){
    var lv;
    console.log("lv1=" + lv);//lv在聲明時(shí)沒(méi)有初始化，所以輸出undefined
    lv= "js";
    console.log("lv2=" + lv); // 變量輸出賦予的值: js
}
console.log("gv1=" + gv1); // gv在聲明時(shí)沒(méi)有初始化，所以輸出undefined
gv = "javascript";
console.log("gv2=" + gv);//變量輸出所賦予的值：javascript



由上可見(jiàn)，正是因?yàn)関ar支持變量提升，所以可以在聲明前使用var聲明的變量，而let和const不支持變量提升，所以它們聲明的變量必須先聲明才可以使用。

一般來(lái)說(shuō)，javascript代碼的執(zhí)行包括兩個(gè)過(guò)程：預(yù)解析處理過(guò)程和逐行解讀過(guò)程。在代碼逐行解讀前，javascript引擎需要進(jìn)行帶的預(yù)解析處理。在預(yù)解析過(guò)程中，當(dāng)前作用域中var變量聲明和函數(shù)定義將被提升到作用域的最高處。

    下一集：預(yù)解析處理

        歡迎關(guān)注我的公眾號(hào)前端歷劫之路

        回復(fù)關(guān)鍵詞電子書(shū)，即可獲取12本前端熱門(mén)電子書(shū)。

        回復(fù)關(guān)鍵詞紅寶書(shū)第4版，即可獲取最新《JavaScript高級(jí)程序設(shè)計(jì)》（第四版）電子書(shū)。

        關(guān)注公眾號(hào)后，點(diǎn)擊下方菜單即可加我微信，我拉攏了很多IT大佬，創(chuàng)建了一個(gè)技術(shù)交流、文章分享群，期待你的加入。


作者：Vam的金豆之路

主要領(lǐng)域：前端開(kāi)發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路