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

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

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

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

}