立即执行函数❓_羊卓的杨-CSDN博客

本文链接：https://blog.csdn.net/qq_45800977/article/details/114820682

立即执行函数

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：羊卓的杨

在这里插入图片描述