函數(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ù)還有幾個缺點需要自己衡量下
匿名函數(shù)在棧追蹤中不會顯示出有意義的函數(shù)名,使得調試很困難们拙。尤其是代碼量多的時候稍途。
如果沒有函數(shù)名,當函數(shù)需要引用自身時只能使用已經(jīng)過期的arguments.callee 引用砚婆,比如在遞歸中械拍。另一個函數(shù)需要引用自身的例子,是在事件觸發(fā)后事件監(jiān)聽器需要解綁自身装盯。
匿名函數(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
學習筆記萝究,歡迎交流探討~