其他分享
首页 > 其他分享> > 理解 立即执行函数

理解 立即执行函数

作者:互联网

概念:

声明一个函数,并马上调用这个匿名函数就叫做立即执行函数。

声明方式:

//第一种:用括号把整个函数定义和调用包裹起来
(function(){
 //function body
}())

//第二种:用括号把函数定义包裹起来,后面再加括号
(function (){
 //function 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() {    
    console.log(i); // 结果总是3.而不是0,1,2                      
  }
}
</script>

解析:因为i是贯穿整个作用域的,而不是给每一个li分配一个i,点击事件使异步,用户一定是在for运行完了以后,才点击,此时i已经变成3了。

那么该如何解决这个问题:

// 使用立即执行函数 var list = document.getElementById("list"); var li = list.children; for (var i = 0; i < li.length; i++) {     (function(j) {         li[j].onclick = function() {             console.log(j);         }     })(i) }

如果立即执行函数中需要全局变量,全局变量会被作为一个参数传递给立即执行函数(上例中的i就是一个全局变量,i代表的是实参,j是i在立即执行函数中的形参)。

// 或者使用ES6的块级作用域 var list = document.getElementById("list"); var li = list.children; for (let i = 0; i < li.length; i++) {     li[i].onclick = function() {         console.log(i);     } }

应用场景:

  上述代码就是改变变量作用域,一个很好的例子。

  加载只需要执行一次的代码,比如显示时间。这些代码也需要一些临时的变量,但是初始化过程结束之后,就再也不会被用到。这些变量不适合作为全局变量,产生初始化代码遗留。可以用立即执行函数将所有的代码包裹在它的局部作用域中,这些变量都不会在全局变量中存在,以后也不会其他地方使用,有效的避免了污染全局变量。

标签:函数,作用域,list,li,立即,理解,var,全局变量
来源: https://www.cnblogs.com/HuiTaiLang1216/p/15394225.html