[JS]《你不知道的Javascript·上》——函數(shù)作用域和塊作用域

changfeng1050 發(fā)布于2019-08-22 18:24 / 823人閱讀

摘要：提供了同時(shí)解決這兩個(gè)問題的方案以上這種模式稱為立即執(zhí)行函數(shù)表達(dá)式。塊作用域不應(yīng)該完全作為函數(shù)作用域的替代方案，兩種功能應(yīng)該同時(shí)存在。

函數(shù)作用域

為了隱藏內(nèi)部實(shí)現(xiàn)，可以通過在任意代碼片段外部添加包裝函數(shù)，但是這并不理想，因?yàn)楸仨毬暶饕粋€(gè)具名函數(shù)，意味著這個(gè)函數(shù)名稱本身會(huì)污染函數(shù)所在的作用域；同時(shí)必須通過顯式地調(diào)用函數(shù)才能運(yùn)行其中的代碼。

*：區(qū)分函數(shù)聲明和表達(dá)式最簡單的方法是看function關(guān)鍵字出現(xiàn)在聲明中的位置。如果function是聲明中的第一個(gè)詞，那么就是一個(gè)函數(shù)聲明，否則就是一個(gè)函數(shù)表達(dá)式。

JS提供了同時(shí)解決這兩個(gè)問題的方案：

var a=2;
(function foo(){
    var a=3;
    console.log(a);//3
})();

console.log(a);//2

以上這種模式稱為立即執(zhí)行函數(shù)表達(dá)式（IIFE）。

有一個(gè)改進(jìn)的形式：

var a=2;
(function foo(){
    var a=3;
    console.log(a);//3
}());//調(diào)用的括號包含在用來包裝的（）里

console.log(a);//2

兩種形式在功能上是一致的。

IIFE有一個(gè)進(jìn)階用法：把它們當(dāng)作函數(shù)調(diào)用并傳遞參數(shù)進(jìn)去。

var a=2;
(function IIFE(global){
    var a=3;
    console.log(a);//3
    console.log(global.a);//2
})(window);

console.log(a);//2

IIFE還有一種變化的用途是倒置代碼的運(yùn)行順序，將需要運(yùn)行的函數(shù)放在第二位。

var a=2;
(function IIFE(def){
    def(window);
})(funtion def(global){
    var a=3;
    console.log(a);//3
    console.log(global.a);//2
})

塊作用域 let

只要聲明是有效的，在聲明中的任意位置都可以使用｛...｝括號來為let創(chuàng)建一個(gè)用于綁定的塊。

var foo=true;
if(foo){
    {//顯式的塊
        let bar=foo*2;
        console.log(bar);//2
    }
     console.log(bar);//ReferenceError
}
console.log(bar);//ReferenceError

**：let循環(huán)：for的循環(huán)頭部使用let，不僅將i綁定到for的塊中，事實(shí)上它將其重新綁定到了循環(huán)的每個(gè)迭代中，確保使用上一個(gè)循環(huán)迭代結(jié)束時(shí)的值重新進(jìn)行賦值。

*：塊作用域不應(yīng)該完全作為函數(shù)作用域的替代方案，兩種功能應(yīng)該同時(shí)存在。