跳到主要内容

JS 中的立即执行函数

前面看到 !function(){}() 不知道是什么意思，后来查了一下叫做立即执行函数。

什么是立即执行函数​

声明一个函数并立即执行
例如:

;(function () {
  alert(`123`)
})()

立即执行函数写法​

;(function () {
  alert('我是匿名函数')
})()(
  //用括号把整个表达式包起来
  function () {
    alert('我是匿名函数')
  }
)() //用括号把函数包起来
!(function () {
  alert('我是匿名函数')
})() + //求反，我们不在意值是多少，只想通过语法检查
  (function () {
    alert('我是匿名函数')
  })() -
  (function () {
    alert('我是匿名函数')
  })()
~(function () {
  alert('我是匿名函数')
})()
void (function () {
  alert('我是匿名函数')
})()
new (function () {
  alert('我是匿名函数')
})()

立即执行函数作用​

立即执行函数会单独创建一个作用域，可以封装临时变量或局部变量，避免全局污染

例 1​

<body>
    <ul id="list">
        <li>公司简介</li>
        <li>联系我们</li>
        <li>营销网络</li>
    </ul>
    <script>
        var list = document.getElementById("list");
        var li = list.children;
        for(var i = 0 ;i<li.length;i++){
            li[i].onclick=function(){
                alert(i);  // 结果总是3.而不是0，1，2
            }
        }
    </script>
</body>

在循环中，i 是一个全局变量，每次 i 会加 1，当循环执行完成后，i 的值为 3；而点击事件会在循环后执行，所以 li 的点击总会 alert 3。
如果要避免这种问题，需要对每次循环做一次封装，创建一个单独作用域

for (var i = 0; i < li.length; i++) {
  ;(function (j) {
    li[j].onclick = function () {
      alert(j)
    }
  })(i) // i 的值传给函数
}

在 ES6 中，有可以用 let 来避免上述情况

for (let i = 0; i < li.length; i++) {
  alert(i)
}

例 2​

在页面加载完成后需要进行一些设置，这些工作只执行一次，而里面需要设置的一些变量只使用一次，这时候就用到了立即执行函数

以上内容摘自简书: 什么是立即执行函数，它有什么作用？