解析JavaScript模仿塊級作用域
javaScript 沒有塊級作用域的概念。這意味著在塊語句中定義的變量,實際上是在包含函數(shù)中而非語句中創(chuàng)建的,來看下面的例子:
function outputNumbers(count){ for (var i=0; i < count; i++){ alert(i); } alert(i); //計數(shù) }
這個函數(shù)中定義了一個for 循環(huán),而變量i 的初始值被設(shè)置為0。
在Java、C++等語言中,變量i
只會在for 循環(huán)的語句塊中有定義,循環(huán)一旦結(jié)束,變量i 就會被銷毀。可是在JavaScrip 中,變量i
是定義在ouputNumbers()的活動對象中的,因此從它有定義開始,就可以在函數(shù)內(nèi)部隨處訪問它。即
使像下面這樣錯誤地重新聲明同一個變量,也不會改變它的值。
function outputNumbers(count){ for (var i=0; i < count; i++){ alert(i); } var i; //重新聲明變量 alert(i); //計數(shù) }
JavaScript 從來不會告訴你是否多次聲明了同一個變量;遇到這種情況,它只會對后續(xù)的聲明視而不見(不過,它會執(zhí)行后續(xù)聲明中的變量初始化)。匿名函數(shù)可以用來模仿塊級作用域并避免這個問題。
用作塊級作用域(通常稱為私有作用域)的匿名函數(shù)的語法如下所示:
(function(){ //這里是塊級作用域 })();
以上代碼定義并立即調(diào)用了一個匿名函數(shù)。將函數(shù)聲明包含在一對圓括號中,表示它實際上是一個函數(shù)表達式。而緊隨其后的另一對圓括號會立即調(diào)用這個函數(shù)。如果有讀者感覺這種語法不太好理解,可以再看看下面這個例子:
var count = 5; outputNumbers(count);
這里初始化了變量count,將其值設(shè)置為5。當然,這里的變量是沒有必要的,因為可以把值直接傳給函數(shù)。為了讓代碼更簡潔,我們在調(diào)用函數(shù)時用5 來代替變量count,如下所示:
outputNumbers(5);
這樣做之所以可行,是因為變量只不過是值的另一種表現(xiàn)形式,因此用實際的值替換變量沒有問題。
再看下面的例子:
var someFunction = function(){ //這里是塊級作用域 }; someFunction();
這個例子先定義了一個函數(shù),然后立即調(diào)用了它。定義函數(shù)的方式是創(chuàng)建一個匿名函數(shù),并把匿名函數(shù)賦值給變量someFunction。而調(diào)用函數(shù)的方式是在函數(shù)名稱后面添加一對圓括號,即someFunction()。通過前面的例子我們知道,可以使用實際的值來取代變量count,那在這里是不是也可以用函數(shù)的值直接取代函數(shù)名呢? 然而,下面的代碼卻會導(dǎo)致錯誤。
function(){ //這里是塊級作用域 }(); //出錯!
這段代碼會導(dǎo)致語法錯誤,是因為JavaScript 將function 關(guān)鍵字當作一個函數(shù)聲明的開始,而函數(shù)聲明后面不能跟圓括號。然而,函數(shù)表達式的后面可以跟圓括號。要將函數(shù)聲明轉(zhuǎn)換成函數(shù)表達式,只要像下面這樣給它加上一對圓括號即可。
(function(){ //這里是塊級作用域 })();
無論在什么地方,只要臨時需要一些變量,就可以使用私有作用域,例如:
function outputNumbers(count){ (function () { for (var i=0; i < count; i++){ alert(i); } })(); alert(i); //導(dǎo)致一個錯誤! }
在這個重寫后的outputNumbers()函數(shù)中,我們在for 循環(huán)外部插入了一個私有作用域。在匿名函數(shù)中定義的任何變量,都會在執(zhí)行結(jié)束時被銷毀。因此,變量i 只能在循環(huán)中使用,使用后即被銷毀。
而在私有作用域中能夠訪問變量count,是因為這個匿名函數(shù)是一個閉包,它能夠訪問包含作用域中的所有變量。
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
淺析微信小程序modal彈窗關(guān)閉默認會執(zhí)行cancel問題
這篇文章主要介紹了小程序modal彈窗關(guān)閉默認會執(zhí)行cancel方法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10