立即执行函数

 一、立即执行函数最重要的作用

两个函数中的变量与常量作用域不同，不会报错，是一个独立的作用域

代码演示

        (function () {
            console.log(3)
            const a = 19
            console.log(a)
        })();
        (function () {
            console.log(2)
            const a = 20
            console.log(a)
        })();

 两个立即执行函数均使用了const定义常量

但是不会报错。

当代码越变越多，不会出现应用外部js而导致变量冲突，这便是立即执行函数最重要的优点。

二、立即执行函数的用法

（function（）{}）（）

代码演示:

不使用立即执行函数

function fn(){
    console.log(1);
    //控制台打印一个1 
    }
//调用函数，不然无法打印
fn()

使用立即执行函数

两种写法:1.(function(){})()         2.(function(){}())

推荐使用第一种写法

(function(){
    console.log(2)
})()
//控制台输出2

立即执行函数与普通函数一样，都可以传递参数

(function(x){
    console.log(x)
})(10)
//控制台输出10

注意事项

当有两个立即执行函数在一起的时候会报错,同时当立即执行函数的上方有方法时，也需要在上方加分号

问题演示

            const zi = document.querySelector('.zi')
            console.dir(zi)
            (function () {
                console.log(2)
            })()
            (function () {
                console.log(3)
            })()

必须在两个立即执行函数中加一个分号如下

            const zi = document.querySelector('.zi')
            console.dir(zi);
            (function () {
                console.log(2)
            })();
            (function () {
                console.log(3)
            })();

 在三个函数中都加上分号，用于区分两个函数。