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

圖文無關.jpg

函數(shù)作用域

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

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

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

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

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

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

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

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

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

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

這里我們需要弄清楚一下函數(shù)聲明和函數(shù)表達式的區(qū)別

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

一氢卡、匿名函數(shù)和具名函數(shù)

簡單來說匿名函數(shù)就是沒有名字的函數(shù)锈至,最大的用處就是回調函數(shù)了

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

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

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

  2. 如果沒有函數(shù)名,當函數(shù)需要引用自身時只能使用已經(jīng)過期的arguments.callee 引用砚婆,比如在遞歸中械拍。另一個函數(shù)需要引用自身的例子,是在事件觸發(fā)后事件監(jiān)聽器需要解綁自身装盯。

  3. 匿名函數(shù)的可讀性比較差坷虑,因為沒有函數(shù)名,沒法直觀的看清匿名函數(shù)起到的作用埂奈。

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

二、自執(zhí)行函數(shù)

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

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

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

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

例如:

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

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

塊級作用域

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

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

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

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

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

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

還有就是JavaScript 的ES3 規(guī)范中規(guī)定try/catch 的catch 分句會創(chuàng)建一個塊作用域坏为,其中聲明的變量僅在catch 內部有效洒忧。

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

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

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

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

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

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

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

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

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

我們通過自執(zhí)行函數(shù)還可以模擬塊級作用。

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

自執(zhí)行函數(shù)里面的標識符在外面是訪問不到的秉馏。

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末免都,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子帆竹,更是在濱河造成了極大的恐慌绕娘,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件栽连,死亡現(xiàn)場離奇詭異险领,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進店門绢陌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挨下,“玉大人,你說我怎么就攤上這事下面。” “怎么了绩聘?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵沥割,是天一觀的道長。 經(jīng)常有香客問我凿菩,道長机杜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任衅谷,我火速辦了婚禮椒拗,結果婚禮上,老公的妹妹穿的比我還像新娘获黔。我一直安慰自己蚀苛,他們只是感情好,可當我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布玷氏。 她就那樣靜靜地躺著堵未,像睡著了一般。 火紅的嫁衣襯著肌膚如雪盏触。 梳的紋絲不亂的頭發(fā)上渗蟹,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天,我揣著相機與錄音赞辩,去河邊找鬼雌芽。 笑死,一個胖子當著我的面吹牛辨嗽,可吹牛的內容都是我干的世落。 我是一名探鬼主播,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼糟需,長吁一口氣:“原來是場噩夢啊……” “哼岛心!你這毒婦竟也來了?” 一聲冷哼從身側響起篮灼,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤忘古,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后诅诱,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體髓堪,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了干旁。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片驶沼。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖争群,靈堂內的尸體忽然破棺而出回怜,到底是詐尸還是另有隱情,我是刑警寧澤换薄,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布玉雾,位于F島的核電站,受9級特大地震影響轻要,放射性物質發(fā)生泄漏复旬。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一冲泥、第九天 我趴在偏房一處隱蔽的房頂上張望驹碍。 院中可真熱鬧,春花似錦凡恍、人聲如沸志秃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽洽损。三九已至,卻和暖如春革半,著一層夾襖步出監(jiān)牢的瞬間碑定,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工又官, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留延刘,地道東北人。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓六敬,卻偏偏與公主長得像碘赖,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子外构,可洞房花燭夜當晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內容