立即执行函数
1.立即执行函数是什么?
定义一个匿名函数并且当场执行
浏览器检测到function的开头会认为在进行函数定义,如果以圆括号结尾就会报错像下方的【C】,所以我们要将函数括起来,括号的添加方式可以有【A】【B】两种。另外可以看到写法【A】的匿名函数后还有一对括号,该括号的功能就是调用此匿名函数
//【A】
(function(){
alert("羊卓的杨");
})();
//【B】
(function(){
alert("羊卓的杨");
}());
//【C】
function(){}();
2.立即执行函数有什么用?
创建了一个独立的作用域,在这个作用域里的变量不会和全局冲突。
从下面的例子就可以分析出:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello</title>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<ul id="list">
<li>公司简介</li>
<li>联系我们</li>
<li>营销网络</li>
<li>羊卓111</li>
<li>杨卓666</li>
<li>杨卓000</li>
</ul>
<script>
var list = document.getElementById("list");
var li = list.children;
//写法1
for (var i = 0; i < li.length; i++) {
li[i].onclick = function () {
alert(i);
}
}
//写法2
for (var i = 0; i < li.length; i++) {
!function (n) {
li[n].onclick = function () {
alert(n) // 0、1、2、3、4、5
}
}(i)
}
</script>
</body>
</html>
在这个例子中想要实现输出0、1、2、3、4、5。如果是第一种写法的话会一直输出6,第二种写法才能够正常的输出。这是为什么呢?
因为写法1的i不是function()作用域内的,所以在for循环结束之后i的值已变为6,这个时候当我们去点击的时候触发事件读取的i是当前的6,而不是各个li的下标。
第二种写法就不一样了,第二种写法的i虽说最后也会变成6但是每一次循环的时候都会将值传给n,这个n是几就是几,不会受到最后i值的影响,当我们点击触发事件的时候就能够得到想要的0、1、2、3、4、5的输出了。
如果对您有帮助的话别忘了点赞收藏哦❤
哔哩哔哩/bilibili:羊卓的杨