• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

理解 立即执行函数

开发技术 开发技术 5小时前 2次浏览

概念:

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

声明方式:

//第一种:用括号把整个函数定义和调用包裹起来
(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);  
  }
}

应用场景

  • 改变变量作用域;

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

  • 封装临时变量;

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


程序员灯塔
转载请注明原文链接:理解 立即执行函数
喜欢 (0)