js作用域(三):函數作用域和塊級作用域

圖文無關.jpg

函數作用域

從之前我們討論的作用域是負責聲明并維護由所有聲明的標識符(變量)組成一系列查詢,并實施一套非常嚴格的規則,確定當前執行的代碼對這些標識符的訪問權限。作用域包含著一系列的規則。很多函數嵌套的時候,最里面的函數的作用域包含著對外層函數作用域的引用,這些引用包含著對標識符(變量、函數)的定義。

我們知道。JavaScript有基于函數的作用域,這意味著每一個函數都可以創建屬于自己的一套作用域。屬于這個函數的全部變量都可以在整個函數的范圍內使用及復用(事實上在嵌套的作用域中也可以使用)。例如

function foo(){
    var a =1;
    function bar(){
        var b=2;
    }
}

這里面,函數foo有兩個標識符a和bar(),在函數外部是訪問不到foo里面的標識符的,但是在foo里面的bar()是可以訪問到foo的標識符的,這也是作用域鏈的體現。這樣通過函數作用域將代碼類似于‘隱藏’起來了,這是一個很有用的技術。通過聲明一個函數,把我們需要的標識符都定義在函數里面,成為了這個函數的私有變量了,這樣做有幾個好處

1.避免使用過多的全局變量。

2.限制了標識符的訪問權限,起到封裝的作用

3.避免同名標識符之間的沖突

我們知道做項目有可能不僅僅是一個人寫代碼。項目是很多人參與的,如果我們的全局變量太多個了,那后面,有可能會造成變量重名了,那后果不用我說大家也知道。當然后期也不好維護。

當然也有很多方法能夠避免這種問題,比如命名空間、模塊管理等等。

我們已經知道,在任意代碼片段外部添加包裝函數,可以將內部的變量和函數定義“隱藏”起來,外部作用域無法訪問包裝函數內部的任何內容。雖然這種技術可以解決一些問題,但是它并不理想,因為會導致一些額外的問題。首先,必須聲明一個具名函數,意味著這個函數 的名稱本身“污染”了所在作用域(一般是全局作用域)。其次,必須顯式地通過函數名調用這個函數才能運行其中的代碼。如果函數不需要函數名(或者至少函數名可以不污染所在作用域),并且能夠自動運行,這將會更加理想。

這里我們需要弄清楚一下函數聲明和函數表達式的區別

