雖然，ES6在我們工作中應(yīng)用得越來(lái)越廣泛，但是還是很多項(xiàng)目保留著ES5的寫(xiě)法，所以，今天，帶著大家重新鞏固下ES5下的作用域及預(yù)解析機(jī)制。
作用域：域，指的是一個(gè)空間、范圍、區(qū)域，作用指的是在域內(nèi)可進(jìn)行讀寫(xiě)操作。一個(gè)變量的作用域是程序源代碼中定義的這個(gè)變量的區(qū)域。
在ES5中，只存在全局和函數(shù)級(jí)作用域，在ES6中，引入了塊級(jí)作用域
js的預(yù)解析機(jī)制大概分為兩個(gè)過(guò)程：1. 預(yù)解析 2. 自上而下逐行解讀
-
預(yù)解析
js解析器會(huì)先把var定義的變量、function、參數(shù)等一些東西存儲(chǔ)進(jìn)倉(cāng)庫(kù)里面(內(nèi)存)。變量var在正式運(yùn)行之前，都賦值為undefined,function函數(shù)在運(yùn)行之前，就是整個(gè)函數(shù)塊
-
逐行解讀
表達(dá)式=、+、-、*、/、++、--、！、%.....number()、參數(shù)都可以賦值
①遇到重名的，只留下一個(gè)，變量和函數(shù)重名，函數(shù)優(yōu)先級(jí)高于變量，只留下函數(shù)
②函數(shù)調(diào)用（函數(shù)是一個(gè)作用域，遇到作用域都會(huì)按照先進(jìn)行預(yù)解析，然后逐行解讀的過(guò)程執(zhí)行），先局部找參數(shù)，局部找不到就自下向上找（作用域鏈）
概念扯了一大段，估計(jì)初學(xué)者還是有點(diǎn)暈乎乎，老司機(jī)就可以提前下車(chē)了，接下來(lái)，咋們舉幾個(gè)小栗子，結(jié)合上面的理論，深入理解。
alert(a); //error: a is not defined
a = 3;
分析：
1）預(yù)解析
上面說(shuō)過(guò)，預(yù)解析時(shí)只會(huì)把var 、 function 、參數(shù)等存儲(chǔ)起來(lái)，所以：
整個(gè)作用域沒(méi)有找到var function 參數(shù)
2）逐行解讀
預(yù)解析后，內(nèi)存中存在a且被賦值了underfind整個(gè)變量，所有，代碼執(zhí)行過(guò)程中程序直接報(bào)錯(cuò)。
alert(a); //undefined
var a = 3;
1）預(yù)解析
上面說(shuō)過(guò)，預(yù)解析時(shí)只會(huì)把var 、 function 、參數(shù)等存儲(chǔ)起來(lái)，所以：
執(zhí)行到第二行時(shí)，a 的值是未定義。
2）逐行解讀
第一行：預(yù)解析后，內(nèi)存中存在a且被賦值了underfined
alert(a); // function a (){ alert(4); }
var a = 1;
alert(a); // 1
function a (){ alert(2); }
alert(a); // 1
var a = 3;
alert(a); // 3
function a (){ alert(4); }
alert(a); // 3
分析：
1）域解析
上面說(shuō)過(guò)，預(yù)解析時(shí)只會(huì)把var 、 function 、參數(shù)等存儲(chǔ)起來(lái)，所以：
執(zhí)行到第二行時(shí)，a 的值是未定義。
執(zhí)行到第四行時(shí)，a 的值是函數(shù)本身，也就是function a(){alert(2);}。
執(zhí)行到第六行時(shí)，a 的值還是第四行時(shí)的值，也就是function a(){alert(2);}，因?yàn)楹瘮?shù)的優(yōu)先級(jí)比變量高。
執(zhí)行到第八行時(shí)，a 的值就變成了function a(){alert(4);} ,因?yàn)楫?dāng)兩個(gè)函數(shù)重名時(shí)，遵循代碼從上往下執(zhí)行。
2）逐行解讀
預(yù)解析完成之后，就是代碼逐行執(zhí)行了，
第一行：會(huì)彈出function a(){alert(4);} ，因?yàn)轭A(yù)解析完成之后，被存進(jìn)內(nèi)存的a 的值就是function a(){alert(4);}
第二行：第二行里有表達(dá)式，a 被賦了一個(gè)新的值1 表達(dá)式會(huì)改變變量的值。表達(dá)式可以改變預(yù)解析的值。
第三行：a現(xiàn)在被賦值為1，所有會(huì)彈出1
第四行：只是函數(shù)的聲明，并沒(méi)有用到表達(dá)式，而且也沒(méi)有函數(shù)的調(diào)用，所以不會(huì)改變a 的值。
第五行：因?yàn)閍的值沒(méi)有變化，所以還是1
第六行：使用了表達(dá)式，a 被賦了一個(gè)新的值3
第七行：會(huì)彈出3
第八行：函數(shù)的聲明，不會(huì)改變a 的值。
第九行：a的值沒(méi)有改變，所以還是3
通過(guò)上面的栗子，相信大家應(yīng)該對(duì)變量作用域的預(yù)解析過(guò)程有一定的了解了，接下來(lái)，咋們?cè)倥e幾個(gè)函數(shù)作用域的栗子
var a=1;
function fn1(){
alert(a); //undefined
var a = 2;
}
fn1();
alert(a) //1
var a=1;
function fn1(a){
alert(a); //1
var a = 2;
}
fn1(a);
alert(a) //1
var a=1;
function fn1(a){
alert(a); //1
a = 2;
}
fn1(a);
alert(a) //1
var a=1;
function fn1(){
alert(a); //1
a = 2;
}
fn1(a);
alert(a) //2
這幾個(gè)栗子想必不用在一步步分析吧，不過(guò)就一點(diǎn)小改動(dòng)，可能結(jié)果就截然不同，所以，大家還是需要仔細(xì)琢磨下。祝君好運(yùn)?！厩岸私涣鱍群：659522518】
