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

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

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;
    }
})();