函數作用域
從之前我們討論的作用域是負責聲明并維護由所有聲明的標識符(變量)組成一系列查詢,并實施一套非常嚴格的規則,確定當前執行的代碼對這些標識符的訪問權限。作用域包含著一系列的規則。很多函數嵌套的時候,最里面的函數的作用域包含著對外層函數作用域的引用,這些引用包含著對標識符(變量、函數)的定義。
我們知道。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 的語法中這是非法的。當然匿名函數還有幾個缺點需要自己衡量下
匿名函數在棧追蹤中不會顯示出有意義的函數名,使得調試很困難。尤其是代碼量多的時候。
如果沒有函數名,當函數需要引用自身時只能使用已經過期的arguments.callee 引用,比如在遞歸中。另一個函數需要引用自身的例子,是在事件觸發后事件監聽器需要解綁自身。
匿名函數的可讀性比較差,因為沒有函數名,沒法直觀的看清匿名函數起到的作用。
所有始終給一個函數表達式命名是最佳實踐(匿名函數具體看需求)。
二、自執行函數
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
學習筆記,歡迎交流探討~