立即调用函数（IIFE）

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。

什么是立即调用函数？

顾名思义，就是在创建函数后立即调用的函数。

JavaScript高级程序中定义：立即调用的匿名函数又被称作立即调用的函数表达式(IIFE，Immediately Invoked Function Expression)

立即调用的函数通常是匿名函数，要非给他加名字也可以，只不过他立即执行一次，完全没必要多此一举。

写法

函数被包裹在括号里，被当做函数表达式，后面再紧跟一组括号会立即调用它前面的函数表达式。

// 第一种写法
(function(){
    console.log('巴拉巴拉')
})(); // 巴拉巴拉

// 第二种写法
(function(){
    console.log('巴拉巴拉')
}()); // 巴拉巴拉

为什么要有IIFE?

IIFE最大的好处就是可以一块独立的作用域，避免污染全局变量，实现模块化封装。

应用

1、解决循环陷阱

一个经典问题，相信大家都见过

for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i)
    }, 1000)
}
// 5次都是输出的 6 

在es6之前，可以使用立即调用函数模拟块作用域，函数是值传递，把参数复制给内部使用，相互独立不会影响。

for(var i = 0; i < 5; i++) {
    (function(v){
        setTimeout(function() {
            console.log(v)
        }, 1000)
    })(i) 
}
// 0
// 1
// 2
// 3
// 4

es6新增了块作用域后，无需IIFE也可以实现同样的变量隔离了。

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

2. 结合闭包应用

立即调用函数本身跟闭包没有关系，他只是函数调用的一种方式。但结合闭包一起使用会有更强的作用（勾肩搭背的好兄弟）

惰性函数

惰性函数表示函数执行的分支只会在函数第一次掉用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了。

var calcu = (function(){
    var x = null;
    return function(n) {    
        if (!x) {        
            x = n*2;     
        }     
        return x; 
    }
})()
calcu(123)

类库封装

看过jQuery的应该都是知道；jQuery开篇用的就是立即调用函数，使用它的好处就是可以隔离作用域，避免变量污染

;(function ( $, window, document, undefined ){

//函数体内具体代码

})(jQuery, window,document);

立即调用的函数表达式如果不在包含作用域中将返回值赋给一个变量，则其包含的所有变量都会被销毁