作用域与立即执行函数

2022-08-30 14:02:27 阅读：189 来源： 互联网

应用场景：

改变变量作用域；

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

封装临时变量；

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

概念：

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

声明方式：

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

标签：function,函数,作用域,list,li,立即,var
来源： https://www.cnblogs.com/qingshuihongye/p/16639051.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

作用域与立即执行函数