JavaScrip中的立即执行函数

JavaScrip 中 ：立即执行函数 IIFE：immediately-invoked function expression

特点：自动执行、执行完之后销毁

1、立即执行函数基本语法：

以 ( ) [ ] 开头的语句，前⾯的语句必须加分号，否则会解析错误

//第一种写法  两个括号   ()()
(function(){ 
   ...
})();
//第二种写法  一个括号  ()
(function(){ 
    ...
}());

//错误示例：
function(){ 
    ...
}()
           

样例：

(function () {
    console.log('test')
})();

(function test2(params) {
    console.log('test2') 
 }());
           

括号执行的是表达式

函数声明变成表达式的方法如下

（这样就可以直接执行了）

!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){}
new function(){}() // 只有传递参数时，才需要最后那个圆括号
           

2、立即执行函数的作用：

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

一道面试题

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

原因：因为输出的 i 是全局作用域的，当循环结束后 i 的值是 4，所以输出的 i 就是4。

使用立即执行函数来解决这个问题：

var ul = document.getElementById('list')
var liList=ul.getElementsByTagName('li')
for(var i=0; i<4; i++){
    (function (j) {
        liList[j].onclick=function () {
            alert(j)
        }
    })(i)
}
           

JS 中调用函数传递参数都是值传递 ，所以立即执行函数执行时，首先会把 i 复制一份，然后再创建作用于来执行函数。