[譯]Javascript中閉包的各種例子

標籤：div   按鈕   http   var   col   問題   運行   而且   初始化   

本文翻譯youtube上的up主kudvenkat的javascript tutorial播放單

源地址在此:

https://www.youtube.com/watch?v=PMsVM7rjupU&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b

在本次的視頻中我們將討論一個簡單的Javascript閉包例子.每次我們點擊頁面上的按鈕的時候,我們都想要點擊計數增加1.為了達到這個目的,我們有很多中途徑.

 

首先我們可用一個全域變數,然後每次我們點擊按鈕後,這個變數增加1:這個方法的問題在於,因為clickCount是一個全域變數,那麼頁面上的任何指令碼都有可能不經意間改變這個變數的值

<script type="text/javascript">    var clickCount = 0;</script><input type="button" value="Click Me" onclick="alert(++clickCount);" />

 

第二個方法是:用一個函數中的本地變數來實現,每次我們點擊按鈕後,我們呼出函數並且增加其本地變數的值.這個方法的問題在於,無論你點擊按鈕幾次,clickCount的值都不會超過1.

<script type="text/javascript">    function incrementClickCount()     {        var clickCount = 0;        return ++clickCount;    }</script><input type="button" value="Click Me" onclick="alert(incrementClickCount());" />

 

那麼第三種方法就是使用Javascript 閉包了,一個閉包就是在一個外部函數中的內建函式,而且這個內建函式可以用外部函數的變數,自己內部的變數,甚至全域變數.簡單的來說,閉包就是函數中的函數,這些外部函數和內建函式可以是有名函數,也可以是匿名函數.在以下的例子中我們用一個在匿名函數中的匿名函數來實現.變數incrementClickCount被賦予返回的自我啟用匿名函數值.

<script type="text/javascript">    var incrementClickCount = (function ()     {        var clickCount = 0;        return function ()         {            return ++clickCount;        }    })();</script><input type="button" value="Click Me" onclick="alert(incrementClickCount);" />

在以上的例子中,在alert函數中,我們呼出不帶小括弧的變數incrementClickCount.這時,當你點擊按鈕的時候,你會在alert中得到內部匿名函數運算式.那麼這個時候,我們想要證明一件事:那就是,外部的自我啟用匿名函數僅僅只會運行一次,並且初始化clickCount變數為0,然後返回內建函式運算式.因為內建函式能夠擷取clickCount變數,那麼每次我們點擊按鈕後,內建函式會增加clickCount變數的值.最重要的一點在於,在頁面上,沒有其他的指令碼可以觸及到clickCount變數,要改變clickCount的變數值,唯有通過incrementClickCount函數才能做到,

<script type="text/javascript">    var incrementClickCount = (function ()     {        var clickCount = 0;        return function ()         {            return ++clickCount;        }    })();</script><input type="button" value="Click Me" onclick="alert(incrementClickCount());" />

 

[譯]Javascript中閉包的各種例子