包裝函數的聲明以(function... 而不僅是以function... 開始。盡管看上去這并不是一個很顯眼的細節,但實際上卻是非常重要的區別。函數會被當作函數表達式而不是一個標準的函數聲明來處理。區分函數聲明和表達式最簡單的方法是看function 關鍵字出現在聲明中的位置(不僅僅是一行代碼,而是整個聲明中的位置)。如果function 是聲明中的第一個詞,那么就是一個函數聲明,否則就是一個函數表達式。函數聲明和函數表達式之間最重要的區別是它們的名稱標識符將會綁定在何處。換句話說,(function foo(){ .. }) 作為函數表達式意味著foo 只能在.. 所代表的位置中被訪問,外部作用域則不行。foo 變量名被隱藏在自身中意味著不會非必要地污染外部作用域

一、匿名函數和具名函數

簡單來說匿名函數就是沒有名字的函數,最大的用處就是回調函數了

var timer=setTimeout(function(){
   console.log(123);
},1000);

因為function().. 沒有名稱標識符。函數表達式可以是匿名的,而函數聲明則不可以省略函數名——在JavaScript 的語法中這是非法的。當然匿名函數還有幾個缺點需要自己衡量下

  1. 匿名函數在棧追蹤中不會顯示出有意義的函數名,使得調試很困難。尤其是代碼量多的時候。

  2. 如果沒有函數名,當函數需要引用自身時只能使用已經過期的arguments.callee 引用,比如在遞歸中。另一個函數需要引用自身的例子,是在事件觸發后事件監聽器需要解綁自身。

  3. 匿名函數的可讀性比較差,因為沒有函數名,沒法直觀的看清匿名函數起到的作用。

所有始終給一個函數表達式命名是最佳實踐(匿名函數具體看需求)。

二、自執行函數

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

還有一種方式也很多人推薦

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

當然啦,這兩種形式在功能上是一致的。選擇哪個全憑個人喜好。

由于函數被包含在一對( ) 括號內部,因此成為了一個表達式,通過在末尾加上另外一個( ) 可以立即執行這個函數,比如(function foo(){ .. })()。第一個( ) 將函數變成表達式,第二個( ) 執行了這個函數。

另一個非常普遍的進階用法是把它們當作函數調用并傳遞參數進去。

例如:

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

我們將window 對象的引用傳遞進去,但將參數命名為global,因此在代碼風格上對全局對象的引用變得比引用一個沒有“全局”字樣的變量更加清晰。當然可以從外部作用域傳遞任何你需要的東西,并將變量命名為任何你覺得合適的名字。這對于改進代碼風格是非常有幫助的。

塊級作用域

首先我們來看個例子,例如

for(var i=0;i<5;i++){
   console.log(i);
}
alert(i);   //5

我們在for 循環的頭部直接定義了變量i,在for{}包含的地方使用了變量i,但是在for{}外部還是可以訪問變量i,從而i 會被綁定在外部作用域(函數或全局)中。同樣道理

var flag=ture;
if(flag){
   var a=1;
   console.log(a);   //1
}
console.log(a)    //a

在if語句里面,我們定義了一個變量a,在if里面能夠訪問,但是在外部還是可能訪問a的。

但是with,它不僅是一個難于理解的結構,同時也是塊作用域的一個例子(塊作用域的一種形式),用with 從對象中創建出的作用域僅在with 聲明中而非外部作用域中有效。

還有就是JavaScript 的ES3 規范中規定try/catch 的catch 分句會創建一個塊作用域,其中聲明的變量僅在catch 內部有效。

try {
    undefined(); // 執行一個非法操作來強制制造一個異常
}
catch (err) {
    console.log( err ); // 能夠正常執行!
}

console.log( err ); // ReferenceError: err not found

到目前為止,我們知道JavaScript 在暴露塊作用域的功能中有一些奇怪的行為。如果僅僅是這樣,那么JavaScript 開發者多年來也就不會將塊作用域當作非常有用的機制來使用了。

目前,ES6 改變了現狀,引入了新的let 關鍵字,提供了除var 以外的另一種變量聲明方式。let 關鍵字可以將變量綁定到所在的任意作用域中(通常是{ .. } 內部)。換句話說,let為其聲明的變量隱式地了所在的塊作用域。

var foo = true;
if (foo) {
    let bar = foo * 2;
bar = something( bar );
    console.log( bar );
}
console.log( bar ); // ReferenceError

用let 將變量附加在一個已經存在的塊作用域上的行為是隱式的。在開發和修改代碼的過程中,如果沒有密切關注哪些塊作用域中有綁定的變量,并且習慣性地移動這些塊或者將其包含在其他的塊中,就會導致代碼變得混亂。

還有一點值得注意的是:只要聲明是有效的,在聲明中的任意位置都可以使用{ .. } 括號來為let 創建一個用于綁定的塊

if (foo) {
{ // <-- 顯式的快
    let bar = foo * 2;
    bar = something( bar );
    console.log( bar );
    }
}
console.log( bar ); // ReferenceError

在這個例子中,我們在if 聲明內部顯式地創建了一個塊,如果需要對其進行重構,整個塊都可以被方便地移動而不會對外部if 聲明的位置和語義產生任何影響。

我們通過自執行函數還可以模擬塊級作用。

(function(){
   //代碼
})()

自執行函數里面的標識符在外面是訪問不到的。

js是ES6之前是沒有塊級作用域的,但是通過一些手段我們可以模擬塊級作用域。
歡迎訪問我的個人網站zhengyepan
學習筆記,歡迎交流探討~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,732評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,214評論 3 426
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,781評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,588評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,315評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,699評論 1 327
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,698評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,882評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,441評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,189評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,388評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,933評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,613評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,023評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,310評論 1 293
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,112評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,334評論 2 377

推薦閱讀更多精彩內容