javascript - js 中的回调函数和匿名函数的疑问？

Question

最近在看js匿名函数相关，以下代码的执行过程有些不解，请教大家执行过程是怎样的。

var func = function(){}

for (var i = 3; i >= 0; i--) {
    func = function(cb, num){
        return function (){
                    console.log(num)
                    cb()
                }
    }(func, i)
}

func()

以上代码执行结果是

0
1
2
3

请教下，cb既然是func，为何没有死循环？
以及整体代码执行过程中都发生了什么。感谢大家！

Answer 1

把for()的四次循环展开其实会好理解一点。
变成如下代码：

func = function(cb, num){
        return function (){
                    console.log(num)
                    cb()
                }
    }(func, 3)
func = function(cb, num){
    return function (){
                console.log(num)
                cb()
            }
}(func, 2)
func = function(cb, num){
    return function (){
                console.log(num)
                cb()
            }
}(func, 1)
func = function(cb, num){
    return function (){
                console.log(num)
                cb()
            }
}(func, 0)

实际上循环是对func进行了四次赋值，你的输出结果中的0是

console.log(num)

的输出结果，而之后的1，2，3则是

cb()

的输出结果。
为什么cb()是func()却会输出1，2，3呢？是因为在上一次的赋值里
func()输出的是1,2,3 所以在一次的赋值中cb()输出1,2,3 在这之前，console.log()输出0。
这样就是为什么会输出0,1,2,3的结果的原因了。

Answer 2

首先，for 循环里到底执行了什么步骤？

1. 将匿名函数 function(cb, num) {return function(){console.log(num); cb();}}(func, i) 赋值给变量 func;

2. 执行变量 func;

3. 准备下一次循环.

问题来了, 步骤 2 的执行的结果是什么?
是一个新的匿名函数:

function() {
    console.log(num);// 这里因为闭包的存在, 保持了 num 值, 即 i
    cb();
}

但是这个函数并没有执行。

每一次循环, func 都被赋值一个新的函数, 当循环结束时, func 的值为:

function() {
    console.log(num);// 闭包将 num 保持为最后的 i ＝ 0
    cb();
}

将上面的 cb() 全部拆开, 可以得到更直观的 func 的值:

function() {
    console.log(num);// 0
    console.log(num);// 1 
    console.log(num);// 2
    console.log(num);// 3
    {};
}

所以输出的结果就是

0
1
2
3

了。