闭包闭包的作用以及闭包的应用

最新推荐文章于 2024-01-31 09:22:08 发布

周先生359

最新推荐文章于 2024-01-31 09:22:08 发布

阅读量148

点赞数

分类专栏： ES6代码笔记文章标签：大数据 javascript 前端 html es6

本文链接：https://blog.csdn.net/qq_59128070/article/details/125836496

版权

ES6代码笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>
        // 闭包（closure）指有权访问另一个函数作用域中变量的函数
        // 闭包： 我们fun这个函数作用域访问了另外一个函数 fn 里面的局部变量num
        function fn(){
            var num = 10;
            function fun(){
                console.log(num);
            }
            fun();
        }
        fn();

    </script>
</body>
</html>

<!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>
        // 闭包的主要作用:延伸了变量的作用范围
        function fn(){
            var num = 10;
            return function fun(){
                console.log(num);
            }
            // fun();
            // return fun;
        }
        fn();
        var f = fn();
        // // 相当于var  f = function fun(){
        //               console.log(num);
        //              }
        f();
    </script>
</body>
</html>

<!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>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        // 这个方法不管点击那个li都会出现4？？？
        /* 
        异步任务 function（）{} 点击了之后才会去执行
        同步任务 for  会立马执行
         */
        // var lis = document.querySelectorAll('li')
        // for(var i=0; i<lis.length;i++){
        //     lis[i].onclick = function(){
        //         console.log(i);
        //     }
        // }
        var lis = document.querySelector('.nav').querySelectorAll('li')
        // for(var i = 0;i<lis.length;i++){
        //     lis[i].index = i;
        //     lis[i].onclick = function(){
        //         // console.log(i);
        //         console.log(this.index);
        //     }
        // }
        // 2.利用闭包的方式得到当前小li的索引号
        for(var i= 0; i<lis.length;i++){
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也称为小闭包，因为立即执行函数里面的任何一个函数都可以使用它的i这个变量
            (function(i){
                // console.log(i);
                lis[i].onclick = function(){
                    console.log(i);
                }
            })(i);
        }
    </script>
</body>
</html>