函數(shù)作用域
? ? ?對(duì)于JavaScript中的函數(shù),我們通常是這樣使用的
? ? ?首先聲明一個(gè)函數(shù)?
? ? ? function foo(){..}
? ? ? 然后在某個(gè)地方調(diào)用它
? ? ??foo()
? ? ? ?但是你有沒(méi)有想過(guò)這個(gè)過(guò)程的缺點(diǎn)股缸?
? ? ? ?第一眉枕、我們定義的函數(shù)名foo會(huì)“污染”其所在的作用域厌衙,什么意思呢台谊?比如foo是在全局環(huán)境中定義的勉盅,那么你就強(qiáng)行給全局作用域添加了一個(gè)叫foo的函數(shù)古话,其他人也用這個(gè)foo的話就會(huì)造成沖突,所以理論上牵触,我們?cè)诰帉懘a的時(shí)候要始終有一種保持作用域干凈(不被污染)的意識(shí)和習(xí)慣淮悼。第二、我們必須顯示的使用函數(shù)名foo才能運(yùn)行其中代碼揽思。
? ? ? 那么有什么方法可以解決上述問(wèn)題呢袜腥?
? ? ? 可能有些同學(xué)已經(jīng)很快想到了。沒(méi)錯(cuò)钉汗,我們可以這么做:
? ?(function foo(){
? ? ? ? ? ? ? ...//代碼片段
? ? ? ?})()
? ? ? 不過(guò)這樣寫又有什么意義呢羹令?
? ? ? ?function前面加個(gè)括號(hào)就表示著foo 函數(shù)已經(jīng)是個(gè)表達(dá)式了,而判斷表達(dá)式和函數(shù)聲明最簡(jiǎn)單的辦法也就是看函數(shù)聲明時(shí)關(guān)鍵字function的位置了损痰,如果function是聲明中的第一個(gè)詞福侈,那么就是一個(gè)函數(shù)聲明,否則就是一個(gè)函數(shù)表達(dá)式卢未。
? ? ? ?函數(shù)聲明和函數(shù)表達(dá)式最重要的區(qū)別就是它們的名稱標(biāo)識(shí)符會(huì)綁定在何處癌刽。
? ?(function foo(){...})() 意味著標(biāo)識(shí)符foo綁定在了自身的函數(shù)中,也就是只能在{...}中調(diào)用尝丐,外部作用域是不能調(diào)用的。foo變量隱藏在自身函數(shù)中衡奥,就也不會(huì)污染外部作用域了爹袁。
塊作用域
? ? ? ?函數(shù)是JavaScript中最常見(jiàn)的作用域單元,但卻不是唯一的作用域單元矮固,因?yàn)槲覀冞€可以把變量和函數(shù)放入塊做作用域中失息,通常為{...}內(nèi)部。
? ? ? ?與其他多數(shù)編程語(yǔ)言相比档址,javascript是沒(méi)有塊狀作用域的概念的盹兢,一個(gè)典型的例子就是for循環(huán)
? ? ? ?for(var i=0; i<10; i++){
? ? ? ? ? ? console.log(i);
? ? ? ? }
? ? ? ? console.log(i);
? ? ? ?上面的這段代碼中,我們的真實(shí)目的只是想在for循環(huán)內(nèi)部使用i守伸,但殊不知已經(jīng)悄悄的將i綁定到了全局作用域中绎秒,所以最后一行打印出的結(jié)果為10,你想到了嗎尼摹?
? ? ? ? 所以這里的代碼只能說(shuō)是風(fēng)格上偽裝成的塊作用域见芹,在其他地方使用i的話一定要注意了剂娄,i已經(jīng)存在了!
? ? ? ?那么JavaScript中就真的沒(méi)有塊作用域了嗎玄呛?答案是否定的阅懦,比如ES3中的try/catch,catch分句就創(chuàng)建了一個(gè)塊作用域徘铝。其中定義的err耳胎,外部就不能訪問(wèn)。
? ? ? ?try(){
? ? ? ? ? ? undefined();
? ? ? ?}catch(err){
? ? ? ? ? ? console.log(err); //能夠正常執(zhí)行
? ? ? ?}
? ? ? console.log(err); //ReferenceError: err not found;
? ? ?不過(guò)惕它,ES6的中的let也可以實(shí)現(xiàn)塊作用域的效果怕午,用let定義的變量就將變量隱藏在了所在的作用域(通常是{...})中。
? ? ? 除了let怠缸,ES6還引入了const诗轻,它不僅將變量隱藏在塊作用域中,同時(shí)也限制了外部不能對(duì)其修改揭北。
var test = true;
ifI(test){
? ?var? ? ?a = 2;
? ?const? b = 3;
? ? a = 3;//正常
? ? b = 4;//錯(cuò)誤
}
console.log(b);//ReferenceError