Javascript中的閉包 O__O "…

來源:互聯網
上載者:User

標籤:多變數   script   round   而在   技術分享   src   font   blog   line   

一、閉包!?

  閉包(closure)是Javascript語言的一個痛點,對於初學者來說不容易理解,那我們先來看看閉包的含義。

  百度百科與“官方”解釋:所謂“閉包”,指的是一個擁有許多變數和綁定了這些變數的環境的運算式(通常是一個函數),因而這些變數也是該運算式的一部分。

  維基百科:在程式設計語言中,閉包(也稱為詞法閉包或函數閉包)是用於在具有第一類函數的語言中實現詞法範圍名稱綁定的技術。

  然而我們看到這些官方的解釋並不能很清楚的瞭解閉包到底是什麼鬼東西,只會一頭問號,“你在說什嗎?”。 

  其實閉包簡單來講就是能夠讀取函數內部定義的局部變數的函數,而在Javascript中只有函數內部的子函數才能讀取局部變數,所以我們也可以把閉包理解成定義在函數內部的函數。

二、函數的變數

  想要理解閉包,我們就先要瞭解在函數中的變數,這些變數有自己的範圍。什麼是範圍?呐,通常來說,一段程式碼中所用到的名字並不總是有效/可用的,而限定這個名字的可用性的代碼範圍就是這個名字的範圍。

  變數的範圍有兩種,一個是全域,一個是局部,也就是我們所說的全域變數和局部變數。  

var a=50;function fun1(){    alert(a);}fun();

  上面這段代碼中,a在函數外面定義,所以在函數內部調用變數a自然可以讀取它的值。這裡的a我們就叫它全域變數。

function fun2(){    var a=50;}alert(a);

  而在這段代碼中,我們把a定義在函數內部,那麼在函數外部調用a的時候,它會報錯,告訴你“a  is not defined”,我們找不到a啊?我們定義過a嗎?當然定義過啊!只不過它是局部變數而已。

三、如何找到“藏”在函數裡的變數

  在我們敲鍵盤碼代碼的時候,總會有一些原因,需要我們得到函數內部的局部變數,那麼“藏”在函數裡的局部變數我們就需要用一種方法把他提取出來。

  那就是在函數內部,我們再定義一個函數。

function fun3(){    var a=50;    function fun4(){        return a;    }    return fun4();}
//console.log(a); 報錯console.log(fun3());

  在上面這段代碼裡,我們在fun3裡面定義了一個變數a,這樣我們在函數fun3外調用a同樣會報錯找不到它,而對於函數fun3內部的函數fun4來說,a是可以調用的,因外a在函數fun4的外部,反過來fun4內如果定義了一個變數那麼fun3是不可調用的。

  這裡就又涉及到另一個概念,就是鏈式範圍,也就是我們說的範圍鏈。範圍鏈就是相同的變數名會產生範圍鏈,訪問該變數名稱的時候,會首先找本層範圍是否含有該變數,如果沒有就去父層範圍去找,最終找到全域變數為止,如果全域變數也找不到該變數,那麼就會報錯。

  那麼如果想在函數fun3外面調用變數a,就要在函數fun3內部再定義一個函數fun4,我們讓它返回一下他可以調用的變數a,那麼函數fun4的結果就是變數a,那麼我們再返回函數fun4,那麼我們執行函數fun3,得到的結果就是變數a的值。

  簡單來講,就是只要把fun4作為傳回值,我們就可以在fun3外部讀取它的內部變數了。

四、調用局部變數(使用閉包)要注意什嗎?

  1.閉包會使函數裡面的變數被儲存在記憶體中,對於記憶體的消耗非常大,所以不能濫用閉包,否則網頁的效能會降低。

  2.不要隨便改變父函數內部變數的值。

 

 

  最後總結一下,閉包就是能夠讀取其他函數內部變數的函數,能夠讓我們在父級函數外調用父級函數內的變數,有代碼的情況下理解起來其實不難,重要的是在變化莫測的代碼中,閉包具體的應用還是需要我們真正的理解它才可以熟練應用。

 

 

 

 

    

 

Javascript中的閉包 O__O "…

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.