我猜想可能很多人看到最后这个计数器问题都会感到困惑, 我也一样。

经过代码验证, 发现其中的奥妙在于：

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

注意: 为什么上面这段代码没有直接写的 function add (){...} 而是把function赋值给了变量add呢?

我们通常会想当然的认为每次调用 add() 都会重走一遍add()中的代码块, 但其实不然。

注意add方法中的return, 它return的并不是1,2,3这样的数值,而是return了一个方法,并且把这个方法赋值给了add变量。

那么在这个function自运行一遍之后,其实最后赋值给add的是return counter += 1 这段代码。

所以后面每次调用add() 其实都是在调用return counter += 1。

再结合文章之前所说的, 闭包会持有父方法的局部变量并且不会随父方法销毁而销毁, 所以这个counter其实就是来自于第一次function执行时创建的变量。

我写了一段demo如下

var tempFunc;
var add = (function () {
    var counter = 0;
    tempFunc = function () { return counter += 1; }
    return tempFunc
})();
function myFunction() {
    console.log("add === tempFunc : " + (add === tempFunc))
    document.getElementById("addOneS").innerHTML = add();
}

闭包就是在提供了一个在外部访问另一个函数内部局部变量的方式。

var add = (function(){
    var count = 0;//外部访问的计数器，局部变量.
    var fun = function(){
        return ++count;
    }
    return fun;
})();
    
    //还可以这样写
    var add2 = (function(){
        var count = 0;//外部访问的计数器，局部变量.
        function plus(){
            return ++count;
    }
    return plus;
})();
    
//还可以这样写
var add3 = (function(){
    var count = 0;//外部访问的计数器，局部变量.
    return function(){
        return ++count;
    }
})();

5楼说的太对了，这个 bug 用着真不痛快，针对这个例子写了点代码：

局部变量计数。

<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = new Object();
add.count = 0;
add.plus = function()
{
    this.count++;
}
function myFunction(){
    add.plus();
    document.getElementById("demo").innerHTML = add.count;
}
</script>

尝试一下 »

感觉可以用正常的手段解决这类问题了。

为此举的例子和结论也是错误的。

此技巧是js为其没有“访问修饰符”而创建出“私有属性”。

以包含面向对象编程语言的基本特征“封装性”的很妙的处理方法。

并不是 bug，人人都要会用。

希望能在旁边直接注明。

新手若没看7楼会直接被误导！

想了一个比较奇怪的生动例子:

一个人需要被检查身体（操作私有属性）;

但是不能直接杀人去检查（破坏封装性）;

用了一个检查工具放在它的身体里收集数据（一个公有类，闭包访问私有属性）;

检查完毕把这个工具拿出来获取检查过的数据（在没有破坏封装性的情况，使用这个公有类操纵了私有属性，完成了任务）。

对以上示例的一部分理解:

var add = function () 
{
    var counter = 0;
    alert("父方法"); // 只有在 add 赋值时执行一次
    var add_child = function(id) {
        var counter_res = 0;
        if(id === 1)
        {
            counter_res = counter + 1;
        }
        else if(id === 2)
        {
            counter++;
            counter_res += counter;
        }
        else
        {
          counter_res = 0;
        }
        alert("子方法");  // 每次执行 add() 都会执行
        return counter_res;
    };
    return add_child;
    // counter 作用域在父函数中, 自然在其子函数中也能使用,但因为
    // 子函数还需要使用count, 所以 count 不随着父函数一起释放。
    // 利用在 function(){}() 的形式自动执行一遍父匿名函数, 赋给 add 子方法。
}();

/*
add = function(){}，是一个函数的普通定义方式，
但是 add = function(){}()，会在add定义时即执行一次function(){}，
这样做的目的是为了给function(){}中的变量赋初始值，并将add_child=function(){}这个函数返回给add这个变量。
当以后执行add()这个函数时，其实执行的是add_child=function(){}。
这样做，闭包的目的就在于，你通过add这个对象访问不到counter这个变量，无形中创造了一个私有变量。
*/

add(1);
add(2);
add(2);

尝试一下 »

执行结果：

父方法
子方法 1
子方法 1
子方法 2