js中的立即执行函数

最新推荐文章于 2024-03-29 10:57:07 发布

安萌萌萌萌萌

最新推荐文章于 2024-03-29 10:57:07 发布

阅读量243

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_43981560/article/details/108071975

版权

前端专栏收录该内容

21 篇文章

订阅专栏

1、什么是立即执行函数？

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

2、立即执行函数的形式

(function (){
	//code
})()

3、立即执行函数的优点

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

案例：

<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</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>

如上图所示，alert输出总是3，这是因为i是贯穿整个作用域的，而不是给每一个li分配一个i,点击事件使异步，用户一定是在for运行完了以后，才点击，此时i已经变成3了。

那如何解决上述问题？

可以用立即执行函数，这样会给每个li创建一个独立的作用域，函数执行时i的值从0到2，对应三个立即执行函数

      for(var i = 0 ;i<li.length;i++){
       ( function(j){
            li[j].onclick = function(){
              alert(j);
          })(i); 把实参i赋值给形参j
        }
      }

使用ES6的块级作用域 let来解决

      for(let i = 0 ;i<li.length;i++){
        li[i].onclick=function(){
          alert(i);  // 结果是0，1，2
        }
      }