JavaScript 之 立即执行函数

1、定义

​ 声明一个函数，并立即调用这个函数，此时这个函数就是立即执行函数，简单来说就是定义函数之后立即执行该函数。立即执行函数一般也写成匿名函数的形式，匿名函数写法为 function(){}，就是使用function关键字声明一个函数，但是未命名的函数。关于匿名函数有一点要注意的是：匿名函数不能单独使用，否则会报错，至少需要用 () 包裹起来。

2、作用

​ ① 不需要为函数命名，避免污染全局变量。

​ ② 创建一个独立作用域，这个作用域里面的变量，外部访问不到，避免变量污染。

​ ③ 闭包和私有数据

3、使用场景

​ ① 在页面加载完成后，需要立即执行的一些初始化设置，例如时间处理，创建对象等。

​ ② 一些只需要执行一次的代码，代码中的某些变量在执行结束后，再也不会被用到，我们就不适合用全局变量，可能会变量污染，此时更适合用立即执行函数。

4、语法

// 立即执行函数的两种写法

// 第一种：用括号把整个函数定义和括号调用包裹起来
(function(){
 // 函数体
}())

// 第二种：用括号把函数定义包裹起来，后面再加括号调用
(function (){
 // 函数体
})()

// 注意：之所以要用圆括号包裹，是因为在浏览器的JS引擎规定，如果function出现在行首，一律解析成语句，
// 而此时我们希望JS引擎将其理解为一个表达式，圆括号的包裹就是起这个作用的。

5、常见写法

// 普通函数形式
function foo(){console.log("Hello World!")}()//声明函数后加()会报错
(function foo(){console.log("Hello World!")}())//用括号把整个表达式包起来,正常执行
(function foo(){console.log("Hello World!")})()//用括号把函数包起来，正常执行
!function foo(){console.log("Hello World!")}()//使用！，求反，这里只想通过语法检查。
+function foo(){console.log("Hello World!")}()//使用+，正常执行，这里只想通过语法检查。
-function foo(){console.log("Hello World!")}()//使用-，正常执行，这里只想通过语法检查。
~function foo(){console.log("Hello World!")}()//使用~，正常执行，这里只想通过语法检查。
void function foo(){console.log("Hello World!")}()//使用void，正常执行，这里只想通过语法检查。
new function foo(){console.log("Hello World!")}()//使用new，正常执行，这里只想通过语法检查。

// 匿名函数形式
(function(){console.log("我是匿名函数。")}())
(function(){console.log("我是匿名函数。")})()
!function(){console.log("我是匿名函数。")}()
+function(){console.log("我是匿名函数。")}()
-function(){console.log("我是匿名函数。")}()
~function(){console.log("我是匿名函数。")}()
void function(){console.log("我是匿名函数。")}()
new function(){console.log("我是匿名函数。")}()

6、参数传递

// 如果立即执行函数中需要用到外部变量，我们可以通过参数传递的方式，在函数内部使用
// 形参就是传递进来的外部变量，进入立即执行函数独立的作用域，不再受外部变量的影响

(function(j){
    // 使用外部变量
	console.log(j)
})(i)

7、返回值

// 跟其他函数一样，可以返回任何类型的值
// 可通过返回值实现闭包

var result = (function(){
    var num = 666;
    reutrn function() {
        return num;
    }
})()
// 由于返回值是一个函数 所以通过 () 进行调用
console.log(result())

8、常见面试题

// 1.普通流程
for(var i=0;i<3;i++) {
    setTimeout(function() {
        console.log(i)
    },300)// 输出结果为 3 3 3
}

// 2.立即执行函数
for(var i=0;i<3;i++) {
	(function (j){
		setTimeout(function (){
			console.log(j)
		},300) // 输出结果为 0 1 2
	})(i)
}

// 3.let 块级作用域
for(let i=0;i<3;i++) {
    setTimeout(function() {
        console.log(i)
    },300)// 输出结果为 0 1 2
}

​ 第一段代码中 setTimeout 定时器属于异步操作，它是在 for 循环执行完之后，才执行的，因为 i 是var 声明的，作用域贯穿于整个函数作用域，所以当执行setTimeout时，i 已经通过for循环变成了 3 ，所以输出结果为：3 3 3。

​ 第二段代码中使用了立即执行函数，使每次for循环都创建了一个独立作用域，并把每次循环 i 的值，传递进独立作用域，不受外界影响，所以输出结果为 ：0 1 2。

​ 第三段代码中使用了 ES6 的 let ，使每次for循环都创建了一个块级作用域，不同作用域之间不影响，所以输出结果为： 0 1 2。