JavaScript.The.Good.Parts閱讀筆記（二）作用域&閉包&減緩全局空間污染

更新時間：2010年11月16日 22:44:22 作者：

塊級作用域: 大多數(shù)使用c語言語法的語言都有塊級作用域，而JavaScript沒有塊級作用域。

如代碼塊

 
if (true) { 
int i = 100; 
} 
print(i); //錯誤，變量i沒有聲明 

如上面例子所示，代碼塊外的函數(shù)是無法訪問i變量的。
但在javaScript里，情況則完全不同。

復制代碼代碼如下:

 
if (true) { 
var i = 100; 
} 
alert(i); //彈出框并顯示100 

很多現(xiàn)代語言都推薦盡可能遲地聲明變量，但在Javascript里這是一個最糟糕的建議。由于缺少塊級作用域，最好在函數(shù)體的頂部聲明函數(shù)中可能用到的所有變量。

閉包特性：
雖然缺少塊級作用域，但是函數(shù)的作用域還是存在的。
這種作用域有一個好處，就是內部函數(shù)可以訪問定義它們的外部函數(shù)的參數(shù)和變量（除了this和argument）。
利用這種特性，則可以這樣來設計代碼。

復制代碼代碼如下:

 

var bankAccount = function () { 
var value = 0; 
return { 
deposit: function (inc) { 
value += inc; 
}, 
getValue: function (){ 
return value; 
} 
} 
} 


var myAccount = bankAccount(); //新開一個銀行賬戶 
myAccount.deposit(1000); //存1000塊進去 
alert(myAccount.getValue()); //should alert(1000); 

value由于在bankAccount這個function里，外部無法對它進行直接操作，必須通過bankAccount function給他返回的對象來進行操作，通過這樣來實現(xiàn)C#和java里的private的字段。

減緩全局變量污染全局空間：利用函數(shù)的作用域，我們在寫js庫的時候可以減少跟其他庫沖突。

復制代碼代碼如下:

 
(function () { 
var hello = 'Hello World.'; 
})(); 
alert(hello); //error: hello no exist. 

這里的語法很有點詭異，主要思想是定義一個匿名方法，并且馬上執(zhí)行。由于function開頭這個litertal會被解釋作為函數(shù)定義，這里加上了一對括號包住它，然后再用一對括號表示調用此函數(shù)。外部的alert訪問不到在函數(shù)內部定義的hello。

陷阱一：var的陷阱

“減緩全局變量污染全局空間”的例子改成

復制代碼代碼如下:

 
(function () { 
hello = 'Hello World.'; //remove var 
})(); 
alert(hello); //alert ('Hello World.'); 

當變量hello沒有用var顯式聲明時，hello成為了一個全局變量！！

雖然利用這個特性，咱們可以提供一個對外接口，但不建議這樣做。

復制代碼代碼如下:

 
(function () { 
var hello = 'Hello World.'; 
sayHello = function () { //不建議采用這種方式來提供接口，看起來很不明顯。 
alert(hello); 
} 
})(); 
sayHello(); 

可以改進為

復制代碼代碼如下:

 
(function (window) { 
var hello = 'Hello World.'; 
window.$ = { 
sayHello: function () { 
alert(hello); 
} 
}; 
})(window); 
$.sayHello(); //看起來像jQuery那么酷 

或

復制代碼代碼如下:

 
var obj = (function () { 
var hello = 'Hello World.'; 
return { 
sayHello: function () { 
alert(hello); 
} 
}; 
})(); 
obj.sayHello(); 

陷阱二：閉包的陷阱

復制代碼代碼如下:

 
(function () { //函數(shù)a 
var arr = []; 
　 var i = 0; 
var j; 
for ( ; i < 3; i++) { 
arr.push(function () { //函數(shù)b 
alert(i * 10); 
}); 
} 


for (j in arr) { 
arr[j](); 
} 
})(); 

原以為函數(shù)數(shù)組arr里各個函數(shù)執(zhí)行后，會彈出0,10,20，但是結果不是如此。結果是彈出30,30,30。
函數(shù)b訪問的不是當時的 i的值, 而是直接訪問變量i(用于都是取i最新的值)。
原因是函數(shù)b是函數(shù)a的內部函數(shù)，變量i對函數(shù)b是可見的，函數(shù)b每次都從i處獲取最新的值。

這次改成：

復制代碼代碼如下:

 
(function () { //函數(shù)a 
var arr = []; 
var i = 0; 
　 var j; 
for ( ; i < 3; i++) { 
arr.push((function (anotherI) { //函數(shù)m 
return function () { //函數(shù)b 
alert(anotherI * 10); 
} 
})(i)); // 此處為(function b(anotherI) {})(i) 
} 


for (j in arr) { 
arr[j](); 
} 
})(); 

這次執(zhí)行后，終于彈出0,10,20。這是為什么呢。

函數(shù)b訪問的是anotherI(當時的i的值)，而不是直接訪問變量i。
每次在arr.push前，都會定義一個新匿名的函數(shù)m。本例中定義了3個匿名函數(shù)m0,m1,m2，每當被調用后，他們的anotherI都得到當前i的值。每個m函數(shù)執(zhí)行后都返回一個b函數(shù)。b0在m0里，b1在m1里，b2在m2里。b0只能訪問m0的anotherI（為0），而b0訪問不了m1的anotherI，因為m0和m1為不同的函數(shù)。

您可能感興趣的文章:

JavaScript中Function詳解
函數(shù)是由關鍵字function、函數(shù)名加一組參數(shù)及置于大括號中需要執(zhí)行的一段語義定義的。今天我們就來詳細講解一下JavaScript中的Function。
2015-02-02
javascript連續(xù)賦值問題
本文通過具體的示例來給大家詳細解釋了下javascript的連續(xù)賦值問題，十分的實用，有需要的小伙伴可以參考下。
2015-07-07
微信小程序文章詳情功能完整實例
這篇文章主要介紹了微信小程序文章詳情功能,結合完整實例形式詳細分析了微信小程序文章詳情功能具體步驟、原理及功能實現(xiàn)技巧,需要的朋友可以參考下
2020-06-06
以JavaScript來實現(xiàn)WordPress中的二級導航菜單的方法
這篇文章主要介紹了以JavaScript來實現(xiàn)WordPress中的二級導航菜單的方法,文中首先對WordPress基本的PHP導航菜單的做法給出了說明來作為基礎,需要的朋友可以參考下
2015-12-12
js調用刷新界面的幾種方式
這篇文章主要為大家詳細介紹了js調用刷新界面的幾種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
JavaScript 上萬關鍵字瞬間匹配實現(xiàn)代碼
發(fā)一篇之前寫的文章，平時還是經常用到的，尤其是河蟹詞特別多的聊天系統(tǒng)里
2013-07-07
countUp.js實現(xiàn)數(shù)字滾動效果
這篇文章主要為大家詳細介紹了countUp.js實現(xiàn)數(shù)字滾動效果,文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
JavaScript中遍歷對象的property的3種方法介紹
這篇文章主要介紹了JavaScript中遍歷對象的property的3種方法介紹,本文先是講解了3種方法并用一張圖片加深理解,然后給出代碼實例,需要的朋友可以參考下
2014-12-12
javascript實現(xiàn)簡單的全選和反選功能
這篇文章主要介紹了javascript實現(xiàn)簡單的全選和反選功能的相關資料,需要的朋友可以參考下
2016-01-01
詳解JS 比較兩個Json對象的值是否相等的實例
這篇文章主要介紹了JS 比較兩個Json對象的值是否相等的實例，有需要的朋友可以參考一下
2013-11-11