立即执行函数

发布日期: 2021-11-19

文章字数: 695

阅读时长: 2 分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.定义
        // 声明一个函数，并立即调用这个函数，此时这个函数就是立即执行函数，简单来说就是定义函数之后立即执行该函数。
        // 立即执行函数一般也写成匿名函数的形式，匿名函数写法为 function(){}，就是使用function关键字声明一个函数，
        // 但是未命名的函数。关于匿名函数有一点要注意的是：匿名函数不能单独使用，否则会报错，至少需要用 () 包裹起来。

        // 2.作用
        // ① 不需要为函数命名，避免污染全局变量。
        // ② 创建一个独立作用域，这个作用域里面的变量，外部访问不到，避免变量污染。
        // ③ 闭包和私有数据

        // 3.使用场景
        // ① 在页面加载完成后，需要立即执行的一些初始化设置，例如时间处理，创建对象等。
        // ② 一些只需要执行一次的代码，代码中的某些变量在执行结束后，再也不会被用到，我们就不适合用全局变量，可能会变量污染，此时更适合用立即执行函数。

        //##############写法Start################
        // 第一种：用括号把整个函数定义和括号调用包裹起来
        (function () {
            // 函数体
        }())

            // 第二种：用括号把函数定义包裹起来，后面再加括号调用
            (function () {
                // 函数体
            })()

            // 注意：之所以要用圆括号包裹，是因为在浏览器的JS引擎规定，如果function出现在行首，一律解析成语句，
            // 而此时我们希望JS引擎将其理解为一个表达式，圆括号的包裹就是起这个作用的。
            //##############写法End################


            //###################参数传递Start###################
            (function (j) {
                // 使用外部变量
                console.log(j)
            })(i)
        //###################参数传递End###################


        //###################返回值Start###############
        // 跟其他函数一样，可以返回任何类型的值
        // 可通过返回值实现闭包
        var result = (function () {
            var num = 666;
            return function () {
                return num;
            }
        })()
        // 由于返回值是一个函数 所以通过 () 进行调用
        console.log(result())
        //###################返回值End###############





        //###################常见面试题Start###############
        // 1.普通流程
        for (var i = 0; i < 3; i++) {
            setTimeout(function () {
                console.log(i)
            }, 300)// 输出结果为 3 3 3
        }

        // 2.立即执行函数
        for (var i = 0; i < 3; i++) {
            (function (j) {
                setTimeout(function () {
                    console.log(j)
                }, 300) // 输出结果为 0 1 2
            })(i)
        }

        // 3.let 块级作用域
        for (let i = 0; i < 3; i++) {
            setTimeout(function () {
                console.log(i)
            }, 300)// 输出结果为 0 1 2
        }
        //###################常见面试题end###############


    </script>

</body>

</html>