js 詞法分析，詞法作用域

CrazyCodes 發(fā)布于2019-08-01 17:10 / 445人閱讀

摘要：引擎會(huì)在代碼執(zhí)行前進(jìn)行詞法分析，所以事實(shí)上，運(yùn)行分為此法分析和執(zhí)行兩個(gè)階段。詞法作用域所謂詞法作用域是說(shuō)，其作用域?yàn)樵诙x時(shí)詞法分析時(shí)就確定下來(lái)的，而并非在執(zhí)行時(shí)確定。

先來(lái)看個(gè)常見(jiàn)的面試題如下：

var a = 10;
function test(){
    alert(a);  //undefined
    var a = 20;
    alert(a); //20
}
test();

疑問(wèn)：為什么呢？test()執(zhí)行時(shí)，雖然a＝20沒(méi)有賦值，但是父級(jí)作用域里是有a＝10的，不應(yīng)該是undefined呀，js是按順序執(zhí)行的，此時(shí)的var num = 20;根本沒(méi)有執(zhí)行，所以應(yīng)該是10！！你是不是也是這么認(rèn)為的，就和我當(dāng)初一樣???

分析：眾所周知，js代碼是自上而下執(zhí)行的，JavaScript并不是傳統(tǒng)的塊級(jí)作用域，而是函數(shù)作用域。JavaScript引擎會(huì)在代碼執(zhí)行前進(jìn)行詞法分析，所以事實(shí)上，js運(yùn)行分為此法分析和執(zhí)行兩個(gè)階段。

JavaScript代碼運(yùn)行前有一個(gè)類似編譯的過(guò)程即詞法分析，詞法分析主要有三個(gè)步驟：

分析參數(shù)

再分析變量的聲明

分析函數(shù)聲明

具體步驟如下：

函數(shù)在運(yùn)行的瞬間，生成一個(gè)活動(dòng)對(duì)象（Active Object），簡(jiǎn)稱AO

第一步：分析參數(shù)：

函數(shù)接收形式參數(shù)，添加到AO的屬性，并且這個(gè)時(shí)候值為undefined,即AO.name=undefined

接收實(shí)參，添加到AO的屬性，覆蓋之前的undefined

第二步：分析變量聲明：如var name;或var name="mary";

如果上一步分析參數(shù)中AO還沒(méi)有name屬性，則添加AO屬性為undefined，即AO.name=undefined

如果AO上面已經(jīng)有name屬性了，則不作任何修改

第三步：分析函數(shù)的聲明：

如果有function name(){}把函數(shù)賦給AO.name ,覆蓋上一步分析的值

分析下面這個(gè)栗子：

1.var a = 10;
2.function test(a){
3.    alert(a);           //function a (){}
4.    var a = 20;
5.    alert(a);           //20
6.    function a (){}
7.    alert(a);           //20
8.    }
9.
10.test(100);

詞法分析：

第一步，分析函數(shù)參數(shù)：

 形式參數(shù)：AO.a = undefined
 接收實(shí)參：AO.a = 100

第二步，分析局部變量：

第4行代碼有var a,但是此時(shí)已有AO.a = 100,所以不做任何修改，即AO.a = 100

第三步，分析函數(shù)聲明：

第6行代碼有函數(shù)a,則將function a(){}賦給AO.a,即AO.a = function a(){}

執(zhí)行代碼時(shí)：

第3行代碼運(yùn)行時(shí)拿到的a時(shí)詞法分析后的AO.a，即AO.a = function a(){}；
第4行代碼：將20賦值給a,此時(shí)a=20;
第5行代碼運(yùn)行時(shí)a已經(jīng)被賦值為20,結(jié)果20；
第6行代碼是一個(gè)函數(shù)表達(dá)式，所以不做任何操作；
第7行代碼運(yùn)行時(shí)仍是20；

ps:

1.var a = 10;
2.function test(a){
3.    var a;               //證明詞法分析第二步。
4.    alert(a);           //100
5.    a = 20;
6.    alert(a);           //20
7.}
7.test(100);

ps:

var a = 10;
function test(a){
    alert(a);         //100
    var a = 20;
    alert(a);         //20
    a = function(){}        //是賦值，只有在執(zhí)行時(shí)才有效
    alert(a);         //function(){}
}
test(100);

ps:(執(zhí)行結(jié)果同上)

var a = 10;
function test(a){
    alert(a);                //100
    var a = 20;
    alert(a);                //20
    var a = function(){}        //是賦值，只有在執(zhí)行時(shí)才有效
    alert(a);                //function(){}
}
test(100);

補(bǔ)充說(shuō)明：函數(shù)聲明與函數(shù)表達(dá)式

//函數(shù)聲明
function a(){
}
//函數(shù)表達(dá)式
var b = function(){
}

a和b在詞法分析時(shí)，區(qū)別：

a在詞法分析時(shí)，就發(fā)揮作用；
b只有在執(zhí)行階段，才發(fā)揮作用。

詞法作用域

所謂詞法作用域是說(shuō)，其作用域?yàn)樵诙x時(shí)(詞法分析時(shí))就確定下來(lái)的，而并非在執(zhí)行時(shí)確定。白話就是在函數(shù)未執(zhí)行前，函數(shù)執(zhí)行的順序已經(jīng)被確定，而不是類似JAVA一樣，是在執(zhí)行前根本不知道執(zhí)行順序。