本文翻譯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中閉包的各種例子