js立即执行函数理解

通过立即函数可以创建一个独立的作用域。这个作用域中的变量，外面访问不到。比如你参与了一个多人协作一起开发的项目，你定义的一些变量，不小心被别人同名的变量给覆盖掉了，这样就可以使用这个立即执行函数来整一个自己的私用作用域，防止与外部的变量的发生冲突。比如jquery框架就是如此，防止jquery创建的变量与导入它的程序所使用的变量发生冲突。

有一道著名的题目:

var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
 liList[i].onclick = function(){
   alert(i) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
 }
}

可以使用立即执行函数创建独立作用域来解决

var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  !function(j){
    liList[j].onclick = function(){
      alert(j) // 0、1、2、3、4、5
    }
  }(i)
}

接下来，我们来看看下立即执行函数是如何进行使用的。

一、普通函数

1、比如我们常见的函数声明

function cat(){
  var age=45;
 console.log("this is cat");
}

2、匿名函数表达式（赋值给一个变量）

var animal = function(){
  var age=45;
  console.log("this is cat");
}

以上就是我们常见的函数声明和使用

二、立即执行函数

立即函数常见形式如下:

( function(){…} )()

和

( function (){…} () )

如下代码执行

<script>
    (function (a) {
        age = 111;
        console.log(a);
        console.log(age);
    })(1234)
</script>

则如下输出

image.png

注意：这不算是函数声明，所谓立即，就是可以立即执行的意思，里面的函数表达式可以立即被javascript引擎所执行
我们再来看看其他立即执行函数的用法，如下

测试
<script>
    (function (num) {
        age = 111;
        console.log(num);
    })(1234)
    console.log("-------1111--------");
    (function (num) {
        age = 111;
        console.log(num);
    }(1234))
    console.log("-------2222--------");

    !function (num) {
        console.log(num);
    }(1234)
    console.log("-------3333--------");
    +function (num) {
        console.log(num);
    }(1234)
    console.log("-------4444--------");
    -function (num) {
        console.log(num);
    }(1234)
    console.log("-------5555--------");
    var test = function (num) {
        console.log(num);
    }(1234)
</script>

输出如下

image.png

这些!、+、-、=等运算符都能让它们起到立即执行的作用，使函数声明直接转换成了函数表达式，帮助javascript引擎识别它们，告诉引擎，这些是函数表达式，不是函数声明。