JS函数之---立即执行函数（IIFE）

一、什么是立即执行函数

Immediately-Invoked Function Expression(IIFE立即执行函数表达式)
可以让函数在创建后立即执行必须是一个表达式

二、了解函数声明以及函数表达式

1、函数的定义方式一: 函数声明

function fun1() {
      alert("我是函数声明")
    }
fun1();

2、函数的定义方式二: 函数表达式(匿名函数表达式、命名函数表达式)

 //(1)命名函数表达式
    let name1 = function fun2() {
      alert("我是命名函数表达式")
    }
    name1();

  //(2)匿名函数表达式
 let name2 = function () {
      alert("我是匿名函数表达式")
      return '我是匿名函数表达式'
    }
    name2();

三、立即执行函数怎么写？

1、错误写法直接报错 js引擎看到function关键字会认定后面跟的是函数定义语句，此时后面如果直接加上()会被当做分组操作符，而分组操作符必须有表达式,所以此时报错

//错误的写法 以圆括号开头。js引擎会认为后面跟的是一个表达式，而不是函数定义
 function() {
      alert('我认为立即函数应该这样写')
    }()

2、立即执行函数的正确写法,让js引擎认为这是一个表达式

  //(1)第一种写法
    (function () {
      console.log("我是立即执行函数的第一种写法")
    })();

    //(2)第二种写法
    (function () {
      console.log("我是立即执行函数的第二种写法")
    }())
    //其他可以让js引擎认为是一个表达式的方法 
    ! function () {
      alert('前面添加! 使之成为表达式')
    }();

    +function () {
      alert('前面添加+ 使之成为表达式')
    }();

    -function () {
      alert('前面添加- 使之成为表达式')
    }();

    ~ function () {
      alert('前面添加~ 使之成为表达式')
    }();

四、立即执行函数的作用---避免变量污染

1、立即执行函数不能再外面再被调用，执行完之后已经被立即销毁了。所以立即执行函数的函数名称可以省略，统一使用匿名函数表达式

2、由于立即执行函数，执行完后就立即被销毁了所以它可以创建一个独立的作用域，而且该作用域里面的变量，外面访问不到。因此就可以避免变量污染

  let item = document.getElementById("item")
    for (var i = 0; i < 6; i++) {
      item.onclick = function () {
        alert(i) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
      }
    }
//因为输出的i是全局作用域的，当循环结束时，i的值还是6，所以每次点击触发函数时，最终的结果都是6

正确输出写法：用立即执行函数将i作为参数传入，立即函数每次执行时，会把参数i的值复制一份。然后再创建函数作用域来执行函数

    //循环5次会创建5个作用域，所以每个i都是在不同作用域下的值
    let item2 = document.getElementById("item")
    for (var i = 0; i < 6; i++) {
      (function (j) {
        item.onclick = function () {
          alert(j)
        }
      }(i))
    }

五、立即执行函数与闭包的关系

1、立即执行函数和闭包只是有一个共同有点就是都能减少全局变量的使用
2、立即执行函数只是函数的一种调用方式，声明完后立即调用，一般只能调用一次，调用完后会立即被销毁，不会占用内存，有自己的独立作用域，外部不能调用
3、闭包则主要是让外部函数可以访问内部函数的作用域，也减少了全局变量的使用，保证了内部变量的安全，但是被引用的内部变量不会被销毁，增大了内存消耗，使用不当会容易造成内存泄露
可参考：https://www.cnblogs.com/wenxuehai/p/10357274.html