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

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

示例如下：

console.log("gv1=" + gv); // 在聲明前訪問變量
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ù)中的第一行代碼分別是在變量聲明前訪問了gv和lv變量，第二行代碼在函數(shù)定義前，調(diào)用了show函數(shù)。從輸出結(jié)果來看，上述代碼在聲明之前訪問變量以及在定義前調(diào)用函數(shù)完全沒問題，原因是變量提升。

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

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



由上可見，正是因為var支持變量提升，所以可以在聲明前使用var聲明的變量，而let和const不支持變量提升，所以它們聲明的變量必須先聲明才可以使用。

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

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

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

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

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

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


作者：Vam的金豆之路

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

我的微信：maomin9761

微信公眾號：前端歷劫之路