[译]Javascript中闭包的各种例子

本文翻译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());" />