立即执行函数详解及常见面试题

面试题引发的思考

一道很经典的面试题：

		for(var i = 0; i < 5; i++) {
            setTimeout(function () {
                console.log(i)
            }, 1000)
        }

输出5个5，因为setTimeout为宏任务，此时全局i为5。
其中一个解决办法是将var改为es6的let, 在es5中就得用立即执行函数来解决

立即执行函数

通常有两种写法：

• （function(){})(i)
• （function(){…}(i))
  用立即执行函数来改造上面的代码，让其输出01234

	for(let i = 0; i < 5; i++) {
            setTimeout((function () {
                console.log(i)
            })(i), 1000)
        }

但原理是什么呢？


通过这两个图对比我们可以看到，立即执行函数被推入到宏任务队列后，当开始执行时，立即执行函数有一个作用域，此时存在一个变量就是当时的i，然后就去执行该函数，打印i，在当前函数作用域内没有找到，于是就往父级找，父级为立即执行函数作用域，找到了i，这个关系可以从图中的调用栈信息Call Stack可以看出。