关于自执行函数（立即执行函数）(2017.04.26)

[aermin]

什么是自执行函数？

一下有三种写法

1.最前最后加括号

(function(){alert(1);}()); 

这种方法好处是能提醒阅读代码的人，这段代码是一个整体。 坏处是前面的代码行后记得加分号，不然会报错。如：

var a=1 
(function(){alert(1);}()); 

2.function外面加括号

(function(){alert(1);})(); 

这种做法比方法1少了一个代码整体性的好处.

3.function前面加运算符，常见的是!与void 。

!function(){alert(1);}(); 
void function(){alert(2);}();

显然，加上“!”或“+”等运算符，写起来是最简单的。加上“void ”要敲五下键盘，但是听说有一个好处是，比加"!"少一次逻辑运算。

• 首先声明一个匿名函数 function(){alert('我是匿名函数')}。
• 然后在匿名函数后面接一对括号 ()，调用这个匿名函数。

自执行函数的作用

创建一个独立的作用域，这个作用域里面的变量，外面访问不到（即避免「变量污染」）

例子来看一个著名的面试题：

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,如下：

那么怎么解决这个问题呢？

用立即执行函数给每个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)
}

在立即执行函数执行的时候，i 的值被赋值给 ii，此后 ii 的值一直不变。i 的值从 0 变化到 5，对应 6 个立即执行函数，这 6 个立即执行函数里面的 ii 「分别」是 0、1、2、3、4、5。

(整理自网络)