js - 立即执行函数终于看懂了

问题引入：我们写函数，就是为了使我们的代码更加模块化，然后，提高代码的重用。但是，有些函数，从定义到整个函数就运行了一遍。但是这个函数依然存在，就占用了大量的内存。那有没有一种函数，执行完了之后，就不存在了的呢？

 

1、什么是匿名函数

声明一个函数，并马上调用这个匿名函数就叫做立即执行函数；也可以说立即执行函数是一种语法，让你的函数在定义以后立即执行；

立即执行函数的创建步骤，看下图：

 

2、立即函数形式

接下来看立即执行函数的两种常见形式：

//匿名函数包裹在一个括号运算符中，后面跟一个小括号
(function(){
    //...
})()

////匿名函数后面跟一个小括号，整个包裹在一个括号运算符中
(function(){
    //...
}())

()，！，+，-，=等运算符都能起到立即执行的作用，这些运算符的作用就是将匿名函数或函数声明转换为函数表达式。

要注意两点，一是函数体后面要有小括号()，二是函数体必须是函数表达式而不能是函数声明。

(function (test) {    //使用()运算符,输出123
    console.log(test);
})(123);

(function (test) {    //使用()运算符,输出123
    console.log(test);
}(123));

!function (test) {    //使用!运算符,输出123
    console.log(test);
}(123);
var fn = function (test) {  //使用=运算符,输出123
    console.log(test);
}(123);

 

3.立即执行函数好处

1. 不必为函数命名，避免了污染全局变量
2. 立即执行函数内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量
3. 封装变量

总而言之：立即执行函数会形成一个单独的作用域，我们可以封装一些临时变量或者局部变量，避免污染全局变量。以一个面试题为例：

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
  }
}

为什么 alert 的总是 6 呢，因为 i 是贯穿整个作用域的，而不是给每个 li 分配了一个 i，如下：

 

划重点：用户一定是在for运行完了之后，才点击的，此时i为6

 解决方案：

用立即执行函数给每个li创造一个独立作用域即可（当然还有其他办法）：

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

 

3.立即执行函数使用场景

1、你的代码在页面加载完成之后，不得不执行一些设置工作，比如时间处理器，创建对象等等。
2、所有的这些工作只需要执行一次，比如只需要显示一个时间。
3、但是这些代码也需要一些临时的变量，但是初始化过程结束之后，就再也不会被用到，如果将这些变量作为全局变量，不是一个好的注意，我们可以用立即执行函数——去将我们所有的代码包裹在它的局部作用域中，不会让任何变量泄露成全局变量。看如下代码：

如果没有被包裹在立即执行函数中，那么临时变量todaydom,days,today,year,month,date,day,msg都将成为全局变量（初始化代码遗留的产物）。用立即执行函数之后，这些变量都不会在全局变量中存在，以后也不会其他地方使用，有效的避免了污染全局变量。