IIFE立即执行函式

IIFE（Immediately Invoked Function Expression），是一种「可以立即执行的函式」。

一般的函式长这样：

function doSomething (x){
	//do something
};

doSomething(参数);  //呼叫doSomething，执行程序区块

而立即执行函式长成这个样子：

(function doSomething (x) {
	//do something
})(参数);  //不用呼叫doSomething函式，X带入参数，立即在程序区块中执行

立即执行函式，不透过呼叫函式的方式，浏览器读到函式後面附加的小括号( )，就知道要在函式宣告的当下立即执行。

假设洪七公嘴馋想吃叫化鸡，叫黄蓉马上烤一只叫化鸡来吃：

(function cooking(food){
	console.log(`丫头去弄个${food}来吃吃！！！`);
})('叫化鸡')  //丫头去弄个叫化鸡来吃吃！！！

cooking('东坡肉');  //Uncaught ReferenceError: cooking is not defined

如果在立即执行函式的外面再呼叫一次cooking函式，就会出现「Uncaught ReferenceError: cooking is not defined」。

既然提到了立即执行函式，让我们利用它来解一下面试中常常会出现的考题：

「每次间隔一秒，依次印出0、1、2、3、4」

你会怎麽解呢？直觉应该利用for回圈 + window.setTimeout()来解题：

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

图

结果是直接印出五个5，说好的0、1、2、3、4呢？

还记得前面提过「切分辨数最小范围是function」，所以for回圈和window.setTimeout()是个跑各的。

for回圈是急惊风，而window.setTimeout()是慢郎中，window.setTimeout()刚刚过了一秒去捉外面的i来console.log()的时候，for回圈已经跑完五次，i++变成5，不符合i<5的条件跳出回圈了，所以window.setTimeout()捉回圈的i，每次都捉到5。

那要怎麽解决这个问题呢? 我们可以把window.setTimeout()封装在一个立即执行函式里面，後面的小括号则带入回圈每次跑出来的 i，让 i 把值带入 x 里面丢到 window.setTimeout() 去执行。

for(var i = 0; i < 5; i++){

	(function(x){
		window.setTimeout(function(){
			console.log(x);
		},x*1000);
	})(i);
}

这样就会每隔1秒依序印出0、1、2、3、4了。

当然另外一个更简单的解法则是把for回圈的变数宣告「var i = 0」直接改成「let i = 0」，利用let是以大括号区块为作用域的概念，让for回圈必须与window.setTimeout()一起跑。

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

这样就会间格1秒，依序印出0、1、2、3、4了。