闭包函数---es6


前言

提示:
闭包(closure)指有权访问另一个函数作用域中变量的函数。
闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num


提示:以下是本篇文章正文内容,下面案例可供参考

一、闭包是什么?

1:闭包是可以访问另一个函数作用域的函数,简单说:一个作用域可以访问另外一个函数的局部变量。
变量存在的函数就是闭包函数。

二、举例说明

1:简单闭包访问

function fn() {
            var num = 10;

            function fun() {
                console.log(num);

            }
            fun();
        }
        fn();
fun函数访问了fn函数中的局部变量num

打上断点后注意刷新一下:
在这里插入图片描述
在这里插入图片描述

这里的Closuer闭包函数就算是

2.闭包的作用

 **闭包的主要作用: 延伸了变量的作用范围**
  function fn() {
            var num = 10;

            // function fun() {
            //     console.log(num);

            // }
            // return fun;
            return function() {
                console.log(num);
            }
        }
        var f = fn();
        f();
fn外部访问内部的局部变量,

3 应用

 <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
   var lis = document.querySelector('.nav').querySelectorAll('li');
 // 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);
        }
        内存泄漏,点击后才销毁,占用内存。
创建了4个立即执行函数,每个函数的参数都不一样。


  // 闭包应用-3秒钟之后,打印所有li元素的内容
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i);
        }

i 使用的部署自己的变量,闭包的作用。
立即执行函数被称为小闭包函数,里面的所有小例子都可以用它的参数。


思考

<script>
        // 思考题 1:有没有闭包的产生,输出的结果是啥?

        // var name = "The Window";
        // var object = {
        //     name: "My Object",
        //     getNameFunc: function() {
        //         return function() {
        //             return this.name;
        //         };
        //     }
        // };

        // console.log(object.getNameFunc()())
        //拆解
        // var f = object.getNameFunc();
        // 类似于
        // var f = function() {
        //     return this.name;
        // }
        // f();
        //  结果立即执行函数执行的window,不产生闭包,没有局部变量;

        // 思考题 2:

        var name = "The Window";  
        var object = {    
            name: "My Object",
            getNameFunc: function() {
                var that = this;
                return function() {
                    return that.name;
                };
            }
        };
        console.log(object.getNameFunc()())

        //拆解
        var o = object.getNameFunc()();
        var o = function() {
            return that.name;
        };

        // 结果:object
    </script>

总结

闭包函数沿用了作用域,但是有时候也浪费内存。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值